『HTML系列』表单标签

大家好，欢迎来到IT知识分享网。

---

现实中的表单，类似我们填的单子，如下图：

1、表单有什么用了？

表单目的是为了搜集用户信息。

在我们网页中，我们有时候也需要跟用户进行交互，搜集用户的资料，此时就需要用到表单。

2、表单由哪些组成了

3、表单域 form

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

3.1、基本语法格式

<form method="post"> <label>Name: <input name="submitted-name" autocomplete="name"> </label> <button>Save</button> </form> 

3.2、常见的属性

form 标签支持 HTML 全局属性，除此之外，还支持如下属性：

3.2.1、accept-charset

一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 “UNKNOWN”。此字符串指的是，和包含此表单元素的文档相同的编码。

在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。

3.2.2、autocapitalize

这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下：

3.2.2.1、none

完全禁用自动首字母大写。

3.2.2.2、sentences

自动对每句话首字母大写。

3.2.2.3、words

自动对每个单词首字母大写。

3.2.2.4、characters

自动大写所有的字母。

3.2.3、autocomplete

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：

3.2.3.1、off

浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值）

3.2.3.2、on

浏览器可自动补全条目

3.2.4、name

表单的名称。HTML4 中不推荐（应使用 id）。在 HTML5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

3.2.5、rel

根据 value 创建一个超链接或根据这个值创建一个超链接或注释

关于提交表单的属性

3.2.6、action

处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。

3.2.7、enctype

当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：

3.2.7.1、application/x-www-form-urlencoded

未指定属性时的默认值。

3.2.7.2、multipart/form-data

当表单包含 type=file 的 <input> 元素时使用此值。

3.2.7.3、text/plain

出现于 HTML5，用于调试。

这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formenctype 属性覆盖。

3.2.8、method

浏览器使用这种 HTTP 方式来提交表单。可能的值有：

3.2.8.1、post

指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

3.2.8.2、get

指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用时使用这个方法。

3.2.8.3、dialog

如果表单在 <dialog> 元素中，提交时关闭对话框。

此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formmethod 属性覆盖。

3.2.9、novalidate

此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formnovalidate 属性覆盖。

3.2.10、target

表示在提交表单之后，在哪里显示响应信息。在 HTML4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

3.2.10.1、_self

默认值。在相同浏览上下文中加载。

3.2.10.2、_blank

在新的未命名的浏览上下文中加载。

3.2.10.3、_parent

在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。

3.2.10.4、_top

在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

此值可以被 <button>、 <input type="submit"> 或 <input type="image"> 元素中的 formtarget 属性覆盖。

3.3、总结

1. form 元素的开始标签和结束标签不能省略；

4、input 标签

<input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据和控件小部件，具体取决于设备和 user agent。

4.1、基本语法格式

见1.1

4.2、常见的属性

<input> 标签支持全局 HTML 属性；除此之外，还支持如下属性：

4.2.1、属性 type

下面将介绍上图的这些属性

4.2.2、属性 accept—-H5

如果该元素的 type 属性的值是 file，则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明：

• 以 STOP 字符（U+002E）开始的文件扩展名。（例如：“.jpg，.png，.doc”）；
• 一个有效的 MIME 类型，但没有扩展名；
• audio/* 表示音频文件—-H5；
• video/* 表示视频文件—-H5；
• image/* 表示图片文件—-H5；

4.2.3、属性 autocomplete—-H5

这个属性表示这个控件的值是否可被浏览器自动填充。如果 type 属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是：

• off：用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。
• on：浏览器可以根据用户先前的填表情况对此字段自动填值。
• name：完整的姓名
• honorific-prefix：Prefix or title(e.g.“Mr.”，“Ms.”，“Dr.”，“Mlle”)
• given-name：名
• additional-name
• family-name：姓
• honorific-suffix：Suffix(e.g.“Jr.”，“B.Sc.”，“MBASW”，“II”)
• nickname
• email
• username
• new-password：新密码（如创建帐号或更改密码时使用）
• current-password
• organization-title：Job title(e.g.“Software Engineer”，“Senior Vice President”，“Deputy Managing Director”)
• organization
• street-address
• address-line1，address-line2，address-line3，address-level4，address-level3，address-level2，address-level1
• country
• country-name
• postal-code
• cc-name：Full name as given on the payment instrument
• cc-given-name
• cc-additional-name
• cc-family-name
• cc-number：Code identifying the payment instrument (e.g. the credit card number)
• cc-exp：Expiration date of the payment instrument
• cc-exp-month
• cc-exp-year
• cc-csc：Security code for the payment instrument
• cc-type：Type of payment instrument (e.g. Visa)
• transaction-currency
• transaction-amount
• language：Preferred language；Valid BCP 47 language tag
• bday
• bday-day
• bday-month
• bday-year
• sex：Gender identity (e.g. Female，Fa’afafine)；Free-form text，no newlines
• tel
• url：Home page or other Web page corresponding to the company，person，address，or contact information in the other fields associated with this field
• photo：Photograph，icon，or other image corresponding to the company，person，address，or contact information in the other fields associated with this field

如果 <input> 元素上没有 autocomplete 属性，浏览器可使用包含该 input 元素的表单（<form>）或通过 input 的 form 属性指定的表单的 autocomplete 属性值。

autocomplete 还控制着 Firefox 浏览器对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置 autocomplete 的值为 off 可以关闭该特性。即使 autocomplete 属性通常不应用于 <input> 的type

4.2.4、属性 autofocus—-H5

这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。如果 type 属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。

4.2.5、属性 capture

capture 属性在 HTML Media Capture 规范中引入，并只对 file 类型有效，它定义了在支持场景中，通过文件上传控制应该使用哪个媒体麦克风、视频或摄像机来捕获一个新的文件。

4.2.6、属性 checked

如果该元素的 type 属性的值为 radio 或者 checkbox，则该布尔属性的存在与否表明了该控件是否是默认选择状态。

4.2.7、属性 dirname

仅对 text 和 search 有效，dirname 属性允许提交元素的方向性。当包含时，表单控件将以两个名称/值对提交：第一个是 name 和 value，第二个是 dirname 的值作为名称，浏览器设置 ltr 或 rtl 的值。

4.2.8、属性 disabled

这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中，click 事件将不会被分发。并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。

4.2.9、form

一个字符串指定与输入相关联的 <form> 元素，如果该值存在，必须匹配 <form> 的 id。如果没有指定这个属性，则与最近的被包含的 form 里的 <input> 元素相关联。

4.2.10、formaction

仅对输入类型 image 和 submit 有效。

4.2.11、formenctype

仅对输入类型 image 和 submit 有效。

4.2.12、formmethod

仅对输入类型 image 和 submit 有效。

4.2.13、formnovalidate

仅对输入类型 image 和 submit 有效。

4.2.14、formtarget

仅对输入类型 image 和 submit 有效。

4.2.15、height—-H5

如果 type 属性的值是 image，这个属性定义了按钮图片的高度。

4.2.16、id

全局属性对所有元素有效，包含所有输入类型，它定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的，它的目的是在链接时标识元素。该值用作 <label> for 属性的值，将标签与表单控件 <label> 链接起来。

4.2.17、inputmode

全局属性对所有元素有效，它给浏览器提供了一个提示，提示当编辑这个元素或它的内容时要使用虚拟键盘配置类型。取值包括 none text，tel，url，email，numeric，decimal，and search

4.2.18、list

这个属性的值是位于同一文档中的 <datalist> 元素的 id。这个 <datalist> 提供一个预定义值的列表向用户建议输入。建议选项中不包含不兼容的任何这个 list 的值。提供的值是建议，而不是要求，yoghurt 可以从预定义列表中选择或提供一个不同的值。

它是有效的对于 text，search，url，tel，email，date，month，week，time，datetime-local，number，range and color。

根据规范，hidden，password，checkbox，radio，file 或任何按钮类型都不支持 list 属性。

4.2.19、max—-H5

此项目的最大（数字或日期时间）值，且不得小于其最小值（min 属性）值。

4.2.20、maxlength—-H5

如果 type 的值是 text，email，search，password，tel 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照 Unicode 编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。

4.2.21、min—-H5

此项目的最小（数字或日期时间）值，且不得大于其最大值（最大属性）值。

4.2.22、minlength

如果 type 的值是 text，email，search，password，tel 或 url，那么这个属性指明了用户最少可以输入的字符个数（按照 Unicode 编码方式计数）；这个值必须是一个小于或等于 maxlength 的非负整数值，如果没有该属性值或者指定了一个无效的值，则输入框没有最小长度。

如果输入字段的文本长度小于 minlength UTF-16 代码单元长度，则输入的约束验证将失败，从而阻止表单提交。

4.2.23、属性 multiple—-H5

这个属性指示用户能否输入多个值。这个属性仅在 type 属性为 email 或 file 的时候生效；否则被忽视。

4.2.24、属性 name

控件的名称，与表单数据一起提交。

注：所有的类型 type

4.2.25、属性 pattern—-H5

检查控件值的正则表达式。pattern 必须匹配整个值，而不仅仅是某些子集。使用 title 属性来描述帮助用户的模式。当类型属性的值为 text，search，tel，url 或 email 时，此属性适用，否则将被忽略。

4.2.26、属性 placeholder—-H5

提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当 type 属性为 text，search，tel，url or email 时；否则会被忽略。

请不要用 placeholder 属性替换 <label> 元素。他们的作用不同： <label> 属性描述表单元素的角色；也就是说，它展示预期的信息，而 placeholder 属性是提示用户内容的输入格式。某些情况下 placeholder 属性对用户不可见，所以当没有它时也需要保证 form 能被理解。

4.2.27、readonly—-H5

4.2.28、属性 required—-H5

这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden，image 或者按钮类型（submit，reset，button）时不可使用。

4.2.29、selectionDirection—-H5

选择发生的方向。如果在 LTR 区域设置中从左到右进行选择，则为 forward 选择；如果在 RTL 区域设置中从有到做进行选择，则为 backward 选择，如果选择的方向未知，则该选项可以为 none。

4.2.30、属性 size

控件的初始大小。以像素为单位。但当 type 属性为 text 或 password 时，它表示输入的字符的长度。从 HTML5 开始，此属性仅适用于当 type 属性为 text，search，tel，url，email 或 password；否则会被忽略。此外，它的值必须大于0。如果未指定大小，则使用默认值20。HTML5 概述”用户代理应该确保至少大部分字符是可见的”，但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有 x 的字符即使定义了到 x 的大小也将显示不完整。

4.2.31、spellcheck—-H5

将此属性的值设置为 true 表示元素需要检查其拼写和语法。值 default 表示该元素将根据默认行为进行操作，可能基于父元素自己的 spellcheck 值。值 false 表示不应该检查元素。

4.2.32、src

如果 type 属性的值是 image，这个属性指定了按钮图片的路径；否则它被忽视。

4.2.33、tabindex

元素在当前文档的 Tab 导航顺序中的位置。

4.2.34、title

全局属性对所有元素有效，包括所有输入类型，包含表示与其所属元素相关的建议信息的文本。这些信息通常但不一定可以作为工具提示呈现给用户。title 不应该用来解释表单控件的主要目的。相反，使用 <labe> 元素的 for 属性设置表单控件的 id 属性。

4.2.35、value

控件的初始值。此属性是可选的，除非 type 属性是 radio 或 checkbox。注意，当重新加载页面时，如果在重新加载之前更改了值，Gecko 和 IE 将忽略 HTML 源代码中指定的值。

4.2.36、width—-H5

如果 type 属性的值是 image，这个属性定义了按钮图片的宽度。

4.3、总结

1. input 是一个空元素；
2. input 必须有开始标签但不必有结束标签；

5、label 标签

<label> 元素（标签）表示用户界面中某个元素的说明。

5.1、用途

为了提高用户体验，为用户提供最优秀的服务。用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点。

5.2、如何绑定元素呢？

5.2.1、第一种方法就是用 label 直接包裹 input 表单

<label>Do you like peas? <input type="checkbox" name="peas"> </label> 

5.2.2、第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="peas">Do you like peas?</label> <input type="checkbox" name="peas" id="peas"> 

5.3、常见的属性

label 标签支持 HTML 全局属性；除此之外，还支持如下属性：

5.3.1、属性 for

即和 <label> 元素在同一文档中的可关联标签的元素的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。

注意：<label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素。

5.3.2、form

表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

5.4、总结

1. 不要在 label 元素内部放置可交互的元素，比如 a 或 button；
2. 在一个 <label> 元素内部放置标题元素（heading elements）会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）；
3. 若 <input> 元素声明了 type="button" 和有效的 value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。<button> 元素也一样；
4. label 元素的开始标签和结束标签都不能省略；

6、textarea 标签

<textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

6.1、基本语法格式

<label for="story">Tell us your story:</label> <textarea id="story" name="story" rows="5" cols="33">It was a dark and stormy night...</textarea> 

6.2、常见的属性

textarea 标签支持 HTML 全局属性；除此之外，还支持如下属性：

6.2.1、autocapitalize

iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可能的值为：

• none：禁用首字母大写。
• sentences：句子的首字母大写。
• words：单词或者字母的首字母大写。
• characters：全部字母大写。
• on：自 iOS 5 废弃。
• off：自 iOS 5 废弃。

6.2.2、autocomplete

是否使用浏览器的记忆功能自动填充文本。可能的值有：

• off：不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
• on：浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。

如果不指明 autocomplete 属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是 textarea 元素的父级 <form> 或者 textarea 有跟表单相同的 id。

6.2.3、autofocus

页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

6.2.4、cols

文本域的可视宽度。必须为正数，默认为20（HTML5）。

6.2.5、disabled

禁用文本域。默认为 false。如果未指定，也可以从父级上如 <fieldset> 继承而来。

6.2.6、form

指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

6.2.7、maxlength

允许用户输入的最大字符长度（Unicode）。未指定表示无限长度。

6.2.8、minlength

允许用户输入的最小字符长度（Unicode）。

6.2.9、name

元素的名称。

6.2.10、placeholder

向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符（\r）或换行符（\n）一定会被作为行断（换行）处理。

6.2.11、readonly

不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

6.2.12、required

提示用户这个元素的内容必填。

6.2.13、rows

元素的输入文本的行数（显示的高度）。

6.2.14、spellcheck

该属性设为 true 时，表明该元素会做拼写和语法检查。属性值为 default 时，表明元素有默认行为，可能会基于父元素的 spellcheck 值。属性值为 false 时，表明元素不做拼写和语法检查。

6.2.15、wrap

指定文本换行的方式。默认为 soft。可能的值为：

• hard：在文本到达元素最大宽度的时候，浏览器自动插入换行符（CR+LF）。比如指定 cols 值。
• soft：在到达元素最大宽度的时候，不会自动插入换行符。

6.3、总结

1. textarea 的开始标签和结束标签不能省略；

7、下拉列表 select 标签

<select> 元素表示一个提供选项菜单的控件。

7.1、基本语法格式

<label for="dino-select">Choose a dinosaur:</label> <select id="dino-select"> <optgroup label="Theropods"> <option>Tyrannosaurus</option> <option>Velociraptor</option> <option>Deinonychus</option> </optgroup> <optgroup label="Sauropods"> <option>Diplodocus</option> <option>Saltasaurus</option> <option>Apatosaurus</option> </optgroup> </select> 

7.2、常见的属性

select 标签支持 HTML 全局属性；除此之外，还支持如下属性：

7.2.1、autocomplete

一个 DOMString，为用户代理提供自动填充功能的线索。

7.2.2、autofocus

这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。

7.2.3、disabled

这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 fieldset；如果没有父元素设置了 disabled 属性, 那么默认该表单对象可用。

7.2.4、form

<select> 所关联的 <form>（它的”表单拥有者”）。其值必须是在同一文档中的 <form> 元素的 id（如果没有设置这个属性，<select> 元素则与其任何存在的祖先 <form> 元素关联）。

这个属性让你将 <select> 元素与文档中任意位置的 <form> 元素相关联，而不仅仅是包含 <select> 元素的 <form> 元素。这个属性还可以覆盖元素的祖先 <form> 元素。

7.2.5、属性 multiple

这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。

7.2.6、name

该属性规定了控件的名称。

7.2.7、required—-H5

一个布尔值属性，表示必须选中一个有非空字符串值的选项。

7.2.8、size

如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

根据 HTML5 规范， 默认值应该为 1；

7.3、总结

1. <select> 中至少包含一对 option；
2. 在 option 中定义 selected =” selected” 时，当前项即为默认选中项；
3. select 元素的开始标签和结束标签都不能省略；

7.4、optgroup

<optgroup> 为 <select> 元素中的选项创建分组。

7.4.1、基本语法格式

见7.1

7.4.2、常见的属性

optgroup 包含全局的属性，除此之外，还支持如下的属性：

7.4.2.1、disabled

如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。

7.4.2.2、label

选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

7.4.3、总结

1. 子元素为0或多个 option 元素；
2. 开始标签是必须的。当该元素后面也跟着一个 optgroup 元素，或该元素的父元素没有其他内容时，结束标签可以省略；
3. 父元素为一个 select 元素；

7.5、option

<option> 用于定义在 <select>， <optgroup> 或 <datalist> 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

7.5.1、基本语法格式

见7.1

7.5.2、常见的属性

option 包括全局属性，除此之外，还支持如下属性：

7.5.2.1、disabled

如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 <optgroup> 元素，则这个元素仍然是禁用的。

7.5.2.2、label

这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。

7.5.2.3、selected

这个布尔属性存在时表明这个选项是否一开始就被选中。如果 <option> 元素是 <select> 元素的子元素，并且 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。

7.5.2.4、value

这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

7.5.3、总结

1. 开始标记是必需的。如果此元素紧接着是另一个 <option> 元素或 <optgroup>，或者父元素没有其他内容, 则结束标记是可选的；

8、button

<button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 CSS 来改变按钮的样貌。

8.1、基本语法格式

<button name="button">Click me</button> 

8.2、常见的属性

该元素包含全局属性。

8.2.1、autofocus—-H5

一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。

8.2.2、autocomplete

该属性在 <button> 上的使用并未标准化，只有 Firefox 允许。不像其它浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态（Firefox persists the dynamic disabled state）。将此属性设置为 off（i.e. autocomplete=“off”）关闭此特性。

8.2.3、disabled

此布尔属性表示用户不能与 button 交互。如果属性值未指定，button 继承包含元素，例如 <fieldset>；如果没有设置 disabled 属性的包含元素，button将可交互。

不像其它浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用 autocomplete 属性可控制此特性。

8.2.4、form—-H5

表示 button 元素关联的 form 元素（它的表单拥有者）。此属性值必须为同一文档中的一个 <form> 元素的 id 属性。如果此属性未指定，<button> 元素必须是 form 元素的后代。利用此属性，你可以将 <button> 元素放置在文档内的任何位置，而不仅仅是作为他们 form 元素的后代。

8.2.5、formaction—-H5

表示程序处理 button 提交信息的 URI。如果指定了，将重写 button 表单拥有者的 action 属性。

8.2.6、formenctype—-H5

如果 button 是 submit 类型，此属性值指定提交表单到服务器的内容类型。可选值：

• application/x-www-form-urlencoded：未指定时的默认值。
• multipart/form-data：如果使用 type 属性的 <input> 元素设置文件，使用此值
• text/plain：如果指定此属性，它将重写 button 的表单拥有者的 enctype 属性。

8.2.7、formmethod—-H5

如果 button 是 submit 类型，此属性指定浏览器提交表单使用的 HTTP 方法。可选值：

• post：来自表单的数据被包含在表单内容中，被发送到服务器。
• get：来自表单的数据以’?’作为分隔符被附加到 form 的 URI 属性中，得到的 URI 被发送到服务器。当表单没有副作用，且仅包含 ASCII 字符时使用这种方法。

如果指定了，此属性会重写 button 拥有者的 method 属性。

8.2.8、formnovalidate—-H5

如果 button 是 submit 类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写 button 拥有者的 novalidate 属性。

8.2.9、formtarget—-H5

如果 button 是 submit 类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如 tab，window 或内联框架）的名称或关键字。如果指定了，它会重写 button 拥有者的 target 属性。关键字如下：

• _self：在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
• _blank：在一个新的不知名浏览上下文中加载响应。
• _parent：在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按 _self 执行。
• _top：在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按 _self 执行。

8.2.10、name

button 的名称，与表单数据一起提交。

8.2.11、type

button 的类型。可选值：

• submit：此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
• reset：此按钮重置所有组件为初始值。
• button：此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
• menu：此按钮打开一个由指定 <menu> 元素进行定义的弹出菜单。

8.2.12、value

button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

8.3、总结

1. button 开始标签和结束标签都不能省略；
2. IE7 在使用 <button type="submit" name="myButton" value="foo">Click me</button> 提交表单时存在一个 BUG，POST 提交的数据将是 myButton=Click me 而不是 myButton=foo（没有把 value 属性的值 foo 提交上去）；
3. IE6 的 BUG 更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的 BUG。IE8 已经修复了这个问题；
4. Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用 button::-moz-focus-inner { } 重写这个样式；
5. Firefox 在默认情况下会在页面加载时让 <button> 保持动态禁用状态，这个行为在其它浏览器上是没有的。将 autocomplete 属性设置为 off 可以禁用这项特性；
6. 安卓系统上的 Firefox <35 会为每个按钮设置一个默认的 background-image 渐变背景。这项可以通过 background-image: none 禁用；

9、datalist

<datalist> 元素包含了一组 <option> 元素，这些元素表示其它表单控件可选值。

9.1、基本语法格式

<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist> 

9.2、常见的属性

该元素包含全局属性。

9.3、总结

1. datalist 开始标签和结束标签都不能省略；

10、fieldset

<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。

10.1、基本语法格式

<fieldset disabled> <legend>Disabled fieldset</legend> <div> <label for="name">Name: </label> <input type="text" id="name" value="Chris"> </div> <div> <label for="pwd">Archetype: </label> <input type="password" id="pwd" value="Wookie"> </div> </fieldset> 

10.2、常见的属性

该元素包含全局属性。

10.2.1、disabled

如果设置了这个 bool 值属性，<fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 <form> 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，<legend> 中的表单元素不会被禁用。

10.2.2、form

将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。

10.2.3、name

元素分组的名称。

注意：fieldset 的标题由第一个 <legend> 子元素确定。

10.3、总结

1. fieldset 的开始标签和结束标签都不能省略；

10.4、legend

<legend> 元素用于表示其父元素 <fieldset> 的内容标题。

10.4.1、基本语法格式

见10.1

10.4.2、常见的属性

该元素包含全局属性。

10.4.3、总结

1. legend 的开始标签和结束标签都不能省略；
2. 父元素为 fieldset，并且 legend 作为第一个子元素；

11、meter

<meter> 元素用来显示已知范围的标量值或者分数值。

11.1、基本语法格式

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter></p> 

11.2、常见的属性

该元素包括全局属性。

11.2.1、value

当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。

使用备注：除非值域在0到1（闭区间），否则最小值和最大值属性需要定义，以保证value属性在值域范围内。换言之，默认的 min 和 max 值分别为0和1。

11.2.2、min

值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0。

11.2.3、max

值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1。

11.2.4、low

定义了低值区间的上限值（如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。

11.2.5、high

定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。

11.2.6、optimum

这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。

11.2.7、form

该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

11.3、总结

1. meter 的开始标签和结束标签不能省略；

12、output

<output> 标签表示计算或用户操作的结果。

12.1、基本语法格式

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result"></output> </form> 

12.2、常见的属性

output 包含全局属性。

12.2.1、for

其它影响计算结果的标签的 ID，可以多个。

12.2.2、form

与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。

12.2.3、name

name属性。

12.3、总结

1. output 的开始标签和结束标签都不能省略；

13、progress 进度指示元素

<progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

13.1、基本语法格式

<progress value="70" max="100">70 %</progress> 

13.2、常见的属性

该元素包含全局属性。

13.2.1、max

该属性描述了这个 progress 元素所表示的任务一共需要完成多少工作。

13.2.2、value

该属性用来指定该进度条已完成的工作量。如果没有 value 属性，则该进度条的进度为”不确定”，也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成（比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的）。

13.3、总结

1. progress 的开始标签和结束标签都不能省略；

14、浏览器兼容性

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！