另发表于Levi.Blog和oschina
表单有两个基础组成部分：访问者在页面上可以看到并填写的控件、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。 下面总结了HTML5大部分与表单相关的特性。
输入和元素
| 输入或者元素 | 简略代码 |
|---|---|
| 电子邮件框 | <input type="email"> |
| 搜索框 | <input type="search"> |
| 电话框 | <input type="tel"> |
| URL框 | <input type="url"> |
| 以下元素得到了部分浏览器的支持 | |
| 日期 | <input type="data"> |
| 数字 | <input type="number"> |
| 范围 | <input type="range"> |
| 数据列表 | <input type="text"> name="favfruit" list="fruit"<datalist id="fruit"> <option>Grapes</option> <option>Pears</option> <option>Kiwi</option></datalist> |
| 输入或者元素（下面的输入或者元素得到的支持很少，W3C指出它们在2014年定案之时很可能不会列入HTLM5） | 简略代码 |
|---|---|
| 颜色 | <input type="color" /> |
| 全局日期和时间 | <input type="datatime" /> |
| 局部日期和时间 | <input type="datatime-local" /> |
| 月 | <input type="month" /> |
| 时间 | <input type="time" /> |
| 周 | <input type="week" /> |
| 输出 | <output></output> |
属性
| 属性 | 总结 |
|---|---|
| accept | 限制用户上传文件的类型 |
| autocomplete | 如果对form元素或待定的字段添加autocomplete=”off”，就会关闭浏览器的对该表单或该字段的自动填写功能。默认值为on。 |
| autofocus | 页面加载后将焦点放到该字段 |
| multiple | 允许输入多个电子邮件地址，或者上传多个文件 |
| list | 将datalist与input联系起来 |
| maxlength | 指定textarea的最大字符数（在HTML之前的文本框就支持该特性） |
| pattern | 定义一个用户所输入的文本在提交之前必须遵守的模式 |
| placeholder | 指定一个出现的文本框中的提示文本，用户开始输入后该文本消失 |
| required | 需要访问者在提交表单之前必须完成该字段 |
| formnovalidate | 关闭HTML5的自动验证功能。应用于提交按钮 |
| novalidate | 关闭HTML5的自动验证功能。应用于表单元素 |
每个表单都以form开始标签开始，以form结束标签结束。两个标签之间是是组成表单的说明标签、控件和按钮。每个控件都有一个name属性，用于在提交表单时对数据进行识别。访问者通过你提供的提交按钮提交表单—触发提交按钮时，他们填写的数据就会发送至服务器上处理数据的脚本。
创建表单的步骤
输入<form method="formmethod"，这里的formmethod是get或者post。输入action="script.url">，这里的script.url是提交表单时要运行的脚本在服务器上的位置。创建表单的内容（包括一个提交按钮）。输入</form>以结束表单。method=”get”与method=”post”的区别 form元素的method属性只有get和post两种。 如果对表单使用method="get"，那么表单提交后，表单中的数据会显示在浏览器的地址栏中。通常你希望表单提交后从服务器得到信息，就是用get。 如果对表单使用method="post"，那么提交表单后，表单中的数据不会显示在浏览器的地址的栏中，这样更安全。同时相比get，使用post可以向服务器发送更多的数据。因此，如果需要在数据库中保存、添加和删除数据就应该使用post。通常不确定使用哪种，就是用post，这样不会泄露信息。
表单验证指的是提交表单时，对用户输入的每个字段的内容进行检查，，看是否符合预期的格式。必须考虑将服务器端的验证加入表单处理脚本。
如果表单有很多内容需要填写，可以使用fieldset元素将相关元素组合在一起，使表单更容易理解。还可以使用legend元素为每个fieldset提供一个标题（caption），用于描述每个组的目的。
对表单元素进行组织的步骤
在form开始标签的下面、任何希望包含在第一个组的表单元素的上面，输入<fieldset>。如果需要，输入<legend>。（如果需要包含legend，它必须是fieldset里的第一个元素。）输入标签的文本。输入</legend>以完成标签。如果不使用legend，则创建一个标题从而可以识别属于该fieldset的一组控件。创建属于第一组的表单元素。输入</fieldset>结束第一组表单元素。为每一组表单元素重复第1步至第7步。文本框可以包含一行无格式的文本，它可以是访问者想输入的任何内容，通常用于姓名、地址等信息。
创建文本框的步骤
如果需要，输入用于让访问者识别文本框的标签，例如<lable for="idlable">Last Name:</lable>，其中idlable匹配第4步中的标签。输入<input type="text"。输入name="datatime"，这里的datatime是用于让服务器（和脚本）识别输入数据的文本。如果在第1步中创建了lable，输入id="idlable"，这里的idlable跟第1步中for属性的文本一样。这跟具有显示文本框的lable元素关联。很多程序员将id和name设为同一值。如果需要，输入value="default"，这里的default是字段中最初现实的数据，如果访问者没有输入别的内容的话，这一数据将被发送至服务器。如果需要，输入placeholder="hinttext"，这里的hinttext是这个字段中最初显示的数据，用于指导用户的输入，当input元素获得焦点时，这些文本将会消失，让用户输入内容。如果需要，输入required="required"，表示仅在这个字段有值的情况下才能提交表单。如果需要，输入autofocus或autofocus="autofocus"。如果这是第一个拥有此属性的表单控件，input元素在页面加载时会默认获得焦点。如果需要，通过输入size="n"定义文本框的大小，这里的n是需要设置的文本框的宽度，以字符为单位。也可以通过CSS设置输入框的宽度。如果需要，输入maxlength="n"，这里的n是该文本框允许输入的最大字符数。最后，输入>或/>，结束文本框。 注：默认情况下，大多数浏览器保存用户输入的文本，这样就可以在日后节省用户输入的时间。可以通过对input添加autocomplete="off"来关闭这一特性。这对于要求输入敏感信息（如信用卡）的字段来说很有用。如果将它用于form元素（<form method="post" action="PRocess.php" autocomplete="off">），那么其中的每个字段都会这样。
标签（lable）是描述表单字段用途的文本。lable元素有一个特殊的属性for，如果for的值与一个表单字段的id的值相同，该lable就与该字段显示地关联起来了。
为表单组件添加正式标签
输入<lable。如果需要，输入for="idlable">，这里的idlable是对应表单元素的id属性值。输入标签的内容。输入</lable>。如果创建的是表单元素，确保包括id属性，对应于第2步中指定的for属性。 注：for、id和name属性都可以拥有任意值，只要没有空格。还可以将一个表单字段放在一个包含标签文本的lable内，例如<lable>First Name: <input type="text" name="first_name" /></lable>。这种情况下就不需要使用for和id了。
密码框与文本框的唯一区别是密码框中输入的文本会使用圆点或星号进行隐藏。使用type=”passWord”创建密码框，而不要使用type=”text”。
...<p class="row"> <label for="password">Password:</label> <input type="password" id="password" name="password" /></p><p class="row"> <label for="password2">Re-enter Password:</label> <input type="password" id="password2" name="password2" /></p>...创建密码框的步骤
输入用于让访问者识别密码框的标签。输入<input type="password"。输入id="idlable"，这里的idlable跟第1步中lable的for属性值一样。输入name="dataname"，这里的datatime是用于让服务器识别输入数据的文本。通过输入size="n"定义密码框的大小，这里的n是需要设置的密码框宽度，以字符为单位。如果需要，输入maxlength="n"，这里的n是该密码框允许输入的最大字符数。如果需要，输入required或者required="required"。如果需要，输入autofocus或者autofocus="autofocus"。输入>或/>，结束密码框。 合适的type属性值分别制定电子邮件框和电话框等。pattern属性用于定制的验证规则。
创建电子邮件框、搜索框、电话框和URL框的步骤
输入用于让访问者识别输入框的标签。对于电子邮件框，输入<input type="email">；对于搜索框，输入<input type="search">；对于电话框，输入<input type="tel">；对于URL框，输入<input type="url">。输入id="idlable"，这里的idlable跟第1步中lable的for属性相同。输入name="dataname"，这里的dataname是用于让服务器识别输入数据的文本。如果需要，输入value="default"，这里的default是最初显示在字段里的数据，也是访问者什么都不输入时将要发送给服务器的数据。如果需要，输入placeholder="hinttext"，这里的hinttext是最初显示在字段里作为对用户输入内容的提示的数据。如果需要，输入required或者required="required"。如果需要，输入autofocus或者autofocus="autofocus"。如果需要，通过输入size="n"定义框的大小，这里的n是需要设置的框的宽度，以字符为单位。也可以用CSS设置宽度。如果需要，输入maxlength="n"，这里的n是该框允许输入的最大字符数。最后，输入>或/>，结束输入框。创建单选按钮的步骤
如果需要，输入单选按钮的介绍文本。例如可以使用“选择下列现象中的一个”。输入<input type="radio"。输入name="radioset"，这里的radioset用于识别发送至服务器的数据，同时用于将多个单选按钮联系在一起，确保同一组中最多只有一个被选中。输入id="idlable"，这里的idlable对应在第8步中创建的for属性值。跟name值不同（同一组单选按钮的name值都是相同的），同一页面中每个元素的id必须是唯一的。输入value="data"，这里的data是该单选按钮被选中时要发送给服务器的文本。如果需要，输入checked或者checked="checked"让该单选项按钮在页面打开时默认处于激活状态。在一组单选按钮中，只能对一个按钮添加这一属性。输入>或者/>。输入<lable for="idlable">radio lable</lable>，其中idlable与第4步中单选按钮的id值相同，radio lable则用于让访问者识别该单选按钮。radio lable的值通常与value的值相同，但这并不是必须的。对同一组内的所有单选按钮，重复第2步至第8步。创建复选框的步骤
如果需要，输入复选框的介绍文本。输入<input type="checkbox"。输入name="boxset"，这里的boxset用于识别发送至服务器的数据，同时用于将多个复选框联系在一起（对所有的复选框使用同一个name值）。输入id="idlable"，这里的idlable对应于第8步中lable的for属性值。输入value="data"，这里的data是该复选框被选中时要发送给服务器的文本。输入checked或checked="checked"让该复选框在页面打开时默认处于选中状态，建站者或访问者可能会勾选默认的选项。输入>或/>以结束复选框。输入<lable for="idlable">checkbox lable</lable>，其中idlable与第4步复选框元素中的id值相同，checkbox lable则用于让访问者识别该复选框。对同一组内的所有复选框，重复第2步至第8步。创建文本区域的步骤
如果需要，输入用于标识文本区域的解释性文字。输入<textarea。输入id="idlable"，这里的idlable跟第1步中lable的for属性值相同。输入name="dataname"，这里的dataname是用于让服务器（和脚本）识别输入数据的文本。如果需要，输入maxlength="n"，这里的n是可以输入的最大字符数。输入cols="n"，这里的n是文本区域的宽度（以字符为单位）。输入rows="n"，这里的n是文本区域的高度（以行为单位）。输入>。输入文本区域的默认文本（如果有的话），这些文本会显示在文本区域中。输入</textarea>以完成文本区域。<select。输入id="idlable"，这里的idlable跟第1步中lable的for属性值一样。输入name="dataname"，这里的dataname用于在收集的数据发送至服务器时对数据进行识别。如果需要，输入size="n"，这里的n代表选择框的高度（以行为单位）。如果需要，输入multiple或者multiple="multiple"，从而允许访问者选择一个以上的菜单选项。输入>。输入<option。输入value="optiondata"，这里的optiondata是选项选中后要发送给服务器的数据。如果需要，输入selested或者selected="selected"，指定该选项默认被选中。输入>。输入希望出现在菜单中的选项名称。输入</option>。对每个选项重复第8步至第13步。输入</selected>。option元素之前输入<optgroup。输入lable="submenutitle">，这里的submenutitle是子菜单的标题。在该组的最后一个option元素之后输入</option>。对每个子菜单重复第2步至第4步。<form method="post" enctype="multipart/form-data"。enctype属性可以正确保存文件采用正确的格式上传。接下来，输入action="upload.url">，其中的upload.url是处理上传文件的脚本的URL。为上传文件区域输入标签。以方便访问者知道上传什么文件。输入<input type="file"，创建一个文件上传框和一个Browse（浏览）按钮。输入id="idlable"，这里的idlable跟第3步中lable的for属性值相同。输入name="dataname"，这里的dataname用于识别将要上传的文件。如果需要，输入size="n"，这里的n是访问者可以输入路径和文件名的字段的宽度。如果需要，输入multiple或者multiple="multiple"，这表示访问者可以上传一个以上的文件。输入>或/>。结束表单，包括创建提交按钮，输入</form>结束标签。 <form method="post" action="show-data.php" enctype="multipart/form-data"> ... <label for="picture">Picture:</label> <input type="file" id="picture" name="picture" /> <p class="instructions">Maximum size of 700k. JPG, GIF or PNG.</p> ... </form>什么时候使用隐藏字段：假设有一个表单，希望让访问者在提交表单之前有机会检查他们输入的内容。处理表单的脚本可以向访问者显示提交的数据，同时创建一个表单，其中有包含同样数据的隐藏字段。如果访问者希编辑数据，他们只需后退即可，如果他们想提交表单，由于隐藏字段已经将数据填写好了，因此他们不需要再次输入数据了。隐藏字段出现在表单标记中的位置不重要，因为他们在浏览器中不可见。但是注意不要将敏感信息放入其中，因为查看html源代码可以看见这些信息。
创建隐藏字段的步骤
输入<input type="hidden"。输入name="dataname"，这里的dataname确定要提交给服务器的信息。输入value="data"，这里的data是要提交的信息本身。通常是表单处理脚本中的一个变量。输入>或/>。 要创建访问者可见但是不可修改的表单元素有两种方法。一种是使用disabled（禁用）属性。另一种是readonly（只读）属性。与禁用字段不同，只读字段可以获得焦点，访问者可以选择和复制里面的文本但不能修改这些文本，它只能应用于文本输入框和文本区域，例如，<input type="text" id="coupon" name="coupon" value="FREE" readonly="readonly" />。还可以使用readonly="readonly"这样的形式，结果是一样的。
<input type="submit"。如果需要，输入value="submit message"，这里的submit message是将要出现在按钮上的文本。最后输入>或者/>。<input type="submit" value="Create Profile" class="btn" /><input type="iamge"。输入scr="image.url"，其中的image.url是图像在服务器上的位置。输入alt="description"，这里的description是当图像无法显示时需要出现的文本。输入>或/>以结束图像提交按钮。<input type="image" scr="button-submit.png" width="188" height="95" alt="Create Profile" /><button type="submit" class="xxx">，其中class类可选，xxx为你所要指定的类的名称。输入将要出现在按钮中图像左侧的文本（如果有的话）。输入<img src="image.url"，这里的image.url是出现在按钮上的图像的名称。输入alt="alternate text"，这里的alternate text是当图像无法显示时需要出现的文本。如果需要，添加其他图像属性。输入>或/>以结束图像。输入将要出现在图像右侧的文本（如果有的话）。输入</button>。<button type="submit" class="btn"> <img src="check.png" width="188" height="95" alt=" " />Create Profile</button> 如果有多个提交按钮，可以为每个按钮设置name属性和value属性，从而让脚本知道用户按下的是哪个按钮。否则最好省略name属性。 可以使用submit元素创建不包含图像的提交按钮。任何时候，如果你的表单需要一个以上的提交按钮，就应避免使用button元素，因为针对这种情况，不同浏览器的行为并不完全一致。 表单还可以有重置按钮，用于将表单数据还原为页面加载时（在访问者填写表单之前）的样子。创建重置按钮可以使用<input type="reset" />或<button type="reset">Reset</button>。我们也可以为重置按钮添加样式。 HTML5对type="email"和type="URL"的input添加自动验证功能。对提交按钮使用formnovalidate属性可以关闭该功能，如<input type="submit" formnovalidate />。
某些情况下，可能不想让访问者使用表单中的某些部分。例如，可能希望在所有必填字段完成之前禁用提交按钮。禁用表单元素的值不会发送到服务器。 在表单元素的开始标签后输入disabled或者disabled="disabled"。
CSS提供了一些根据表单元素状态设置其样式的伪类。其中大多数是CSS3新增的。下面是一些得到浏览器广泛支持的伪类。
| 选择器 | 应用 |
|---|---|
| :focus | 获得焦点的字段 |
| :checked | 选中的单选按钮或复选框 |
| :disabled | 具有disabled属性的字段 |
| :enable | 与:disabled相反 |
| :required | 具有required属性的字段 |
| :optional | 与:required相反 |
| :invalid | 其值于pattern属性给出的模式不匹配的字段；或者值不是有效的电子邮件格式的电子邮件框，值不是有效URL格式的URL框，以及任何标记为required但值为空的字段。 |
| :valid | 与:invalid相反 |
一些例程
input:focus,textarea:focus { background-color: greenyellow;}input:checked + lable { color: green;}textarea:disabled { background-color: #ccc; border-color: #999; color: #666;}input:required,textarea:required { border: 2px solid #000;}针对特定状态设置表单元素样式的步骤
输入selector，这里的selector包含本文上边选择器表中显示的一种或多种状态，接着输入 { 开始样式规则声明。输入你想为该状态设置的任何property: value;声明。输入 } 结束样式规则的声明。HTML and CSS 读书笔记
本文为本人原创，采用 知识共享 “署名-非商业性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”许可协议 进行许可。 本作品可自由复制、传播及基于本作品进行演绎创作。如有以上需要，请通过E-mail等方式告知，并在文章开头明显位置加上署名 [ 丁学文.Blog ] 、原文链接及许可协议信息，并明确指出修改（如有），不得用于商业用途。谢谢合作。 详情请点击查看许可协议及版权声明具体内容。
博主联系方式： E-mail： xuewending1995@Gmail.com [ 请注明来意 ] GitHub： Levi.GitHub
新闻热点
疑难解答
