《HTML&CSS设计与构建网站》第七章 表单

表单结构：

<form>创建表单。还要设置以下的属性：
action：它的属性值是服务器上一个页面的URL，这个页面用来在用户提交表单时接受表单的信息。
method：可选择表单的提交方式：get或者post。
使用get方法时，表单中的值被附加在由action特性所制定的URL末尾：适用于：短列表（搜索框），只从web服务器上检索数据。
使用post方法时，表单的值被放在HTTO头信息中进行发送。适用于：允许用户上传文件，非常长，包含敏感信息 ，向数据库中添加或删除信息。
id 唯一性的标识。

单行文本框：

<input>空元素，可以创建多种不同类型的表单控件，其type属性决定了他要创建哪种控件。
type=“text“：表示表单是单行文本框。
name：它对表单控件进行标识并与输入的信息一同传送到服务器。
maxlength：限制用户在文本区域输入字符的数量。
size（很少用）：指定文本框的宽度（根据可见的字符数量来衡量）。

密码框：

type=“password“：表示表单是密码的文本框，输入被屏蔽。

name：它对表单控件进行标识并与输入的信息一同传送到服务器。
maxlength：限制用户在文本区域输入字符的数量。
size（很少用）：指定文本框的宽度（根据可见的字符数量来衡量）。
为了保证绝对安全，应设置服务器通过安全套接层（SSL）与用户的浏览器进行连接。

文本域:

<textarea>创建多行文本，区别于input标签，它不是空元素，有起始和结束标签。

单选按钮:

type=“radio"：只让用户从一系列选项中选择一个。
name：区别于前面的，当一个问题以单选按钮的形式给用户提供了一系列答案时，用来回答这个问题的所有单选按钮的name属性值都应该相同。
value：被发送的服务器的值，同一组（name相同）中的value值不同。
checked：指定页面加载中哪个值会被选中。
注：一旦选择了单选按钮，便不能取消。

复选框：

type=“checkbox"：允许用户在回答问题时选择一个或者多个选项。

value：被发送的服务器的值，同一组（name相同）中的value值不同。
checked：指定页面加载中哪个值会被选中。

下拉列表框：

<select>让用户在一个下拉列表中选择其中的一个选项。它包含两个及两个以上的<option>元素，适合选项列表很长。
<option>指定用可以选择的选项
            value：选项的值，不是<option>标签夹的内容，这个是上服务器的。

            selected：指定页面加载时被选中的选项。如未使用，那么就是第一个选项。

多选框:

<select>
size：size特性的值应该是你希望一次显示的选择数量。
multiple：将该特性的值设置为multiple，来允许用户从这一列表中选择多个选项。

文件上传域：

<input>
type=“file"：会创建一个后面附有Browse按钮的类似文本框的空间。当用户单机Browse按钮时，会打开一个新窗口来让用户从他们的计算机上选择一个文件传到网站。（如果允许用户上传文件，必须将<form>元素的method特性设置为post。无法控制这个窗口的外观。）

提交按钮：

<input>
type=“submit"：提交按钮用来将表单发送到服务器。
name：不是必须。
value：用于控制按钮上显示的文本。

图像按钮：

<input>
type=“image"：使用图像作为提交按钮。src,width,height和alt特性和<img>中一样。

按钮和隐藏控件:

<button>让用户更好的控制按钮的显示方式。在<button>和</button>之间可以结合使用文本和图像。

<input>
type=“hidden"：允许网页设计人员向表单中添加用户不能看到的值。（隐藏字段来指挥用户菜提交表单时位于哪个页面）

标签表单控件：

<lable>使用表单时，可以直接通过表单控件旁边的文本说明它的作用。（即点击绑定的文本也能选择）
两种方式使用它：

将文本说明和表单输入框用lable全部包围起来。
与表单控件分开，使用for特性来指明<lable>元素所关联的表单控件。
for：生命标签控件标注的是哪个表单控件。它的值与所标注的表单控件的id属性相匹配。

组合表单元素：

<fieldset>：将相关的表单控件置于它中分成一组;
<legend>:  为组合表单提供标题。

HTML5:表单验证

required属性：要求用户必须填写的<input>表单。

HTML5:日期控件

<input>
type=“date"：允许用户提供日期。

HTML5:电子邮件和URL输入

<input>
type=“email"：可以验证用户是否输入了格式正确的电子邮件。
type=“url"：可以验证用户是否输入了格式正确的url地址。

HTML5:搜索输入控件

<input>
type=“search"：会出现一个删除号，删除输入。
placeholder属性：在用户单击文本输入区之前，文本框显示的值。