undefined

HTML5表单新增

发表于 | 分类于 ，
字数统计: 2,532 | 阅读时长 ≈ 13

新增输入型控件

email

•电子邮箱文本框，跟普通的没什么区别

–当输入不是邮箱的时候，验证通不过

移动端的键盘会有变化

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="email" />
	<input type="submit" />
</form>
</body>
</html>

tel

电话号码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="tel" />
	<input type="submit" />
</form>
</body>
</html>

url

网页的url

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="url" />
	<input type="submit" />
</form>
</body>
</html>

搜索引擎

–chrome下输入文字后，会多出一个关闭的X

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="search" />
	<input type="submit" />
</form>
</body>
</html>

range

特定范围内的数值选择器

–min、max、step(步数）

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="range" step="2" min="0" max="10" value="2" />
	<input type="submit" />
</form>
</body>
</html>

number

只能包含数字的输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="number"/>
	<input type="submit" />
</form>
</body>
</html>

color

颜色选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="color"/>
	<input type="submit" />
</form>
</body>
</html>

datetime

显示完整日期

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="datetime"/>
	<input type="submit" />
</form>
</body>
</html>

datetime-local

显示完整日期，不包含时区

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="datetime-local"/>
	<input type="submit" />
</form>
</body>
</html>

time

显示时间，不包含时区

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="time"/>
	<input type="submit" />
</form>
</body>
</html>

date

显示日期

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="date"/>
	<input type="submit" />
</form>
</body>
</html>

week

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="week"/>
	<input type="submit" />
</form>
</body>
</html>

month

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="month"/>
	<input type="submit" />
</form>
</body>
</html>

表单新增相关属性

placeholder

输入框提示信息

例子：微博的密码框提示

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" placeholder="请输入4-16个字符" />
	<input type="submit" />
</form>
</body>
</html>

autocomplete

是否保存用户输入值

默认为on,关闭提示选择off

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
	<input type="submit" />
</form>
</body>
</html>

autofocus

指定表单获取输入焦点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" autofocus />
	<input type="submit" />
</form>
</body>
</html>

list和datalist

为输入框构造一个选择列表

–list值为datalist标签的id

required

此项必填，不能为空

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required />
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" required />
	<input type="submit" />
</form>
</body>
</html>

pattern

正则验证 pattern=”\d{1,5}“

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
	<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />
	<input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
</form>
</body>
</html>

formaction

在submit里定义提交地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
	<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />
	<input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
</form>
</body>
</html>

表单验证反馈

validity对象，通过下面的valid可以查看验证是否通过，如果8种验证都通过，返回true,一种验证失败返回false。

oText.addEventListener(“invalid”,fn,false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" required id="text"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.valid);
	ev.preventDefault();
}
</script>
</body>
</html>

ev.preventDefault();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" required id="text"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.valueMissing);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
</script>
</body>
</html>

valueMissing

输入值为空时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" required id="text"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.valueMissing);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
</script>
</body>
</html>

typeMismatch

控件值与预期类型不匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="email" id="text"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.typeMismatch);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
</script>
</body>
</html>

patternMismatch

输入值不满足pattern正则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" id="text" pattern="\d{1,5}"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.patternMismatch);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
</script>
</body>
</html>

tooLong

超过maxlength最大限制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="email" id="text" maxlength="5"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="123456789";
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.tooLong);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
</script>
</body>
</html>

rangeUnderflow

验证range的最小值

rangeOverflow

验证range的最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="range" value="2" min="1" max="10" step="2" id="text" />
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="2";
alert(oText.value);
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.rangeOverflow);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
</script>
</body>
</html>

stepMismatch

验证range的当前值是否符合min\max以及step的规则

customError

不符合自定义验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
	<input type="text" id="text" />
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()
{
	if(this.value=="敏感词")
	{
		this.setCustomValidity("请不要输入敏感词");
	}
	else
	{
		this.setCustomValidity("");
	}
};
function fn()
{
	alert(this.validity.customError);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
//customError  不符合在定义验证的时候返回true
</script>
</body>
</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多