副队长HTML教程(25)--其他表单元素

1. 引子

我也曾天真的认为，所有表单元素都是<input type="" name="">的形式，但是事实上并非如此。比如本节我要介绍的文本域、下拉菜单，都没有采用这个标准形式。

我也一度怀疑，都是表单元素，采用非统一的设计，是否不大合理，起码这种方式增加了程序员的记忆负担。

但是我的怀疑也有些犹豫，HTML语言的创建者，那都是大牛中的大牛，其中深意，岂是我这种小菜鸟能理解。

直到多年后，我学习了一些前端框架，发现不少框架又将原生HTML表单元素不统一的格式，通过框架统一起来（例如Element框架），我才后知后觉，原来有时候自己的怀疑也可能是对的。

致敬：只有实践是检验真理的唯一标准。

2. 文本域

文本域跟文本框功能是一样的，都是用来输入一段文本。区别是：文本框只能容纳一行文字，而文本域可以更大一些，容纳一段文本。

如下代码：

 	<form action="#" method="POST">
        <textarea></textarea>
    </form>

效果如下：

另外，还可以通过cols属性设置文本域宽度，rows设置文本域高度。注意col是英文单词column(列)的缩写，row的中文意思是行。

如下代码：

 	<form action="#" method="POST">
        <textarea cols="30" rows="6"></textarea>
  	</form>

效果如下：

提示：文本域右下角是可拖拽区域，鼠标靠近后按住左键拖拽，可以改变文本域大小，堪称黑科技！

3. 下拉菜单

当我们使用单选框时，如果选项太多，会让界面显得凌乱。例如选择省份时，30多个省级行政区都显示到界面上比较困难。

此时可以使用下拉菜单，只显示选中项，备选项只有点击触发时才展示出来。

如下代码是一个下拉菜单：

请选择省级行政区：
    <select>
        <option>山东</option>
        <option>山西</option>
        <option>河北</option>
        <option>香港</option>
        <option>澳门</option>
        <option>台湾</option>
        <!-- 为了方便讲解，此处未展示我国全部省级行政区，但祖国领土一寸都不能少！ -->
    </select>

其中select表示下拉菜单整体，里面的每个option标签表示下拉菜单中的一个选项。上述代码效果如下：

4. 小结

我将表单元素分为两位，一类是input开头的，称之为表单输入元素。

剩下的就是其他表单元素。