# 新的表单元素
# 新的Input类型
# 修改表单控件中的默认提示信息
- 表单验证触发
oninvalid事件 - 通过
setCustomValidity方法设置修改内容
<form action="#" method="get">
<input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
<input type="submit" name="">
</form>
<script>
var input = document.querySelector(".uname");
input.oninvalid=function(){
if(this.validity.patternMismatch===true){
this.setCustomValidity("请输入4到11位数字");
}else{
this.setCustomValidity("");
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# datalist元素
input 元素使用 datalist 预定义值
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# output元素
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
1
2
3
4
5
2
3
4
5
# keygen元素
<keygen>元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
# 表单新属性
# form
- autocomplete = on | off 自动完成
- novalidate = true | false 是否关闭校验
# input
- autofocus : 自动获取焦点
- multiple : 实现多选效果
- placeholder : 占位符
- required : 必填项
- autocomplete :
- form : 规定输入域所属的一个或多个(用空格分隔)表单
- formaction :
- 用于描述表单提交的URL地址
- 与
type="submit"和type="image"配合使用 - 会覆盖
<form>元素中的action属性
- formenctype :
- 属性描述了表单提交到服务器的数据编码
- 与
type="submit"和type="image"配合使用 - 会覆盖
form元素的enctype属性
- formmethod :
- 定义了表单提交的方式
- 覆盖了
<form>元素的的method属性 - 与
type="submit"和type="image"配合使用
- formnovalidate :
- 描述了
<input>元素在表单提交时无需被验证 - 会覆盖
<form>元素的novalidate属性 - 与
type="submit"一起使用
- 描述了
- formtarget :
- 指定一个名称或一个关键字来指明表单提交数据接收后的展示
- 覆盖
<form>元素的target属性 - 与
type="submit"和type="image"配合使用
- pattern (regexp)
- 描述了一个正则表达式用于验证
<input>元素的值 - 适用于以下类型的input标签: text, search, url, tel, email, 和 password
- 描述了一个正则表达式用于验证
- list : 规定输入域的 datalist
- height and width
- min and max
- step