# 新的表单元素
# 新的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>
# 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>
# 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>
# 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