HTML(5)：表单
2016-06-10 19:58
597 查看
此文章中的表单包含了HTML4和HTML5的所有标签和标签属性。
1、HTML <form> 标签
<form> 标签属性：
（1）、accept：HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
（2）、accept-charset ：规定服务器可处理的表单数据字符集。
（3）、action：规定当提交表单时向何处发送表单数据。
（4）、autocomplete ：规定是否启用表单的自动完成功能。值为：on、off
（5）、enctype：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）。值为：application/x-www-form-urlencoded、multipart/form-data、text/plain
（6）、method： 规定用于发送表单数据的 HTTP 方法。值为：get、post
（7）、name ：规定表单的名称。
（8）、novalidate：如果使用该属性，则提交表单时不进行验证。
（9）、target：规定在何处打开 action URL。值为：_blank、_self、_parent、_top 。
2、HTML <input> 标签
<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。注意：<input> 元素是空的,它只包含标签属性。提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。
<input> 标签属性：
（1）、accept：规定通过文件上传来提交的文件的类型。 (只针对type="file")值为：audio/* video/* image/* MIME_type
（2）、align：HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")。值为： left 、right、top、middle、bottom
（3）、alt ：定义图像输入的替代文本。 (只针对type="image")
（4）、autocomplete：属性规定 <input> 元素输入字段是否应该启用自动完成功能。值为：on、off
（5）、autofocus：属性规定当页面加载时 <input> 元素应该自动获得焦点。
（6）、checked：属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
（7）、disabled：属性规定应该禁用的 <input> 元素。
（8）、form：属性规定 <input> 元素所属的一个或多个表单。
（9）、formaction属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
（10）、formenctype：属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。值为：application/x-www-form-urlencoded、multipart/form-data、text/plain。
（11）、formmethod：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")。值为：get、post。
（12）、formnovalidate：属性覆盖 <form> 元素的 novalidate 属性。
（13）、formtarget ：规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")。值为：_blank、 _self、 _parent 、_top、 framename。
（14）、height：规定 <input>元素的高度。(只针对type="image")。
（15）、list：属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
（16）、max：属性规定 <input> 元素的最大值。
（17）、maxlength：属性规定 <input> 元素中允许的最大字符数。
（18）、minNew：属性规定 <input>元素的最小值。
（19）、multiple：属性规定允许用户输入到 <input> 元素的多个值。
（20）、name：属性规定 <input> 元素的名称。
（21）、pattern：属性规定用于验证 <input> 元素的值的正则表达式。
（22）、placeholder：属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
（23）、readonly：属性规定输入字段是只读的。
（24）、required：属性规定必需在提交表单之前填写输入字段。
（25）、size：属性规定以字符数计的 <input> 元素的可见宽度。
（26）、src：属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
（27）、step：属性规定 <input> 元素的合法数字间隔。
（28）、type：属性规定要显示的 <input> 元素的类型。值为：button 、checkbox 、color 、date 、datetime 、datetime-local 、email 、file 、hidden 、image 、month 、number 、password 、radio 、range 、reset 、search 、submit 、tel 、text 、time 、url
、week 。
（29）、value：指定 <input> 元素 value 的值。
（30）、width：属性规定 <input> 元素的宽度。 (只针对type="image")
3、HTML <textarea> 标签
<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea> 标签属性：
（1）、autofocus：规定当页面加载时，文本区域自动获得焦点。
（2）、cols：规定文本区域内可见的列数。
（3）、disabled：规定禁用文本区域。
（4）、form：定义文本区域所属的一个或多个表单。
（5）、maxlength：规定文本区域允许的最大字符数。
（6）、name： 规定文本区域的名称。
（7）、placeholder：规定一个简短的提示，描述文本区域期望的输入值。
（8）、readonly：规定文本区域为只读。
（9）、required：规定文本区域是必需的/必填的。
（10）、rows：规定文本区域内可见的行数。
（11）、wrapNew ：规定当提交表单时，文本区域中的文本应该怎样换行。值为：hard、soft。
4、HTML <label> 标签
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for"
属性的值设置为相关元素的 id 属性的值。
<label> 标签属性：
for ：规定 label 与哪个表单元素绑定。
form：规定 label 字段所属的一个或多个表单。
5、HTML <fieldset> 标签
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<fieldset> 标签的属性：
disabled：规定该组中的相关表单元素应该被禁用。
form：规定 fieldset 所属的一个或多个表单。
name：规定 fieldset 的名称。
The <legend> 元素为 <fieldset>元素定义标题
6、HTML <optgroup> 标签
<optgroup> 标签经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。
<optgroup> 标签属性：
disabled：规定禁用该选项组、
label：为选项组规定描述。
7、HTML <button> 标签
<button> 标签定义一个按钮。在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
<button> 标签属性：
（1）、autofocus：规定当页面加载时按钮应当自动地获得焦点。
（2）、disabled ：规定应该禁用该按钮。
（3）、form：规定按钮属于一个或多个表单。
（4）、formaction：规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
（5）、formenctype ：规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。值为application/x-www-form-urlencoded、multipart/form-data、text/plain。
（6）、formmethod：规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。值为：get、post。
（7）、formnovalidate：如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
（8）、formtarget：规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。值为：_blank、_self、_parent、_top。
（9）、name ：规定按钮的名称。
（10）、type ：规定按钮的类型。值为：button、reset、submit
（11）、value：规定按钮的初始值。可由脚本进行修改。
8、HTML <datalist> 标签
<datalist> 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
9、HTML <keygen> 标签
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<keygen> 标签属性：
autofocus：使 <keygen> 字段在页面加载时获得焦点。
challenge：如果使用，则将 keygen 的值设置为在提交时询问。
disabled：禁用 <keygen> 元素字段。
formNew：<keygen> 字段所属的一个或多个表单。
keytype：定义密钥的安全算法。值为：rsa、dsa、ec
name：定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。
10、HTML <output> 标签
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
<output> 标签属性：
for：描述计算中使用的元素与计算结果之间的关系。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称（表单提交时使用）。
1、HTML <form> 标签
<form> 标签属性：
（1）、accept：HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
（2）、accept-charset ：规定服务器可处理的表单数据字符集。
（3）、action：规定当提交表单时向何处发送表单数据。
（4）、autocomplete ：规定是否启用表单的自动完成功能。值为：on、off
（5）、enctype：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）。值为：application/x-www-form-urlencoded、multipart/form-data、text/plain
（6）、method： 规定用于发送表单数据的 HTTP 方法。值为：get、post
（7）、name ：规定表单的名称。
（8）、novalidate：如果使用该属性，则提交表单时不进行验证。
（9）、target：规定在何处打开 action URL。值为：_blank、_self、_parent、_top 。
2、HTML <input> 标签
<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。注意：<input> 元素是空的,它只包含标签属性。提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。
<input> 标签属性：
（1）、accept：规定通过文件上传来提交的文件的类型。 (只针对type="file")值为：audio/* video/* image/* MIME_type
（2）、align：HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")。值为： left 、right、top、middle、bottom
（3）、alt ：定义图像输入的替代文本。 (只针对type="image")
（4）、autocomplete：属性规定 <input> 元素输入字段是否应该启用自动完成功能。值为：on、off
（5）、autofocus：属性规定当页面加载时 <input> 元素应该自动获得焦点。
（6）、checked：属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
（7）、disabled：属性规定应该禁用的 <input> 元素。
（8）、form：属性规定 <input> 元素所属的一个或多个表单。
（9）、formaction属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
（10）、formenctype：属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。值为：application/x-www-form-urlencoded、multipart/form-data、text/plain。
（11）、formmethod：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")。值为：get、post。
（12）、formnovalidate：属性覆盖 <form> 元素的 novalidate 属性。
（13）、formtarget ：规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")。值为：_blank、 _self、 _parent 、_top、 framename。
（14）、height：规定 <input>元素的高度。(只针对type="image")。
（15）、list：属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
（16）、max：属性规定 <input> 元素的最大值。
（17）、maxlength：属性规定 <input> 元素中允许的最大字符数。
（18）、minNew：属性规定 <input>元素的最小值。
（19）、multiple：属性规定允许用户输入到 <input> 元素的多个值。
（20）、name：属性规定 <input> 元素的名称。
（21）、pattern：属性规定用于验证 <input> 元素的值的正则表达式。
（22）、placeholder：属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
（23）、readonly：属性规定输入字段是只读的。
（24）、required：属性规定必需在提交表单之前填写输入字段。
（25）、size：属性规定以字符数计的 <input> 元素的可见宽度。
（26）、src：属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
（27）、step：属性规定 <input> 元素的合法数字间隔。
（28）、type：属性规定要显示的 <input> 元素的类型。值为：button 、checkbox 、color 、date 、datetime 、datetime-local 、email 、file 、hidden 、image 、month 、number 、password 、radio 、range 、reset 、search 、submit 、tel 、text 、time 、url
、week 。
（29）、value：指定 <input> 元素 value 的值。
（30）、width：属性规定 <input> 元素的宽度。 (只针对type="image")
3、HTML <textarea> 标签
<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea> 标签属性：
（1）、autofocus：规定当页面加载时，文本区域自动获得焦点。
（2）、cols：规定文本区域内可见的列数。
（3）、disabled：规定禁用文本区域。
（4）、form：定义文本区域所属的一个或多个表单。
（5）、maxlength：规定文本区域允许的最大字符数。
（6）、name： 规定文本区域的名称。
（7）、placeholder：规定一个简短的提示，描述文本区域期望的输入值。
（8）、readonly：规定文本区域为只读。
（9）、required：规定文本区域是必需的/必填的。
（10）、rows：规定文本区域内可见的行数。
（11）、wrapNew ：规定当提交表单时，文本区域中的文本应该怎样换行。值为：hard、soft。
4、HTML <label> 标签
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for"
属性的值设置为相关元素的 id 属性的值。
<label> 标签属性：
for ：规定 label 与哪个表单元素绑定。
form：规定 label 字段所属的一个或多个表单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <form action="demo_form.phpp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
5、HTML <fieldset> 标签
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<fieldset> 标签的属性：
disabled：规定该组中的相关表单元素应该被禁用。
form：规定 fieldset 所属的一个或多个表单。
name：规定 fieldset 的名称。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> </body> </html>
The <legend> 元素为 <fieldset>元素定义标题
6、HTML <optgroup> 标签
<optgroup> 标签经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。
<optgroup> 标签属性：
disabled：规定禁用该选项组、
label：为选项组规定描述。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </body> </html>
7、HTML <button> 标签
<button> 标签定义一个按钮。在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
<button> 标签属性：
（1）、autofocus：规定当页面加载时按钮应当自动地获得焦点。
（2）、disabled ：规定应该禁用该按钮。
（3）、form：规定按钮属于一个或多个表单。
（4）、formaction：规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
（5）、formenctype ：规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。值为application/x-www-form-urlencoded、multipart/form-data、text/plain。
（6）、formmethod：规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。值为：get、post。
（7）、formnovalidate：如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
（8）、formtarget：规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。值为：_blank、_self、_parent、_top。
（9）、name ：规定按钮的名称。
（10）、type ：规定按钮的类型。值为：button、reset、submit
（11）、value：规定按钮的初始值。可由脚本进行修改。
8、HTML <datalist> 标签
<datalist> 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </body> </html>
9、HTML <keygen> 标签
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<keygen> 标签属性：
autofocus：使 <keygen> 字段在页面加载时获得焦点。
challenge：如果使用，则将 keygen 的值设置为在提交时询问。
disabled：禁用 <keygen> 元素字段。
formNew：<keygen> 字段所属的一个或多个表单。
keytype：定义密钥的安全算法。值为：rsa、dsa、ec
name：定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <form action="demo_keygen.php" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p> </body> </html>
10、HTML <output> 标签
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
<output> 标签属性：
for：描述计算中使用的元素与计算结果之间的关系。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称（表单提交时使用）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML表单</title> </head> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html之 rel="external nofollow"
- form表单和ajax表单提交（Html.BeginForm()、Ajax.BeginForm()）的差别
- 菜鸟碎碎念之html学习笔记
- HTML页面为什么设置了UTF-8仍然中文乱码
- HTML页面为什么设置了UTF-8仍然中文乱码
- html中插入视频音频
- HTML <!--...--> 注释标签的深层次作用分析
- XML 与 HTML
- 【HTML】小练习，复习巩固
- 静态的html页面想要设置使用浏览器缓存
- html插入图片后在网页显示不出来
- HTML元素的宽度计算
- HTML页面的布局
- Html中的form对象
- 【HTML笔记五】与浏览者交互，表单标签
- 【HTML笔记四】认识标签三
- 【HTML笔记三】认识标签二
- 【HTML笔记二】认识标签一
- html弹出浮动层
- <!DOCTYPE html>很重要