关于表单以及HTML5、CSS可节省很多代码的属性

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 的内部，但是因为这需要手动配对，使用起来比较麻烦。除非必须，推荐使用第一种方法。