HTML Input form* 属性

本章描述了 HTML <input> 元素的不同 form* 属性。

form 属性

输入字段的 form 属性指定 <input> 元素所属的表单。

此属性的值必须等于它所属的 <form> 元素的 id 属性。

实例

一个位于 HTML 表单外部的输入字段(但仍然是表单的一部分):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

亲自试一试

formaction 属性

输入字段的 formaction 属性指定提交表单时将处理输入的文件 URL。

注意:此属性会覆盖 <form> 元素的 action 属性。

formaction 属性适用于以下输入类型:submitimage

实例

一个包含两个提交按钮的 HTML 表单,分别执行不同的操作:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formaction="/action_page2.php" value="以管理员身份提交">
</form>

亲自试一试

formenctype 属性

输入字段的 formenctype 属性指定提交时应如何编码表单数据(仅适用于 method="post" 的表单)。

注意:此属性会覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于以下输入类型:submitimage

实例

一个包含两个提交按钮的表单。第一个使用默认编码发送表单数据,第二个发送编码为 "multipart/form-data" 的表单数据:

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

亲自试一试

formmethod 属性

输入字段的 formmethod 属性定义了向 action URL 发送表单数据的 HTTP 方法。

注意:此属性会覆盖 <form> 元素的 method 属性。

formmethod 属性适用于以下输入类型:submitimage

表单数据可以作为 URL 变量(method="get")发送,或者作为 HTTP post 事务(method="post")发送。

关于 "get" 方法的说明:

  • 此方法将表单数据以名称/值对的形式附加到 URL
  • 此方法适用于用户希望将结果加入书签的表单提交
  • URL 中可以放置的数据量有限制(不同浏览器之间有所不同),因此,不能保证所有表单数据都能正确传输
  • 绝对不要使用 "get" 方法传递敏感信息!(密码或其他敏感信息将在浏览器的地址栏中可见)

关于 "post" 方法的说明:

  • 此方法以 HTTP post 事务形式发送表单数据
  • 使用 "post" 方法的表单提交无法加入书签
  • "post" 方法比 "get" 更稳健、更安全,且 "post" 没有大小限制

实例

一个包含两个提交按钮的表单。第一个使用 method="get" 发送表单数据。第二个使用 method="post" 发送表单数据:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

亲自试一试

formtarget 属性

输入字段的 formtarget 属性指定一个名称或关键字,指示在提交表单后在哪里显示接收到的响应。

注意:此属性会覆盖 <form> 元素的 target 属性。

formtarget 属性适用于以下输入类型:submitimage

实例

一个包含两个提交按钮的表单,分别指向不同的目标窗口:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
</form>

亲自试一试

formnovalidate 属性

输入字段的 formnovalidate 属性指定提交时不应验证 <input> 元素。

注意:此属性会覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性适用于以下输入类型:submit

实例

一个包含两个提交按钮的表单(一个有验证,一个没有验证):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formnovalidate="formnovalidate"
  value="不经验证提交">
</form>

亲自试一试

novalidate 属性

novalidate 属性是 <form> 元素的属性。

当存在时,novalidate 指定提交时不应验证所有表单数据。

实例

指定提交时不应验证任何表单数据:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

亲自试一试

HTML 表单和输入元素

标签 描述
<form> 定义用于用户输入的 HTML 表单。
<input> 定义输入控件。

有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考页面