html5(新增input类型新增表单元素&新增表单属性&HTML5自带表单验证)
程序员文章站
2022-05-11 14:05:25
...
1、新增input类型
-电子邮件类型
语法：
当输入的邮件地址格式不对时，会弹出提示信息
-搜索类型
语法：<input type="search">
手机键盘会将确定变换为搜索
-URL类型
语法：<input type="url">
当输入的网址格式不正确时，会弹出提示信息
-电话号码类型
语法：<input type="tel">
主要针对移动端，针对电话号码的输入，调整手机键盘的类型
-数字类型
语法：<input type="number">
只接受数字类型，当文本框中包含非数字时，会弹出错误提示
属性：
min：文本框能接受的最小值
max：文本框能接受的最大值
step：指点击右侧按钮时递增/递减的幅度，取值为整数，默认是1
-范围类型
语法：<input type="range">
会出现一个允许滑动的块
属性：
min：起始值
max：最大值
value：当前元素的值
step：递增或递减的长度
-颜色类型
语法：<input type="color">
可以通过onchange事件，获取选择的颜色值
-日期类型
语法：<input type="date">
-周类型
语法：<input type="week">
-其他
type=month
type=time
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<form action="">
<input type="email">
<input type="search" placeholder="搜索">
<br>
<br>
<input type="url">
<br>
<input type="tel">
<br>
<input type="number" min="3" step="4" max="10">
<br>
<input type="range" min="10" max="100" value="20" id="r" step="20">
<br>
<input type="color" id="c" onchange ="fun()">
<br>
<input type="date">
<br>
<input type="week">
<br>
<input type="month">
<br>
<input type="time">
<input type="submit">
</form>
<script>
console.log($('#r').val());
function fun() {
console.log($('#c').val());
}
</script>
</body>
</html>
一、新增表单元素
1、datalist元素
可以使用该标记创建一组列表项，可以为输入框做提示
该元素需要与input进行绑定，需要有选项option
语法：
2、progress元素
进度条，消失处理的进度值
语法：<progress></progress>
属性：value：当前进度
max：最大进度值
3、meter
类似于进度条
4、output元素(选修)
用于显示表单元素处理的结果值
二、新增表单属性
1、multiple属性：规定文本框中可以包含多个值（email、file）
-多个值之间用逗号隔开
-该属性可以不设置属性值
2、autofocus
自动获取焦点，可以不设置属性值
注意，一个表单中，只会设置一个文本框自动获取焦点
3、form属性
该属性可以用于将某控件与表单关联起来
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<form action="" oninput="o.value = parseInt(n.value)+parseInt(r.value)" id="f1">
<input type="email">
<br>
<input type="number" step="3">
<br>
<!-- datalist的用法 -->
<input type="text" list="data">
<datalist id="data">
<option value="123"></option>
<option value="111"></option>
<option value="abc"></option>
</datalist>
<br>
<progress value="1" max="100"></progress>
<br>
<meter value="4" min="0" max="10">0.25</meter>
<br>
<!-- <input type="number" id="n" value="4">
+<input type="range" id="r" value="50">
=<output name="o" for="n r"></output> -->
<input type="email" multiple="">
<br>
<input type="file" multiple="">
<br>
<input type="text" autofocus="">
<input type="submit">
</form>
<input type="email" form="f1">
</body>
</html>
表单验证
1、required
必填属性，该属性不需要设置属性值
2、pattern
实现元素的指定格式的验证，多用于正则表达式指定的规则
语法格式：<input type="text" pattern="正则表达式">
手机号验证：^1[34578]\d{9}$
邮箱验证：^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$
3、min和max
最大值和最小值，适用于number
4、minlength和maxlength
最小字符个数或最大字符个数
当输入字符个数小于minlength时，会弹出提示信息，需要注意的是，设置了maxlength，文本框不允许多输入，也不会有提示
5、validity
这是表单元素的一个属性，可以用于表单验证，该属性主要利用validityState对象，描述元素的有效状态；validityState对象，代表元素是否通过验证，它提供了一些属性，可以用于描述指定元素的验证状态。
语法：表单元素dom对象.validity.属性
验证状态：
1）valid
语法：form表单元素对象.validity.valid;
valid属性是一个bool值，它表示表单元素是否通过验证，如果通过，则为true，否则为false
2）valueMissing
当控制处于无效状态时，此时控件不会验证通过，其valueMissing的值为true；注意，此状态用于验证required元素，元素为空时，该属性为true，否则为false
3）typeMismatch
如果输入的内容不符合指定的格式，该属性为true
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<form action="">
<input type="text" required="">
<br>
<input type="text" id="phone" pattern="^1[34578]\d{9}$">
<br>
<input type="text" pattern="^3\d{16}[\dx]$">
<br>
<input type="number" min="3" max="6">
<br>
<input type="text" minlength="10" maxlength="15">
<input type="submit">
</form>
<form action="">
<input type="text" id="text" required="">
<br>
<input type="email" id="e">
<br>
<input type="url" pattern="^3\d{16}[\dx]$" id="p">
<input type="button" value="注册" onclick="regist()">
</form>
<script>
function regist() {
var d = document.getElementById('text');
// if (d.value.length == 0) {
// console.log("请填写")
// }
console.log(d.validity.valid);
console.log(d.validity.valueMissing+"--=");
// if (d.validity.valid) {
// console.log("验证通过")
// }else{
// console.log("验证失败");
// }
var email = document.getElementById('e');
if (e.validity.typeMismatch) {
console.log("邮箱格式不正确")
}
var p = document.getElementById('p');
if (p.validity.typeMismatch) {
console.log("不匹配正则")
}
}
</script>
</body>
</html>
上一篇： HTML5新增的表单元素
下一篇： HTML5新增表单元素的属性