本章会把<form>内的表单元素都给撸一遍。

<input> 元素

最重要的表单元素就是<input>元素。

<input>元素有多种不同展现形式，这由其type属性决定的。如果type属性没有被设置，则会取其默认值“text”。

<input name="name" type="text">

运行一下

<select> 元素

<select>元素可定义出一个下拉列表：

<select name="gang">
  <option value="huashan">华山派</option>
  <option value="riyue">日月神教</option>
  <option value="yihe">义和团</option>
  <option value="shushan">蜀山剑派</option>
</select>

运行一下

<option>元素可定义一个用来被选择的选项。

默认情况下，第一个option元素是被选中的状态；
当然这也可以通过设置option的selected属性来规定出哪一个选项是被默认选中的。例如：

<option value="yihe" selected>义和团</option>

运行一下

通过设置<select>的size属性可以设置下拉列表的可视行数，默认情况下，下拉列表只能看见1行，如果把size设置成大于1的整数，就可以看见相应的行数。上例子，自己试试呗：

<select name="gang" size="3">
  <option value="huashan">华山派</option>
  <option value="xiaoyao">逍遥派</option>
  <option value="yinxiang">印象派</option>
  <option value="xueyuan">学院派</option>
  <option value="riyue">日月神教</option>
  <option value="yihe">义和团</option>
  <option value="shushan">蜀山剑派</option>
</select>

运行一下

通过设置<select>元素的multiple属性，可实现多选功能。
备注：大部分浏览器的多选动作，需要用户自己配合ctrl/command键盘来实现多选；不要用专否沙盒的/action_page这个网址来测试提交多选的表单结果。

<select name="gang" size="3" multiple>
  <option value="huashan">华山派</option>
  <option value="xiaoyao">逍遥派</option>
  <option value="yinxiang">印象派</option>
  <option value="xueyuan">学院派</option>
  <option value="riyue">日月神教</option>
  <option value="yihe">义和团</option>
  <option value="shushan">蜀山剑派</option>
</select>

运行一下

<textarea> 元素

<textarea>元素是用来定义文本框的，所谓文本框是可以不止一行的。
如下例所示，rows属性是用来定义文本框的可视行数，cols属性是用来定义文本框的可视列数，去试试呗！

<textarea name="message" rows="10" cols="30">
朕在星巴克看美女在…… 1个、2个、3个……
</textarea>

运行一下

当然，姑娘，你也可以通过CSS中的width和height来设定文本框的高度和宽度：

<textarea name="message" style="width:300px;height:100px;">
朕在星巴克看美女在…… 10个、20个、30个……
</textarea>

运行一下

<button> 元素

<button>元素是用来定义按钮的。

<button type="button" onclick="alert('^_^ 给你竖个中指 __|_');">
Come on！来戳我吧！
</button>

运行一下

HTML5 新加的表单元素

HTML5新加了一些表单元素，譬如：<datalist>元素和<output>元素。

注意：这些新的表单元素的浏览器兼容性并不高；基本上很少用；大致知道就可以啦~

HTML5 <datalist> 元素

<datalist>元素可以为input元素预设一个备选列表。当用户输入时，则会显示出一个下拉列表以供用户快捷选择。（<input>元素的list属性必须和<datalist>的id保持统一方可得以绑定。）

<form action="/action_page">
  <input list="gang" name="gang">
  <datalist id="gang">
    <option value="华山派">
    <option value="日月神教">
    <option value="义和团">
    <option value="学生会">
  </datalist> 
</form>

运行一下

HTML5 <output> 元素

<output>元素可以动态表现计算的结果。如下例所示：

<form action="/action_page"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="51">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

运行一下