表单元素
H5保留了HTML原来的表单及表单控件，并对它们进行了功能上的增强。
<form…/>元素用于生成输入表单，该元素不会生成可视化部分。在HTML5规范之前，其他表单控件，如单行文本框，多行文本域，单选按钮，复选框都必须放在<form…/>元素之内。
<form…/>元素可以指定id，style，class等核心属性，还可以指定onclick等事件属性。除此之外还可以指定如下几个属性。
- action: 指定当单击表单内的"确认"按钮时，该表单被提交到哪个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址。该属性必填。
- method: 指定提交表单时发送何种类型的请求，该属性可改为get或post，分别用于发送GET或POST请求。该属性必填。
- enctype: 指定对表单内容进行编码所使用的字符集。
- name: 指定表单的唯一名称，建议该属性值与id属性值保持一致。
- target: 指定使用哪种方式打开目标URL(提交请求会打开另一个URL资源)，与超链接的target可接受的属性值完全一样，该属性可以是_blank，_parent，_self和_top四个值中之一。
GET请求和POST请求的区别
- GET方式的请求:直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的<form…/>元素没有设置method属性，或设置method属性为get，这几种请求都是GET方式请求。GET方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数名和值。且GET请求传送的数据量最小，一般不能大于2KB。
- POST方式的请求: 这种方式通常使用提交表单的方式来发送，且需要设置<form…/>元素的method属性为post。POST方式传送的数据量大，通常认为POST请求的参数大小不受限制，但往往取决于服务器的限制，POST请求传输的数据总比GET传输的数据量大。而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能在地址栏里看到请求参数值，安全性相对较高。
表单的enctype属性用于指定表单的编码方式
- application/x-www-form-urlencoded: 这是默认的编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
- multipart/form-data: 这种编码方式会以二进制流的方式来处理表单数据，这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值。
- text/plain: 当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便，这种编码方式主要适用于直接通过表单发送邮件的方式。
使用input元素
- 单行文本框: 指定<input…/>元素的type属性为text即可
- 密码输入框: 指定<input…/>元素的type属性为password即可
- 隐藏域: 指定<input…/>元素的type属性为hidden即可
- 单选框: 指定<input…/>元素的type属性为radio即可
- 复选框: 指定<input…/>元素的type属性为checkbox即可
- 图像域: 指定<input…/>元素的type属性为image即可。当type="image"时，可以为<input…/>元素指定width和height两个属性
- 文件上传域: 指定<input…/>元素的type属性为file即可
- 提交，重设，无动作按钮: 分别指定<input…/>元素的type属性为submit，reset或button即可
H5新增表单属性
- form属性: H5为所有表单控件新增了form属性，可以随意地放置，排列表单控件
- formaction属性: 该属性动态地让表单提交到不同的URL
- formxxx属性: formenctype: 让按钮动态地改变表单的enctype属性；formmethod: 让按钮动态地设置表单以POST或GET方式提交；formtarget: 让按钮动态地改变表单的target属性
- autofocus: 打开页面时该组件自动获得焦点，因此整个页面上最多只能有一个表单控件可以设置该属性
- placeholder: 用户未输入信息就显示对用户的提示信息
- list属性: list属性的值应该是一个<datalist…/>组件的id，list属性必须与<datalist…/>元素结合使用
- autocomplete属性: 配合list属性使用，on/off，文本框下方会/不会显示下拉菜单
H5为<input…/>元素的type属性新增了如下可能的类型
- color: 让<input…/>元素生成一个颜色选择器
- date: 让<input…/>元素生成一个日期选择器
- time: 让<input…/>元素生成一个时间选择器
- datetime: 让<input…/>元素生成一个UTC日期，时间选择器
- datetime-local: 让<input…/>元素生成一个本地日期，时间选择器
- week: 让<input…/>元素生成一个供用户选择第几周的文本框
- month: 让<input…/>元素生成一个月份选择器
- email: 让<input…/>元素生成一个E-mail输入框
- tel: 让<input…/>元素生成一个只能输入电话号码的文本框
- url: 让<input…/>元素生成一个URL输入框
- number: 让<input…/>元素生成一个只能输入数字的文本框
- range: 让<input…/>元素生成一个拖动条
- search: 让<input…/>元素生成一个专门用于输入搜索关键字的文本框
FileList对象与File对象
- JavaScript可以通过files属性访问type="file"的让<input…/>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问数组内的每个File对象。
- File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览的所有文件的信息。File对象包含name，type，size等属性
使用FileReader读取文件内容
- FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。它提供了如下方法。
- readAsText(file, encoding): 以文本文件的方式读取该文件，其中encoding参数指定读取该文件所用的字符集，该参数的默认值是UTF-8。
- readAsBinaryString(file): 以二进制方式来读取该文件。通过这种方式可以读取文件的二进制数据，这样就可以通过Ajax把数据上传到服务器。
- readAsDataURL(file): 以DataURL方式读取文件。这种方式也可以用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式的字符串。
- abort(): 停止读取。
- FileReader所有readXxx()方法都是异步方法，程序必须以事件监听的方式来获取读取的结果。FileReader提供了如下事件来监听读取过程。
- onloadstart: FileReader开始读取数据时触发该事件指定的函数。
- onprogress: FileReader正在读取数据时触发该事件指定的函数。
- onload: FileReader成功读取数据后触发该事件的函数。
- onloadend: FileReader读取数据完成后触发该事件之间的函数，无论成功还是读取失败都将触发该事件的函数。
- onerror: FileReader读取数据失败时触发该事件指定的函数。
H5新增表单校验
- required: 该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值
- pattern: 该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式
- min，max，step: 这3个属性只对数值类型，日期类型的<input…/>元素有效，这3个属性控制该表单控件的值必须在min~max之间，并符合step步长
H5调用checkValidity方法进行校验
- 如果表单对象调用checkValidity()方法返回true，则表明该表单内的所有表单控件都有效。只要有任意一个表单控件不能通过输入校验，表单对象的checkValidity()方法就会返回false
<body>
<form action="add">
生日:<input id="birth" name="birth" type="date" /><br />
邮箱地址:<input id="email" name="email" type="email" /><br />
<input type="submit" value="提交" onclick="return check();" />
</form>
<script type="text/javascript">
var check = function() {
return commonCheck("birth", "生日", "字段必须是有效日期") && commonCheck("email", "邮箱地址", "字段必须符合电子邮件的格式");
}
var commonCheck = function(field, fieldname, tip) {
var targetEle = document.getElementById(field);
if (targetEle.value.trim() == "") {
alert(fieldname + "字段必须填写");
return false;
} else if (!targetEle.checkValidity()) {
alert(fieldname + tip);
return false;
}
return true;
}
</script>
</body>
- setCustomValidity()方法接受一个字符串参数，该字符串将会作为用户"自定义"的错误提示。需要指出的是，只要调用了某个表单控件的setCustomValidity()方法，就意味着该表单控件没有通过校验。目前浏览器对于兹定于错误提示支持不是很理想，当调用了setCustomValidity()方式改变错误提示之后，即使浏览者在表单控件中输入的内容符合校验规则，浏览者也必须把页面刷新一次。
<body>
<form action="add">
图书名:<input id="name" name="name" type="text" required /><br />
图书ISBN:<input id="isbn" name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}" /><br />
图书价格:<input id="price" name="price" type="number" min="20" max="150" step="5" /><br />
<input type="submit" value="提交" onclick="check();" />
</form>
<script type="text/javascript">
var check = function() {
if (!document.getElementById("name").checkValidity()) {
document.getElementById("name").setCustomValidity("图书名是必填的！");
}
if (!document.getElementById("isbn").checkValidity()) {
document.getElementById("isbn").setCustomValidity("图书ISBN必须填写，" + "\n而且必须符合xxx-x-xxx-xxxxx的格式(其中x代表数字)");
}
if (!document.getElementById("price").checkValidity()) {
document.getElementById("price").setCustomValidity("图书价格必须填写，" + "\n而且必须在20~150之间，且是5的倍数。");
}
}
</script>
</body>
关闭校验
- 为<form…/>元素增加novalidate属性，该属性的值要么是novalidate，要么省略属性值
- 为type="submit"的<input…/>或<button…/>元素设置formnovalidate属性，该属性的值要么是novalidate，要么省略属性值
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
