1. 关于文件输入控件
使用文件输入控件可以浏览本地网络的一个文件，以上传到网站。比如下面这段代码
<input type="file" name="file">
上传一个文件并没有什么稀奇的，但是有的时候我们希望一次性上传多个文件，比如身份证的正反面图片。这需要借助于 multiple 属性，代码就变成了下面这样。
<input type="file" name="file" multiple>
这种方式的确很方便，而且很简单，但并不是所有浏览器都支持这一功能，我尝试了 Firefox, Chrome, Opera 这三种浏览器，Firefox 目前尚不支持这一功能，至少在我的电脑上是不支持的。
文件输入控件还有一个 accept 属性，理论上可以用来限制上传文件类型。然而，实际上它只是建议性的，并且很可能会被忽略。它接受逗号分隔的 MIME 类型，比如将上传的文件类型限制为图片，就可以将代码写成如下形式。
<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png" multiple>
很不幸的是，Firefox 仍不支持这个属性，好在 Chrome和 Opera 已经支持这个属性了。
2. 关于复选框
一个复选框通常是一个方形的盒子，可以打勾或者去掉勾，但是用 JavaScript 可以设置第三种中间状态，这样的复选框外观上既不是勾选也不是未勾选，就像下面这样。
demo01.png
代码实现如下
<input type="checkbox" name="option1" id="option1">
<input type="checkbox" name="option2" id="option2" checked>
<input type="checkbox" name="option3" id="option3">
<script>
function init() {
document.getElementById("option3").indeterminate = true;
}
window.onload = init;
</script>
3. 关于隐藏输入域
隐藏输入类型用于在表单中增加对用户不可见，但是需要提交的额外数据。举个例子来说，隐藏域有时候用来告知服务器可接受的上传文件的最大容量，下面的例子就是告诉服务器上传文件的大小是 20KB。
<input type="hidden" name="MAX_FILE_SIZE" value="200000">
4. 使用数据列表
大多数输入类型包含一个属性 list， 它和一个新元素 datalist 结合使用。这个元素定义当在表单控件输入数据时可用的一个选项列表。效果像下面这样
demo02.png
代码如下所示
<input type="text" name="salary" placeholder="Enter desired salary" list="salaries">
<datalist id="salaries">
<option value="1000"></option>
<option value="4000"></option>
<option value="8000"></option>
<option value="12000"></option>
</datalist>
5. 添加菜单结构
可以利用 optgroup 元素来分组类似的 option 元素。得出下面的结果
demo03.png
代码如下
<select name="class">
<optgroup label="science lesson">
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</optgroup>
<optgroup label="liberal lesson">
<option value="history">History</option>
<option value="political">Political</option>
<option value="geography">Geography</option>
</optgroup>
</select>
6. 显示进度
可以使用 progress 显示某一步骤的进度，有两个属性，一个是 max，用于设置最大值，另一个是 value，表示当前的值。
<p><progress value="1" max="3">1/3</progress></p>
效果如下
demo04.png
对于不支持该元素的浏览器，在元素的标签里加上有意义的文字很重要。因为如果 progress 元素不支持，就可以显示文字。
还有一个看上去和 progress 很像的元素，那就是 meter 元素，这二者有很重要的区别， progress 用于显示步骤的进度，而 meter 用来显示度量，也就是，某个已知范围里的一个特定值。这个元素有六个常用属性，min 和 max 属性设置范围的两端，而 value 设置当前的度量。还有三个属性用于图解的目的，它们分别是 optimum, low, high，可以将区间划分为区域，optimum 用于设置最适宜的区域，下面看个例子。
demo05.png
<p><meter min="0" max="100" value="10" low="20" optimum="60" high="90">10%</meter></p>
<p><meter min="0" max="100" value="70" low="20" optimum="60" high="90">70%</meter></p>
<p><meter min="0" max="100" value="95" low="20" optimum="60" high="90">95%</meter></p>
7. label 的使用
有两种方法可以创建可点击的标签，第一个，也是推荐的做法，用 label 包括表单控件，示例如下：
<label>Your name: <input type="text" name="name"></label>
另一种方法是使用 for 属性 ：
<label for="name">Your name: </label>
<input type="text" name="name" id="name">
使用 for 属性的好处是，表单控件不需要出现在 label 的内部，但是因为这需要手动配对，使用起来比较麻烦。除非必须，推荐使用第一种方法。
8. 表单验证
<form name="signForm">
<input type="text" name="phone" pattern="[0-9]{11}" id="phone" required>
<input type="submit" name="">
</form>
这样的一个表单，我们可以在 JS 中对每个控件进行验证，也可以对整个表单进行验证。假设现在要对 input 控件进行验证，我们可以使用 checkValidity() 方法。
<script>
if( document.signForm.phone.checkValidity() === false ) {
console.log("Failed!");
}
</script>
如果一个表单里有很多个控件，那么我们当然不希望针对每个控件都写一段验证代码，所以这时候可以对整个表单进行验证。
document.signForm.checkValidity();
令人激动人心的是，我们还可以自定义错误提示信息，针对上面表单中的 phone 控件，我们有两个约束规则，分别是 pattern 和 required， 如果不符合条件，浏览器默认会弹出提醒，像下面这样。
demo01.png
我们可以通过 setCustomValidity() 方法自定义弹出消息。
document.signForm.phone.setCustomValidity("Hello World!");
demo02.png
9. 禁用默认样式
表单元素的默认样式一般都不漂亮，所以有的时候我们想要对元素进行自定义，比如对于 input[type = number] 控件的默认样式是框内有上下调节的按钮，我们可以通过修改样式表，将其去除。
input[type = number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
修改前.png
修改后.png
不断更新 ...
网友评论