虽然 input 元素有那么多种类型,可以实现很多的功能,但它并不是表单中的唯一一种元素。这一章我们就来介绍一下表单中的其他元素。

<fieldset> 分组

有时候,表单内包含大量内容,如果就这么直接的把它们写出来,就仿佛一篇没有标题的万字长文,没有人会喜欢去读。所以我们就要对表单的内容进行分组,好像给文章加上小标题,又或者我们简历中,会分为基本信息,工作经历等几个部分,让人看起来清晰明了,一下子就知道什么信息应该到哪里去找。

<legend> 分组的说明

有了分组,我们还需要向读者说明一下,这一部分主要是什么内容,那就是 <legend> 标签了。这两个标签用起来也十分的简单:

<form action="test.php" method="get">
  <fieldset>
    <legend>这里写说明就行了</legend>
    <input type="text" name="miao">
  </fieldset>
</form>

当然每个分组里放多少表单元素都是可以的,我这里限于篇幅,就只写了一个。

<label> 标签

这是用来对表单中某个元素进行说明的,感觉就很类似于上面的 <legend> 了。只不过一个是对单个元素进行说明,一个是对整个组进行说明。

然后标签有一个十分常用的属性,for,用来表示这个标签是对哪个元素进行的说明。for 属性的值和被说明元素 id 的值一致即可。比如下面:

<label for="User">点击这里,下方输入框便会获得焦点</label>
<input type="text" id="User" name="Name" />

<select> 下拉列表

这种形式我们都见到过,不过下拉列表比其他元素略显复杂一些。

<option> 列表项

一听这个名字,大家可能就想起 第十五章 列表 中的内容了,他们确实很相似,不过 <option> 其实应该叫做下拉列表的选项。

<optgroup> 选项分组

和最开始的表单分组一样,如果下拉列表中内容过多,我们也可以对他们进行分组。当然,这两种分组都不是必须的,只有三两个内容的时候,就完全没有必要进行分组嘛。下面是下拉列表中三个标签的使用演示,因为是演示,所以虽然内容不多,还是进行了一下分组:

<select>
  <option>没有被分组的第一项</option>
  <option>没有被分组的第二项</option>
  <optgroup label="第一组">
    <option>第一组第一项</option>
  </optgroup> 
  <optgroup label="第二组">
    <option>第二组第一项</option>
    <option>第二组第二项</option>
  </optgroup>
</select>

<datalist> 数据列表

上面的列表只有固定的几项可供选择,但是我们也见过一种列表,既可以自行选择,也可以进行输入。其实就是用数据列表配合 input 标签来实现的。<datalist> 用法和 <select> 十分类似,但是它的选项不能用 <optgroup> 分组。

<input type="text" name="miao" list="list_a">
<datalist id="list_a">
  <option>第一项</option>
  <option>第二项</option>
  <option>第三项</option>
</datalist>

<textarea> 多行文本框

input 只能用来输入单行文本,而需要多行文本的时候,我们就要使用 <textarea> 了。这个标签需要成对出现,它中间的内容会被显示在文本框中,作为默认值,需要注意这时候里面的空白会对内容的显示产生实际影响:

<textarea>
  这里面的内容会被显示出来
  空白    也就会产生一定的影响
</textarea>

<progress> 进度条

他有两个属性需要设置,一个 max 表示整个进度条代表的数量;一个 value 表示当前的数量。如果 value 属性没有设置,进度条显示为不确定的状态。因为用户浏览器和操作系统的不同,进度条会显示成不同的样式。

<progress value="70" max="100">70 %</progress>
<progress max="100">奇怪的未知状态</progress>
70 %
奇怪的未知状态

<button> 按钮

就是一个按钮,根据它所设置的类型,会有不同的效果。可用的类型如下:

  • submit: 用来提交当前表单。如果没有设置按钮的类型,默认就是这个类型;
  • reset: 用来重置所有表单项目;
  • button: 就是一个按钮,没有任何动作,但你可以自己写脚本,让它实现各式各样的动作;

比较而言,<button> 要比 <input type="button"> 更容易设置各种样式。我比较推荐使用这个标签来书写按钮,因为这样更容易读懂这是一个按钮,而不是其他输入元素。

<output> 输出

这个标签其实没有什么实际作用,主要是用来语义化的说明这个区域的内容是输出的内容,比如通过用户输入的数据,进行计算后产生的结果等。


以上就是我们在表单中常用的元素,主要是带大家简单认识一下,所以介绍的非常简略,详细部分在我们后面应用的时候,再逐渐的去认识,否则现在讲了一堆理论,却没有办法实际应用,是很难以理解的。

【本章助记卡片:卡片 for 第二十一章