关于表单你需要知道的

844 阅读4分钟
原文链接: www.jianshu.com
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 仍不支持这个属性,好在 ChromeOpera 已经支持这个属性了。


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 用来显示度量,也就是,某个已知范围里的一个特定值。这个元素有六个常用属性,minmax 属性设置范围的两端,而 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 的内部,但是因为这需要手动配对,使用起来比较麻烦。除非必须,推荐使用第一种方法。