虽然 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><button> 按钮
就是一个按钮，根据它所设置的类型，会有不同的效果。可用的类型如下：
submit: 用来提交当前表单。如果没有设置按钮的类型，默认就是这个类型；reset: 用来重置所有表单项目；button: 就是一个按钮，没有任何动作，但你可以自己写脚本，让它实现各式各样的动作；
比较而言，<button> 要比 <input type="button"> 更容易设置各种样式。我比较推荐使用这个标签来书写按钮，因为这样更容易读懂这是一个按钮，而不是其他输入元素。
<output> 输出
这个标签其实没有什么实际作用，主要是用来语义化的说明这个区域的内容是输出的内容，比如通过用户输入的数据，进行计算后产生的结果等。
以上就是我们在表单中常用的元素，主要是带大家简单认识一下，所以介绍的非常简略，详细部分在我们后面应用的时候，再逐渐的去认识，否则现在讲了一堆理论，却没有办法实际应用，是很难以理解的。
暂无评论内容