表单元素是很多网站都会用到的元素, 用来收集用户的信息.
一. 什么叫表单元素
HTML表单是用户和web站点或应用程序之间交互的主要内容之一。
它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以拦截它自己并使用它。
HTML表单是由一个或多个小部件组成的。
这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。
大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单输入的内容。
HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。
关于如何设置web服务器, 后期课程再进行学习.
一句话总结: 表单就是用来收集用户的输入的信息!!!
二. 实现一个最简单的表单
2.1 <form>元素
所有的HTML表单都是以一个<form>元素开始:
<form action="/handling_form_page" method="post">
</form>
说明:
<form>元素正式定义了一个表单.它是一个容器元素，
它的所有属性都是可选的，但至少要设置
action属性和method属性，这被认为是最佳实践。action属性定义了在提交表单时所收集的数据的位置(URL)。method属性定义了发送数据的HTTP方法(它可以是get或post).
2.2 添加表单下部件
<form action="/handling_form_page" method="post">
<div>
<label for="name">姓名:</label>
<input type="text" id="name"/>
</div>
<div>
<label for="mail">电子邮箱:</label>
<input type="email" id="mail"/>
</div>
<div>
<label for="msg">个人介绍:</label>
<textarea id="msg"></textarea>
</div>
</form>
说明:
<div>元素可以方便地构造我们的代码，使样式更简单. (后面再细讲)<label>元素上使用for属性；它是将标签链接到表单小部件的一种正式方式。这个属性引用相应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件。在
<input>元素中，最重要的属性是type属性。这个属性非常重要，因为它定义了<input>属性的行为方式。它可以从根本上改变元素，所以要注意它。<textarea>可以输入多行文本.<input>是空标签, 所以他可以不用关闭. 但是<textarea>必须要有关闭标签.
三. 更多type属性的值
通过更改<input>元素的type属性的值, 可以更改表单元素.
html5中给type属性定义了更加丰富的值, 我们后续再研究.
3.1 type=text:文本框
<input type="text">
这个是一个单行的文本框.
说明:
- 如果先给文本框添加默认值, 可以使用
value=默认值属性.
3.2 type=password:密码框
输入的文本会用*来显示. 比较适合用来输入密码.
<input type="password">
3.3 type=radio:单选按钮
单选按钮用在多选一的情况. 比如选择选择性别.
要实现他们之间的互斥操作, 则必须给每个单选男女添加相同的name属性.
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
说明:
- 如果想要默认选中某个
<input>, 给他添加一个checked属性即可,可以添加属性值(和属性名相同)也可以不添加.
<input type="radio" id="male" name="sex" checked>
或者
<input type="radio" id="male" name="sex" checked="checked">`
3.4 type=checkbox:复选按钮
<label for="eat">吃饭</label><input type="checkbox" id="eat" name="eat" checked>
<label for="sleep">睡觉</label><input type="checkbox" id="sleep" name="sleep">
<label for="hit_dd">打豆豆</label><input type="checkbox" id="hit_dd" name="hit_dd">
3.5 type=submit: 提交按钮
<input type="submit" value="提交">
说明:
- 通过点击此按钮, 可以把表单数据提交到后台服务器. 具体知识后面详解.
3.6 type=reset: 重置按钮
<input type="reset" value="重置">
说明:
- 通过点击此按钮, 可以重置用户已经输入的数据.
HTML5中新增了更多的type的值, 待到后期的课程再细讲.
四. <textarea>:文本输入域
<textarea> 元素表示一个多行纯文本编辑控件。
他有几个属性:
cols: 文本域的可视宽度.必须是正数.rows:元素的输入文本的行数（显示的高度）。
还有一些其他HTML5支持的属性, 后面再讲.
说明:
<textarea>的尺寸默认是可以调节的, 可以在css中通过resize: none;来禁止.
五. 下拉菜单
<select> 元素是一种表单控件，可创建选项菜单。菜单内的选项为<option>, 可以由<optgroup>元素分组。选项可以被用户预先选择。
<select>
<option value="bj">北京</option>
<option value="gd" selected>广东</option>
<option value="sh">上海</option>
</select>
说明:
- 想让哪个
<option>默认被选中, 添加selected的属性即可.和checked属性类型, 也是属性名和属性值相等的属性.
一些属性:
1. size属性
如果控件显示为滚动列表框，则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为0
<select size="3">
<option value="bj">北京</option>
<option value="gd" selected>广东</option>
<option value="sh">上海</option>
<option value="sh">山东</option>
<option value="sh">河南</option>
<option value="sh">湖北</option>
</select>
2. multiple属性
这个布尔值的属性标记select是否可以多选. 默认是单选.
按住ctrl键可有实现多选.
