表单 在 HTML5 中

HTML 元素，允许您构建交互式表单

分享此页面

新！ 我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃

立即获取 →

# button

定义一个可点击的按钮。

示例: 复制

<button>
  Submit form
</button>

name

在表单内定义按钮的唯一标识符。它允许服务器在提交时访问每个按钮的值。

"submit_button"

name 值在 <form> 容器的范围内必须是唯一的。

它只能包含字母数字字符 a-z A-Z 0-9 和一些特殊字符，如 - _… 但不能有空格。

value

提交表单时发送到服务器的值。

"primary"

服务器将接收值 primary。

type

定义按钮类型。

"submit"

按钮将表单数据发送到服务器。

"reset"

按钮重置表单。

disabled

禁用按钮。

不需要值。

autofocus

在网页加载时将焦点设置到元素上。

不需要值。

# fieldset

在表单内定义一个控件组。

示例: 复制

Subscribe to the Newsletter 
<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

disabled

禁用 fieldset 包含的控件。

不需要值。

# form

定义带有控件的交互式表单。

示例: 复制








<form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Phone number</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Password</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Country</label><br>
    <select>
      <option>China</option>
      <option>India</option>
      <option>United States</option>
      <option>Indonesia</option>
      <option>Brazil</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the <a href="/terms">terms and conditions</a>
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form>

action

定义提交表单时表单信息发送到的 URL。

"/contact"

您可以使用相对 URL。

"https://htmlreference.cn/contact"

您可以使用绝对 URL。

method

定义提交表单时使用的 HTTP 方法。

"post"

表单信息作为请求正文的一部分发送到服务器。

"get"

表单信息作为URL 参数的一部分发送到服务器: /contact?first_name=Alex&last_name=Smith。

name

发送到服务器时的表单名称。当同一网页上存在多个表单时，这很有用。

"sign_up_form"

name 值在整个网页的范围内必须是唯一的。

它只能包含字母数字字符 a-z A-Z 0-9 和一些特殊字符，如 - _… 但不能有空格。

autocomplete

确定浏览器是否可以自动完成所有表单的控件。

"off"

浏览器将禁用自动完成功能。但是，可以针对每个控件单独覆盖。

"on"

浏览器将启用自动完成功能。但是，可以针对每个控件单独覆盖。

尝试在这个输入框中按下“向下”。它将显示以前输入的电子邮件地址。

target

定义点击的链接将在哪个标签或窗口中显示。

"_blank"

在新浏览上下文中打开，通常是新标签。

"_self"

在当前标签中打开。

"_parent"

在父浏览上下文中打开，如果没有父浏览上下文，则为 _self。

"_top"

在顶层浏览上下文中打开，如果没有顶层浏览上下文，则为 _self。

enctype

定义发送到服务器的信息的MIME 类型。仅当方法为 post 时才有效。

"application/x-www-form-urlencoded"

默认值。

默认值。

"text/plain"

用于 HTML5 纯文本。

"multipart/form-data"

使用 <input type="file"> 元素时需要。

novalidate

告诉浏览器不要在提交时验证表单。

不需要值。

# input

在网页表单内定义一个交互式控件。

示例: 复制

<input type="text" name="first_name" placeholder="e.g. Alex">

type

定义表单输入类型。

必需。

"text"

简单的单行文本输入，接受任何类型的字符

"email"

类似文本输入，但浏览器将尝试只允许有效的电子邮件地址。

在移动设备上，将显示电子邮件键盘。

"number"

类似文本输入，但浏览器将尝试只允许有效的数字。

在移动设备上，将显示数字键盘。

"checkbox"

一个切换复选框，只能处于两种状态之一:选中或未选中。只有在选中复选框时，才会由表单提交该值。

您可以将复选框包装在标签中，以增加点击区域。

<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>

注意，点击文本将切换复选框。

"radio"

需要与其他单选按钮结合使用，这样它们就是互斥的。

您可以通过类似的 name 值链接单选按钮

<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>

注意，点击一个将取消选中另一个。

"submit"

点击或按 Enter 键时触发的提交按钮。

name

在表单内定义该输入的唯一标识符。它允许服务器在提交时访问每个输入的值。

必需。

"first_name"

name 值在 <form> 容器的范围内必须是唯一的。

它只能包含字母数字字符 a-z A-Z 0-9 和一些特殊字符，如 - _… 但不能有空格。

placeholder

定义一个不可选的占位符文本，该文本仅在输入为空时显示。

作为最佳实践，建议使用标签描述输入，并使用占位符展示示例

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. [email protected]">
</form>

注意，占位符在获得焦点时会消失，因此需要保留一个单独的标签。

required

告诉浏览器此输入是必需的。将其留空将显示警告。

不需要值。

您只需添加不带值的 required 属性即可

<form>
  <input type="text" required>
</form>

如果您尝试提交带有空文本输入的表单，浏览器应该会显示警告。

disabled

禁用输入。

不需要值。

# legend

定义父元素内容的 标题。

示例: 复制

Subscribe to the Newsletter 
<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

# textarea

在网页表单中定义 多行文本控件。

name

定义表单中该文本区域的唯一标识符。它允许服务器在提交时访问每个文本区域的值。

必需。

"message"

name 值在 <form> 容器的范围内必须是唯一的。

它只能包含字母数字字符 a-z A-Z 0-9 和一些特殊字符，如 - _… 但不能有空格。

autocomplete

确定浏览器是否可以自动完成文本区域。

"off"

浏览器将 禁用 自动完成功能。

"on"

浏览器将 启用 自动完成功能。

minlength

定义文本区域所需的最小字符数以使其有效。

"15"

您可以使用 整数。

maxlength

定义允许的最大字符数。

"140"

您可以使用 整数。

placeholder

定义一个不可选择的占位符文本，该文本仅在文本区域为空时显示。

"e.g. Hello my name is Alex"

您可以提示文本区域的预期格式。

cols

定义列数。

"40"

您可以使用 整数。

rows

定义行数。

"5"

您可以使用 整数。

wrap

定义文本的换行方式。

"hard"

文本将始终根据 cols 值换行。

"soft"

文本仅在需要时换行。

disabled

禁用文本区域。

不需要值。

required

告诉浏览器该文本区域是 必需的。留空将显示警告。

不需要值。

autofocus

在网页加载时将焦点设置到文本区域。

不需要值。

readonly

将文本区域变成只读元素。

不需要值。

spellcheck

启用浏览器拼写检查器。

不需要值。