HTML 表单

前言

  • 表单用于收集不同类型的用户输入。
标签 描述 备注 🔗
<form> </form> 定义一个 HTML 表单,用于用户输入 🔗
<input /> 定义一个输入控件 🔗
<textarea> </textarea> 定义多行的文本输入控件 🔗
<button> </button> 定义按钮 🔗
<select> </select> 定义选择列表(下拉列表) 🔗
<optgroup> </optgroup> 定义选择列表中相关选项的组合 🔗
<option> </option> 定义选择列表中的选项 🔗
<label> </label> 定义 input 元素的标注 🔗
<fieldset> </fieldset> 定义了一组相关的表单元素,并使用外框包含起来 🔗
<legend> </legend> 定义了 <fieldset> 元素的标题 🔗
<datalist> </datalist> 规定了 input 元素可能的选项列表 H5 新加 🔗
<keygen /> 规定用于表单的密钥对生成器字段 H5 新加 🔗
<output> </output> 定义一个计算的结果 H5 新加 🔗
  • 表单是一个包含表单元素的区域。

  • 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框、复选框(checkboxes)等等。

1、语法

  • 表单使用表单标签 <form> 来设置。

    1
    2
    3
    4
    5
    <form>
    .
    input 元素
    .
    </form>

2、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <form action="">
    First name: <input type="text" name="firstname" /> <br />
    Last name: <input type="text" name="lastname" /> <br />
    Password: <input type="password" name="password" />
    </form>
    </body>

    </html>
  • 效果

3、HTML5 新加元素

标签 描述 备注 🔗
<datalist> </datalist> 规定了 input 元素可能的选项列表,来定义 input 可能的值 H5 新加 🔗
<keygen /> 规定用于表单的密钥对生成器字段 H5 新加 🔗
<output> </output> 定义不同类型的输出,比如脚本的输出 H5 新加 🔗
  • 注意:不是所有的浏览器都支持 HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。

3.1 HTML5 < datalist > 元素

  • <datalist> 元素规定输入域的选项列表。

  • <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

  • 使用 <input> 元素的列表属性与 <datalist> 元素绑定。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form>
    <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>
    </form>
  • 效果






  • 浏览器支持

元素
<datalist> 支持 支持 支持 不支持 支持
  • Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。

3.2 HTML5 < keygen > 元素

  • <keygen> 元素的作用是提供一种验证用户的可靠方法。

  • <keygen> 标签规定用于表单的密钥对生成器字段。

  • 当提交表单时,会生成两个键,一个是私钥,一个公钥。

  • 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

  • 实例

    1
    2
    3
    4
    <form>
    用户名: <input type="text" name="usr_name" />
    加密: <keygen name="security" />
    </form>
  • 效果


    用户名:
    加密:
  • 浏览器支持

元素
<keygen> 支持 不支持 支持 支持 支持
  • Internet Explorer 不支持 keygen 标签。

3.3 HTML5 < output > 元素

  • <output> 元素用于不同类型的输出,比如计算或脚本输出。

  • 实例

    1
    2
    3
    4
    5
    <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>
  • 效果

    0
    100
    +
    =
  • 浏览器支持

元素
<output> 支持 不支持 支持 支持 支持
  • Edge 12 及更早 IE 版本的浏览器不支持 output 元素。

4、属性

4.1 < form > 标签属性

属性 描述 备注 🔗
accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的) 🔗
accept-charset character_set 规定服务器可处理的表单数据字符集 🔗
action URL 规定当提交表单时向何处发送表单数据 🔗
autocomplete on
off
规定是否启用表单的自动完成功能 H5 新加 🔗
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method=”post” 的情况) 🔗
method get
post
规定用于发送表单数据的 HTTP 方法 🔗
name text 规定表单的名称 🔗
novalidate novalidate 如果使用该属性,则提交表单时不进行验证 H5 新加 🔗
target _blank
_self
_parent
_top
规定在何处打开 action URL 🔗

4.2 < input > 标签属性

属性 描述 备注 🔗
accept audio/
video/

image/*
MIME_type
规定通过文件上传来提交的文件的类型。 (只针对 type=”file”) 🔗
align left
right
top
middle
bottom
HTML5 已废弃。不赞成使用。规定图像输入的对齐方式。 (只针对 type=”image”) 🔗
alt text 定义图像输入的替代文本。 (只针对 type=”image”) 🔗
autocomplete on
off
autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能 H5 新加 🔗
autofocus autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点 H5 新加 🔗
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=”checkbox” 或者 type=”radio”) 🔗
disabled disabled disabled 属性规定应该禁用的 <input> 元素 🔗
form form_id form 属性规定 <input> 元素所属的一个或多个表单 H5 新加 🔗
formaction URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”) H5 新加 🔗
formenctype application/x-www-form-urlencoded
multipart/form-data text/plain
属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”) H5 新加 🔗
formmethod get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”) H5 新加 🔗
formnovalidate formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性 H5 新加 🔗
formtarget _blank
_self
_parent
_top
framename
规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”) H5 新加 🔗
height pixels 规定 <input> 元素的高度。(只针对 type=”image”) H5 新加 🔗
list datalist_id 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项 H5 新加 🔗
max number
date
属性规定 <input> 元素的最大值 H5 新加 🔗
maxlength number 属性规定 <input> 元素中允许的最大字符数 🔗
min number
date
属性规定 <input>元素的最小值 H5 新加 🔗
multiple multiple 属性规定允许用户输入到 <input> 元素的多个值 H5 新加 🔗
name text name 属性规定 <input> 元素的名称 🔗
pattern regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式 H5 新加 🔗
placeholder text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 H5 新加 🔗
readonly readonly readonly 属性规定输入字段是只读的 🔗
required required 属性规定必需在提交表单之前填写输入字段 H5 新加 🔗
size number size 属性规定以字符数计的 <input> 元素的可见宽度 🔗
src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=”image”) 🔗
step number step 属性规定 <input> 元素的合法数字间隔 H5 新加 🔗
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type 属性规定要显示的 <input> 元素的类型 🔗
value text 指定 <input> 元素 value 的值 🔗
width pixels width 属性规定 <input> 元素的宽度。 (只针对 type=”image”) H5 新加 🔗

4.3 < textarea > 标签属性

属性 描述 备注 🔗
autofocus autofocus 规定当页面加载时,文本区域自动获得焦点 H5 新加 🔗
cols number 规定文本区域内可见的宽度 🔗
disabled disabled 规定禁用文本区域 🔗
form form_id 定义文本区域所属的一个或多个表单 H5 新加 🔗
maxlength number 规定文本区域允许的最大字符数 H5 新加 🔗
name text 规定文本区域的名称 🔗
placeholder text 规定一个简短的提示,描述文本区域期望的输入值 H5 新加 🔗
readonly readonly 规定文本区域为只读 🔗
required required 规定文本区域是必需的/必填的 H5 新加 🔗
rows number 规定文本区域内可见的行数 🔗
wrap hard
soft
规定当提交表单时,文本区域中的文本应该怎样换行 H5 新加 🔗

4.4 < button > 标签属性

属性 描述 备注 🔗
autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点 H5 新加 🔗
disabled disabled 规定应该禁用该按钮 🔗
form form_id 规定按钮属于一个或多个表单 H5 新加 🔗
formaction URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=”submit” 配合使用 H5 新加 🔗
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 配合使用 H5 新加 🔗
formmethod get
post
规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=”submit” 配合使用 H5 新加 🔗
formnovalidate formnovalidate 如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=”submit” 配合使用 H5 新加 🔗
formtarget _blank
_self
_parent
_top
framename
规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=”submit” 配合使用 H5 新加 🔗
name name 规定按钮的名称 🔗
type button
reset
submit
规定按钮的类型 🔗
value text 规定按钮的初始值。可由脚本进行修改 🔗

4.5 < select > 标签属性

属性 描述 备注 🔗
autofocus autofocus 规定在页面加载时下拉列表自动获得焦点 H5 新加 🔗
disabled disabled 当该属性为 true 时,会禁用下拉列表 🔗
form form_id 定义 select 字段所属的一个或多个表单 H5 新加 🔗
multiple multiple 当该属性为 true 时,可选择多个选项 🔗
name text 定义下拉列表的名称 🔗
required required 规定用户在提交表单前必须选择一个下拉列表中的选项 H5 新加 🔗
size number 规定下拉列表中可见选项的数目 🔗

4.6 < optgroup > 标签属性

属性 描述 备注 🔗
disabled disabled 规定禁用该选项组 🔗
label text 为选项组规定描述 🔗

4.7 < option > 标签属性

属性 描述 备注 🔗
disabled disabled 规定此选项应在首次加载时被禁用 🔗
label text 定义当使用 <optgroup> 时所使用的标注 🔗
selected selected 规定选项(在首次显示在列表中时)表现为选中状态 🔗
value text 定义送往服务器的选项值 🔗

4.8 < label > 标签属性

属性 描述 备注 🔗
for element_id 规定 label 与哪个表单元素绑定 🔗
form form_id 规定 label 字段所属的一个或多个表单 H5 新加 🔗

4.9 < fieldset > 标签属性

属性 描述 备注 🔗
disabled disabled 规定该组中的相关表单元素应该被禁用 H5 新加 🔗
form form_id 规定 fieldset 所属的一个或多个表单 H5 新加 🔗
name text 规定 fieldset 的名称 H5 新加 🔗

4.10 < legend > 标签属性

属性 描述 备注 🔗
align top
bottom
left
right
HTML5 不支持HTML 4.01 已废弃。不建议使用。 请使用样式代替。 为 fieldset 中的标题定义对齐方式 🔗

4.11 < datalist > 标签属性

4.12 < keygen > 标签属性

属性 描述 备注 🔗
autofocus autofocus 使 <keygen> 字段在页面加载时获得焦点 H5 新加 🔗
challenge challenge 如果使用,则将 keygen 的值设置为在提交时询问 H5 新加 🔗
disabled disabled 禁用 <keygen> 元素字段 H5 新加 🔗
form form_id 定义该 <keygen> 字段所属的一个或多个表单 H5 新加 🔗
keytype rsa
dsa
ec
定义密钥的安全算法 H5 新加 🔗
name name 定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值 H5 新加 🔗

4.13 < output > 标签属性

属性 描述 备注 🔗
for element_id 描述计算中使用的元素与计算结果之间的关系 H5 新加 🔗
form form_id 定义输入字段所属的一个或多个表单 H5 新加 🔗
name name 定义对象的唯一名称(表单提交时使用) H5 新加 🔗

5、表单属性解析

属性 描述 备注 🔗
autocomplete on
off
规定是否启用表单的自动完成功能 H5 新加 🔗
novalidate novalidate 如果使用该属性,则提交表单时不进行验证 H5 新加 🔗

5.1 autocomplete 属性

  • autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

  • 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

  • 提示: autocomplete 属性有可能在 form 元素中是开启的,而在 input 元素中是关闭的。

  • 注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

  • 实例

    1
    2
    3
    4
    5
    6
    <form action="demo-form.php" autocomplete="on">
    First name:<input type="text" name="fname" /> <br />
    Last name: <input type="text" name="lname" /> <br />
    E-mail: <input type="email" name="email" autocomplete="off" /> <br />
    <input type="submit" />
    </form>
  • 效果


    First name:
    Last name:
    E-mail:

  • 解析

    • 填写并提交表单,然后重新刷新页面查看如何自动填充内容。
    • 注意 form 的 autocomplete 属性为 “on”(开),但是 e-mail 自动为“off”(关)。
  • 浏览器支持

属性
autocomplete 支持 支持 支持 支持 不支持
  • 某些浏览器中,可能需要启用自动完成功能,以使该属性生效。

5.2 novalidate 属性

  • novalidate 属性是一个 boolean(布尔) 属性.

  • novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

  • 实例

    1
    2
    3
    4
    <form action="demo-form.php" novalidate>  <!-- 无需验证提交的表单数据 -->
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
    </form>
  • 效果


    E-mail:

  • 浏览器支持

属性
novalidate 支持 支持 支持 不支持 支持
  • 在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

6、输入元素 input

  • 多数情况下被用到的表单标签是输入标签。
标签 描述 备注 🔗
<input /> 定义一个输入控件 🔗
<label> </label> 定义了 <input /> 元素的标签,一般为输入标题 🔗
  • 注意:表单本身是不可见的,并且一个文本字段的默认宽度是 20 个字符

6.1 input 属性解析

属性 描述 备注 🔗
accept audio/
video/

image/*
MIME_type
规定通过文件上传来提交的文件的类型。 (只针对 type=”file”) 🔗
align left
right
top
middle
bottom
HTML5 已废弃。不赞成使用。规定图像输入的对齐方式。 (只针对 type=”image”) 🔗
alt text 定义图像输入的替代文本。 (只针对 type=”image”) 🔗
autocomplete on
off
autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能 H5 新加 🔗
autofocus autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点 H5 新加 🔗
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=”checkbox” 或者 type=”radio”) 🔗
disabled disabled disabled 属性规定应该禁用的 <input> 元素 🔗
form form_id form 属性规定 <input> 元素所属的一个或多个表单 H5 新加 🔗
formaction URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”) H5 新加 🔗
formenctype application/x-www-form-urlencoded
multipart/form-data text/plain
属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”) H5 新加 🔗
formmethod get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”) H5 新加 🔗
formnovalidate formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性 H5 新加 🔗
formtarget _blank
_self
_parent
_top
framename
规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”) H5 新加 🔗
height pixels 规定 <input> 元素的高度。(只针对 type=”image”) H5 新加 🔗
list datalist_id 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项 H5 新加 🔗
max number
date
属性规定 <input> 元素的最大值 H5 新加 🔗
maxlength number 属性规定 <input> 元素中允许的最大字符数 🔗
min number
date
属性规定 <input>元素的最小值 H5 新加 🔗
multiple multiple 属性规定允许用户输入到 <input> 元素的多个值 H5 新加 🔗
name text name 属性规定 <input> 元素的名称 🔗
pattern regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式 H5 新加 🔗
placeholder text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 H5 新加 🔗
readonly readonly readonly 属性规定输入字段是只读的 🔗
required required 属性规定必需在提交表单之前填写输入字段 H5 新加 🔗
size number size 属性规定以字符数计的 <input> 元素的可见宽度 🔗
src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=”image”) 🔗
step number step 属性规定 <input> 元素的合法数字间隔 H5 新加 🔗
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type 属性规定要显示的 <input> 元素的类型 🔗
value text 指定 <input> 元素 value 的值 🔗
width pixels width 属性规定 <input> 元素的宽度。 (只针对 type=”image”) H5 新加 🔗

6.1.1 autofocus 属性

  • autofocus 属性是一个 boolean 属性.

  • autofocus 属性规定在页面加载时,域自动地获得焦点。

  • 实例

    1
    2
    3
    4
    5
    <form action="demo-form.php">
    First name: <input type="text" name="fname" autofocus /> <br /> <!-- 让 "First name" input 输入域在页面载入时自动聚焦 -->
    Last name: <input type="text" name="lname" /> <br />
    <input type="submit" />
    </form>
  • 效果


    First name:
    Last name:

  • 浏览器支持

属性
autofocus 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 autofocus 属性。

6.1.2 form 属性

  • form 属性规定输入域所属的一个或多个表单。

  • 如需引用一个以上的表单,请使用空格分隔的列表。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname" /> <br />
    <input type="submit" value="提交" />
    </form>

    <!-- 位于 form 表单外的 input 字段引用了 HTML form (该 input 表单仍然属于 form 表单的一部分) -->
    Last name: <input type="text" name="lname" form="form1" />
  • 效果


    First name:

    Last name:

  • 浏览器支持

属性
form 支持 不支持 支持 支持 支持
  • IE 不支持 form 属性。

6.1.3 formaction 属性

  • formaction 属性用于描述表单提交的 URL 地址。

  • formaction 属性会覆盖 <form> 元素中的 action 属性。

  • 注意: formaction 属性用于 type=”submit” 和 type=”image”。

  • 实例

    1
    2
    3
    4
    5
    6
    <form action="demo-form.php">  <!-- form 表单包含了两个不同地址的提交按钮 -->
    Username: <input type="text" name="fname" /> <br />
    Password: <input type="password" name="lname" /> <br /><br />
    <input type="submit" value="用户登录" />
    <input type="submit" formaction="demo-admin.php" value="管理员登录" />
    </form>
  • 效果


    Username:
    Password:


  • 浏览器支持

属性
formaction 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 formaction 属性。

6.1.4 formenctype 属性

  • formenctype 属性描述了表单提交到服务器的数据编码 (只对 form 表单中 method=”post” 表单)

  • formenctype 属性覆盖 form 元素的 enctype 属性。

  • 主要: 该属性与 type=”submit” 和 type=”image” 配合使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <form action="demo-post-enctype.php" method="post">
    First name: <input type="text" name="fname" /> <br /><br />

    <!-- 第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据 -->
    <input type="submit" value="提交" />
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />
    </form>
  • 效果


    First name:


  • 浏览器支持

属性
formenctype 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 formenctype 属性。

6.1.5 formmethod 属性

  • formmethod 属性定义了表单提交的方式。

  • formmethod 属性覆盖了 <form> 元素的 method 属性。

  • 注意: 该属性可以与 type=”submit” 和 type=”image” 配合使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <form action="demo-form.php" method="get">
    First name: <input type="text" name="fname" /> <br />
    Last name: <input type="text" name="lname" /> <br /><br />

    <!-- 重新定义表单提交方式 -->
    <input type="submit" value="提交" />
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />
    </form>
  • 效果


    First name:
    Last name:


  • 浏览器支持

属性
formmethod 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 formmethod 属性。

6.1.6 formnovalidate 属性

  • novalidate 属性是一个 boolean 属性.

  • novalidate 属性描述了 <input> 元素在表单提交时无需被验证。

  • formnovalidate 属性会覆盖 <form> 元素的 novalidate 属性.

  • 注意: formnovalidate 属性与 type=”submit 一起使用

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <form action="demo-form.php">
    E-mail: <input type="email" name="userid" /> <br /><br />

    <!-- 两个提交按钮的表单(使用与不适用验证) -->
    <input type="submit" value="提交" /> <br />
    <input type="submit" formnovalidate="formnovalidate" value="不验证提交" />
    </form>
  • 效果


    E-mail:


  • 浏览器支持

属性
formnovalidate 支持 支持 支持 不支持 支持
  • Internet Explorer 9 及更早 IE 版本, 或 Safari 不支持 input 标签的 formnovalidate 属性。

6.1.7 formtarget 属性

  • formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

  • formtarget 属性覆盖 <form> 元素的 target 属性。

  • 注意: formtarget 属性与 type=”submit” 和 type=”image” 配合使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <form action="demo-form.php">
    First name: <input type="text" name="fname" /> <br />
    Last name: <input type="text" name="lname" /> <br /><br />

    <!-- 两个提交按钮的表单, 在不同窗口中显示 -->
    <input type="submit" value="正常提交" />
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上" />
    </form>
  • 效果


    First name:
    Last name:


  • 浏览器支持

属性
formtarget 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 formtarget 属性。

6.1.8 height 和 width 属性

  • height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

  • 注意: height 和 width 属性只适用于 image 类型的 <input> 标签。

  • 提示: 图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间在加载页时会被保留。如果没有这些属性,浏览器不知道图像的大小,并不能预留适当的空间。图片在加载过程中会使页面布局效果改变(尽管图片已加载)。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <form action="demo-form.php">
    First name: <input type="text" name="fname" /> <br />
    Last name: <input type="text" name="lname" /> <br /><br />

    <!-- 定义了一个图像提交按钮, 使用了 height 和 width 属性 -->
    <input type="image" src="https://www.runoob.com/try/demo_source/img_submit.gif" alt="Submit" width="48" height="48" />
    </form>
  • 效果


    First name:
    Last name:

  • 浏览器支持

属性
heightwidth 支持 支持 支持 支持 支持

6.1.9 list 属性

  • list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form action="demo-form.php" method="get">
    <input list="browsers" name="browser" />
    <datalist id="browsers"> <!-- 在 <datalist> 中预定义 <input> 值 -->
    <option value="Internet Explorer" />
    <option value="Firefox" />
    <option value="Chrome" />
    <option value="Opera" />
    <option value="Safari" />
    </datalist>
    <input type="submit" />
    </form>
  • 效果






  • 浏览器支持

属性
list 支持 支持 支持 不支持 支持
  • Internet Explorer 9(更早 IE 版本),Safari 不支持 list 标签。

6.1.10 min 和 max 属性

  • min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

  • 注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <form action="demo-form.php">
    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31" /> <br />

    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02" /> <br />

    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5" /> <br /><br />

    <input type="submit" />
    </form>
  • 效果


    输入 1980-01-01 之前的日期:

    输入 2000-01-01 之后的日期:

    数量 (在1和5之间):


  • 浏览器支持

属性
maxmin 支持 支持 不支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。
  • 在 Internet Explorer 10 中 max 和 min 属性不支持输入日期和时间,IE 10 不支持这些输入类型。

6.1.11 multiple 属性

  • multiple 属性是一个 boolean 属性.

  • multiple 属性规定 <input> 元素中可选择多个值。

  • 注意: multiple 属性适用于以下类型的 <input> 标签:email 和 file

  • 实例

    1
    2
    3
    4
    <form action="demo-form.php">     <!-- 上传多个文件 -->
    选择一张或者多张图片: <input type="file" name="img" multiple /> <br /><br />
    <input type="submit" />
    </form>
  • 效果


    选择一张或者多张图片:

  • 浏览器支持

属性
multiple 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 multiple 属性。

6.1.12 pattern 属性

  • pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

  • 注意: pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。

  • 实例

    1
    2
    3
    4
    <form action="demo-form.php">    <!-- 显示了一个只能包含三个字母的文本域(不含数字及特殊字符)-->
    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
    <input type="submit" />
    </form>
  • 效果


    Country code:

  • 浏览器支持

属性
pattern 支持 支持 支持 不支持 支持
  • Internet Explorer 9 及更早 IE 版本,或 Safari 不支持 input 标签的 pattern 属性。

6.1.13 placeholder 属性

  • placeholder 属性提供一种提示(hint),描述输入域所期待的值。

  • 简短的提示在用户输入值前会显示在输入域上。

  • 注意: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

  • 实例

    1
    2
    3
    4
    5
    <form action="demo-form.php">
    <input type="text" name="fname" placeholder="First name" /> <br />
    <input type="text" name="lname" placeholder="Last name" /> <br /><br />
    <input type="submit" value="提交" />
    </form>
  • 效果





  • 浏览器支持

属性
placeholder 支持 支持 支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持 input 标签的 placeholder 属性。

6.1.14 required 属性

  • required 属性是一个 boolean 属性.

  • required 属性规定必须在提交之前填写输入域(不能为空)。

  • 注意: required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

  • 实例

    1
    2
    3
    4
    <form action="demo-form.php">
    Username: <input type="text" name="usrname" required /> <!-- 不能为空的 input 字段 -->
    <input type="submit" />
    </form>
  • 效果


    Username:

  • 浏览器支持

属性
required 支持 支持 支持 不支持 支持
  • Internet Explorer 9 及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。

6.1.15 step 属性

  • step 属性为输入域规定合法的数字间隔。

  • 如果 step=”3”,则合法的数是 -3,0,3,6 等

  • 提示:step 属性可以与 max 和 min 属性创建一个区域值.

  • 注意:step 属性与以下 type 类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

  • 实例

    1
    2
    3
    4
    <form action="demo-form.php">
    <input type="number" name="points" step="3" /> <!-- 规定 input step 步长为 3 -->
    <input type="submit" />
    </form>
  • 效果




  • 浏览器支持

属性
step 支持 支持 不支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本,或 Firefox 不支持 input 标签的 step 属性。

6.2 input 类型

  • 输入类型是由类型属性(type)定义的。
描述 备注
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)
checkbox 定义复选框
color 定义拾色器 H5 新加
date 定义 date 控件(包括年、月、日,不包括时间) H5 新加
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区) H5 新加
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区) H5 新加
email 定义用于 e-mail 地址的字段 H5 新加
file 定义文件选择字段和 “浏览…” 按钮,供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
month 定义 month 和 year 控件(不带时区) H5 新加
number 定义用于输入数字的字段 H5 新加
password 定义密码字段(字段中的字符会被遮蔽)
radio 定义单选按钮
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件) H5 新加
reset 定义重置按钮(重置所有的表单值为默认值)
search 定义用于输入搜索字符串的文本字段 H5 新加
submit 定义提交按钮
tel 定义用于输入电话号码的字段 H5 新加
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)
time 定义用于输入时间的控件(不带时区) H5 新加
url 定义用于输入 URL 的字段 H5 新加
week 定义 week 和 year 控件(不带时区) H5 新加
  • HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
  • 注意:并不是所有的主流浏览器都支持新的 input 类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

6.2.1 文本输入域

  • 文本输入域通过标签 <input type="text" /> 定义,当用户要在表单中键入字母、数字等内容时,就会用到文本输入域。
描述 备注
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)
  • 实例

    1
    2
    3
    4
    <form>
    First name: <input type="text" name="firstname" /> <br />
    Last name: <input type="text" name="lastname" />
    </form>
  • 效果

6.2.2 密码字段

  • 密码字段通过标签 <input type="password" /> 来定义,密码字段字符不会明文显示,而是以星号或圆点替代。
描述 备注
password 定义密码字段(字段中的字符会被遮蔽)
  • 实例

    1
    2
    3
    <form>
    Password: <input type="password" name="pwd" />
    </form>
  • 效果

6.2.3 单选框

  • 单选框选项通过标签 <input type="radio" /> 来定义,当用户点击一个单选按钮时,它就会被选中,其他同名的单选按钮就不会被选中。
描述 备注
radio 定义单选按钮
属性 描述 备注 🔗
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素,
默认不选中任何值。 (只针对 type=”checkbox” 或者 type=”radio”)
🔗
  • 实例

    1
    2
    3
    4
    <form>
    <input type="radio" name="sex" value="male" /> Male <br />
    <input type="radio" name="sex" value="female" /> Female
    </form>
  • 效果

6.2.4 复选框

  • 复选框选项通过标签 <input type="checkbox" /> 来定义,用户需要从若干给定的选择中选取一个或若干选项。
描述 备注
checkbox 定义复选框
属性 描述 备注 🔗
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素,
默认不选中任何值。 (只针对 type=”checkbox” 或者 type=”radio”)
🔗
  • 实例

    1
    2
    3
    4
    <form>
    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br />
    <input type="checkbox" name="vehicle" value="Car" /> I have a car
    </form>
  • 效果

6.2.5 按钮

  • 按钮通过标签 <input type="button" /> 来定义。
描述 备注
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)
  • 实例

    1
    2
    3
    <form action="">
    <input type="button" value="Hello world!" />
    </form>
  • 效果

6.2.6 提交按钮

  • 提交按钮通过标签 <input type="submit" /> 来定义。
描述 备注
submit 定义提交按钮
  • 当用户单击提交按钮时,表单的内容会被传送到另一个文件。
  • 表单的动作属性定义了目的文件的文件名,由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

  • 实例

    1
    2
    3
    4
    5
    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user" />

    <input type="submit" value="Submit" />
    </form>
  • 效果

  • 假如在上面的文本框内键入几个字母,然后点击提交按钮,那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

6.2.7 重置按钮

  • 提交按钮通过标签 <input type="reset" /> 来定义。
描述 备注
reset 定义重置按钮(重置所有的表单值为默认值)
  • 当用户单击重置按钮时,表单输入框中的内容会被清空。

  • 实例

    1
    2
    3
    4
    5
    <form action="">
    Username: <input type="text" name="user" />

    <input type="reset" value="Reset" />
    </form>
  • 效果

6.2.8 选取颜色

  • 选取颜色通过标签 <input type="color" /> 来定义。
描述 备注
color 定义拾色器 H5 新加
  • 实例

    1
    2
    3
    <form>
    选择你喜欢的颜色: <input type="color" name="favcolor" />
    </form>
  • 效果

    选择你喜欢的颜色:

  • 浏览器支持

color 支持 不支持 不支持 不支持 支持

6.2.9 从日期选择器选择日期

  • 从日期选择器选择日期通过标签 <input type="date" /> 来定义。
描述 备注
date 定义 date 控件(包括年、月、日,不包括时间) H5 新加
  • 实例

    1
    2
    3
    <form>
    生日: <input type="date" name="bday" />
    </form>
  • 效果

    生日:

  • 浏览器支持

date 支持 不支持 不支持 支持 支持

6.2.10 选择 UTC 日期时间

  • 选择 UTC 日期时间通过标签 <input type="datetime" /> 来定义。
描述 备注
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区) H5 新加
  • 实例

    1
    2
    3
    <form>
    生日 (日期和时间): <input type="datetime" name="bdaytime" />
    </form>
  • 效果

    生日 (日期和时间):

  • 浏览器支持

datetime 不支持 不支持 不支持 支持 支持

6.2.11 选择无时区日期时间

  • 选择无时区日期时间通过标签 <input type="datetime-local" /> 来定义。
描述 备注
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区) H5 新加
  • 实例

    1
    2
    3
    <form>
    生日 (日期和时间): <input type="datetime-local" name="bdaytime" />
    </form>
  • 效果

    生日 (日期和时间):

  • 浏览器支持

datetime-local 支持 不支持 不支持 支持 支持

6.2.12 选择月份

  • 选择月份通过标签 <input type="month" /> 来定义。
描述 备注
month 定义 month 和 year 控件(不带时区) H5 新加
  • 实例

    1
    2
    3
    <form>
    生日 (月和年): <input type="month" name="bdaymonth" />
    </form>
  • 效果

    生日 (月和年):

  • 浏览器支持

month 支持 不支持 不支持 支持 支持

6.2.13 选择时间

  • 选择时间通过标签 <input type="time" /> 来定义。
描述 备注
time 定义用于输入时间的控件(不带时区) H5 新加
  • 实例

    1
    2
    3
    <form>
    选择时间: <input type="time" name="usr_time" />
    </form>
  • 效果

    选择时间:

  • 浏览器支持

time 支持 不支持 不支持 支持 支持

6.2.14 选择周和年

  • 选择周和年通过标签 <input type="week" /> 来定义。
描述 备注
week 定义 week 和 year 控件(不带时区) H5 新加
  • 实例

    1
    2
    3
    <form>
    选择周: <input type="week" name="week_year" />
    </form>
  • 效果

    选择周:

  • 浏览器支持

week 支持 不支持 不支持 支持 支持

6.2.15 email 输入

  • email 输入通过标签 <input type="email" /> 来定义。
描述 备注
email 定义用于 e-mail 地址的字段 H5 新加
  • 在提交表单时,会自动验证 email 域的值是否合法有效。

  • 实例

    1
    2
    3
    <form>
    E-mail: <input type="email" name="email" />
    </form>
  • 效果

    E-mail:

  • 浏览器支持

email 支持 支持 支持 不支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持。
  • iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。

6.2.16 数值 输入

  • 数值输入通过标签 <input type="number" /> 来定义。
描述 备注
number 定义用于输入数字的字段 H5 新加
  • 使用下面的属性来规定对数字类型的限定:
属性 描述 备注 🔗
disabled disabled disabled 属性规定应该禁用的 <input> 元素 🔗
max number
date
属性规定 <input> 元素的最大值 H5 新加 🔗
maxlength number 属性规定 <input> 元素中允许的最大字符数 🔗
min number
date
属性规定 <input>元素的最小值 H5 新加 🔗
pattern regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式 H5 新加 🔗
readonly readonly readonly 属性规定输入字段是只读的 🔗
required required 属性规定必需在提交表单之前填写输入字段 H5 新加 🔗
size number size 属性规定以字符数计的 <input> 元素的可见宽度 🔗
step number step 属性规定 <input> 元素的合法数字间隔 H5 新加 🔗
value text 指定 <input> 元素 value 的值 🔗
  • 实例

    1
    2
    3
    <form>
    数量(1 到 5 之间):<input type="number" name="quantity" min="1" max="5" />
    </form>
  • 效果

    数量(1 到 5 之间):

  • 浏览器支持

number 支持 支持 不支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持。

6.2.17 电话号码 输入

  • 电话号码通过标签 <input type="tel" /> 来定义。
描述 备注
tel 定义用于输入电话号码的字段 H5 新加
  • 实例

    1
    2
    3
    <form>
    电话号码: <input type="tel" name="usrtel" />
    </form>
  • 效果

    电话号码:

  • 浏览器支持

tel 不支持 不支持 不支持 不支持 不支持

6.2.18 URL 输入

  • URL 输入通过标签 <input type="url" /> 来定义。
描述 备注
url 定义用于输入 URL 的字段 H5 新加
  • 在提交表单时,会自动验证 url 域的值。

  • 实例

    1
    2
    3
    <form>
    添加您的主页: <input type="url" name="homepage" />
    </form>
  • 效果

    添加您的主页:

  • 浏览器支持

url 支持 支持 支持 不支持 支持
  • Internet Explorer 9及更早 IE 版本不支持。
  • iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。

6.2.19 滑动条

  • 滑动条通过标签 <input type="range" /> 来定义。
描述 备注
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件) H5 新加
  • 使用下面的属性来规定对数字类型的限定:
属性 描述 备注 🔗
max number
date
属性规定 <input> 元素的最大值 H5 新加 🔗
min number
date
属性规定 <input>元素的最小值 H5 新加 🔗
step number step 属性规定 <input> 元素的合法数字间隔 H5 新加 🔗
value text 指定 <input> 元素 value 的值 🔗
  • 实例

    1
    2
    3
    <form>
    Points: <input type="range" name="points" min="1" max="10" />
    </form>
  • 效果

    Points:

  • 浏览器支持

range 支持 支持 不支持 支持 支持
  • Internet Explorer 9 及更早 IE 版本不支持。

6.2.20 搜索

  • 搜索通过标签 <input type="search" /> 来定义。
描述 备注
search 定义用于输入搜索字符串的文本字段 H5 新加
  • 实例

    1
    2
    3
    <form>
    Search Google: <input type="search" name="googlesearch" />
    </form>
  • 效果

    Search Google:

  • 浏览器支持

search 支持 不支持 不支持 支持 不支持

7、文本域 textarea

  • 用户可在文本域中写入文本,可写入字符的字数不受限制。
标签 描述 备注 🔗
<textarea> </textarea> 定义多行的文本输入控件 🔗
  • 实例

    1
    2
    3
    <form>
    <textarea rows="10" cols="30"> 我是一个文本框 </textarea>
    </form>
  • 效果

7.1 textarea 属性解析

属性 描述 备注 🔗
autofocus autofocus 规定当页面加载时,文本区域自动获得焦点 H5 新加 🔗
cols number 规定文本区域内可见的宽度 🔗
disabled disabled 规定禁用文本区域 🔗
form form_id 定义文本区域所属的一个或多个表单 H5 新加 🔗
maxlength number 规定文本区域允许的最大字符数 H5 新加 🔗
name text 规定文本区域的名称 🔗
placeholder text 规定一个简短的提示,描述文本区域期望的输入值 H5 新加 🔗
readonly readonly 规定文本区域为只读 🔗
required required 规定文本区域是必需的/必填的 H5 新加 🔗
rows number 规定文本区域内可见的行数 🔗
wrap hard
soft
规定当提交表单时,文本区域中的文本应该怎样换行 H5 新加 🔗

8、下拉列表 select

  • 下拉列表框是一个可选列表。
标签 描述 备注 🔗
<select> </select> 定义选择列表(下拉列表) 🔗
<optgroup> </optgroup> 定义选择列表中相关选项的组合 🔗
<option> </option> 定义选择列表中的选项 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <form action="">
    <select name="cars">
    <option value="volvo" selected="selected"> Volvo </option>
    <option value="saab"> Saab </option>
    <option value="fiat"> Fiat </option>
    <option value="audi"> Audi </option>
    </select>
    </form>
  • 效果

8.1 select 属性解析

属性 描述 备注 🔗
autofocus autofocus 规定在页面加载时下拉列表自动获得焦点 H5 新加 🔗
disabled disabled 当该属性为 true 时,会禁用下拉列表 🔗
form form_id 定义 select 字段所属的一个或多个表单 H5 新加 🔗
multiple multiple 当该属性为 true 时,可选择多个选项 🔗
name text 定义下拉列表的名称 🔗
required required 规定用户在提交表单前必须选择一个下拉列表中的选项 H5 新加 🔗
size number 规定下拉列表中可见选项的数目 🔗

8.2 optgroup 属性解析

属性 描述 备注 🔗
disabled disabled 规定禁用该选项组 🔗
label text 为选项组规定描述 🔗

8.3 option 属性解析

属性 描述 备注 🔗
disabled disabled 规定此选项应在首次加载时被禁用 🔗
label text 定义当使用 <optgroup> 时所使用的标注 🔗
selected selected 规定选项(在首次显示在列表中时)表现为选中状态 🔗
value text 定义送往服务器的选项值 🔗

9、表单实例

9.1 带边框的表单

标签 描述 备注 🔗
<fieldset> </fieldset> 定义了一组相关的表单元素,并使用外框包含起来 🔗
<legend> </legend> 定义了 <fieldset> 元素的标题 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <form>
    <fieldset>
    <legend> Personal information: </legend>
    Name: <input type="text" size="30" /> <br />
    E-mail: <input type="text" size="30" /> <br />
    Date birth: <input type="text" size="28" />
    </fieldset>
    </form>
  • 效果

9.2 带有输入框和提交按钮的表单

  • 实例

    1
    2
    3
    4
    5
    <form action="demo-form.php" method="get">
    First name: <input type="text" name="FirstName" value="Mickey" /> <br />
    Last name: <input type="text" name="LastName" value="Mouse" /> <br />
    <input type="submit" value="提交" />
    </form>
  • 点击“提交”按钮,表单数据将被发送到服务器上的 “demo-form.php”。

  • 效果

9.3 从表单发送电子邮件

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <h3>发送邮件到 someone@example.com:</h3>

    <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name: <br />
    <input type="text" name="name" /> <br /><br />

    E-mail: <br />
    <input type="text" name="mail" /> <br /><br />

    Comment: <br />
    <textarea name="comment" rows="5" cols="30"></textarea> <br /><br />

    <input type="submit" value="发送" />
    <input type="reset" value="重置" />
    </form>
  • 效果

      

10、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、实例
  4. 4. 3、HTML5 新加元素
    1. 4.1. 3.1 HTML5 < datalist > 元素
    2. 4.2. 3.2 HTML5 < keygen > 元素
    3. 4.3. 3.3 HTML5 < output > 元素
  5. 5. 4、属性
    1. 5.1. 4.1 < form > 标签属性
    2. 5.2. 4.2 < input > 标签属性
    3. 5.3. 4.3 < textarea > 标签属性
    4. 5.4. 4.4 < button > 标签属性
    5. 5.5. 4.5 < select > 标签属性
    6. 5.6. 4.6 < optgroup > 标签属性
    7. 5.7. 4.7 < option > 标签属性
    8. 5.8. 4.8 < label > 标签属性
    9. 5.9. 4.9 < fieldset > 标签属性
    10. 5.10. 4.10 < legend > 标签属性
    11. 5.11. 4.11 < datalist > 标签属性
    12. 5.12. 4.12 < keygen > 标签属性
    13. 5.13. 4.13 < output > 标签属性
  6. 6. 5、表单属性解析
    1. 6.1. 5.1 autocomplete 属性
    2. 6.2. 5.2 novalidate 属性
  7. 7. 6、输入元素 input
    1. 7.1. 6.1 input 属性解析
      1. 7.1.1. 6.1.1 autofocus 属性
      2. 7.1.2. 6.1.2 form 属性
      3. 7.1.3. 6.1.3 formaction 属性
      4. 7.1.4. 6.1.4 formenctype 属性
      5. 7.1.5. 6.1.5 formmethod 属性
      6. 7.1.6. 6.1.6 formnovalidate 属性
      7. 7.1.7. 6.1.7 formtarget 属性
      8. 7.1.8. 6.1.8 height 和 width 属性
      9. 7.1.9. 6.1.9 list 属性
      10. 7.1.10. 6.1.10 min 和 max 属性
      11. 7.1.11. 6.1.11 multiple 属性
      12. 7.1.12. 6.1.12 pattern 属性
      13. 7.1.13. 6.1.13 placeholder 属性
      14. 7.1.14. 6.1.14 required 属性
      15. 7.1.15. 6.1.15 step 属性
    2. 7.2. 6.2 input 类型
      1. 7.2.1. 6.2.1 文本输入域
      2. 7.2.2. 6.2.2 密码字段
      3. 7.2.3. 6.2.3 单选框
      4. 7.2.4. 6.2.4 复选框
      5. 7.2.5. 6.2.5 按钮
      6. 7.2.6. 6.2.6 提交按钮
      7. 7.2.7. 6.2.7 重置按钮
      8. 7.2.8. 6.2.8 选取颜色
      9. 7.2.9. 6.2.9 从日期选择器选择日期
      10. 7.2.10. 6.2.10 选择 UTC 日期时间
      11. 7.2.11. 6.2.11 选择无时区日期时间
      12. 7.2.12. 6.2.12 选择月份
      13. 7.2.13. 6.2.13 选择时间
      14. 7.2.14. 6.2.14 选择周和年
      15. 7.2.15. 6.2.15 email 输入
      16. 7.2.16. 6.2.16 数值 输入
      17. 7.2.17. 6.2.17 电话号码 输入
      18. 7.2.18. 6.2.18 URL 输入
      19. 7.2.19. 6.2.19 滑动条
      20. 7.2.20. 6.2.20 搜索
  8. 8. 7、文本域 textarea
    1. 8.1. 7.1 textarea 属性解析
  9. 9. 8、下拉列表 select
    1. 9.1. 8.1 select 属性解析
    2. 9.2. 8.2 optgroup 属性解析
    3. 9.3. 8.3 option 属性解析
  10. 10. 9、表单实例
    1. 10.1. 9.1 带边框的表单
    2. 10.2. 9.2 带有输入框和提交按钮的表单
    3. 10.3. 9.3 从表单发送电子邮件
  11. 11. 10、HTML 实例
隐藏目录