HTML 输入表单属性


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


表单属性

输入form属性指定的形式<input>元素属于.

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

示例

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

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

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
亲自试一试 »

形成属性

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

笔记:该属性会覆盖 action的属性<form>元素。

这个formaction属性适用于以下输入类型:提交和图片。

示例

带有两个提交按钮的 HTML 表单,具有不同的操作:

<form action="/action_page.html">
  <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="Submit">
  <input type="submit" formaction="/action_page2.html" value="Submit as Admin">
</form>
亲自试一试 »

formenctype 属性

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

笔记:该属性会覆盖 enctype 属性<form>元素。

这个formenctype属性适用于以下输入类型:提交和图片。

示例

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

<form action="/action_page_binary.html" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>
亲自试一试 »


formmethod 属性

输入formmethod属性定义将表单数据发送到操作 URL 的 HTTP 方法。

笔记:该属性覆盖了方法属性<form>元素。

这个formmethod属性适用于以下输入类型:提交和图片。

表单数据可以作为 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.html" 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="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>
亲自试一试 »

表单目标属性

输入formtarget属性指定名称或关键字,指示在何处显示提交表单后收到的响应。

笔记:该属性会覆盖目标属性<form>元素。

这个formtarget属性适用于以下输入类型:提交和图片。

示例

具有两个提交按钮的表单,具有不同的目标窗口:

<form action="/action_page.html">
  <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="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
亲自试一试 »

formnovalidate 属性

输入formnovalidate属性指定 <input> 元素在提交时不应进行验证。

笔记:该属性会覆盖 novalidate 属性<form>元素。

这个formnovalidate属性适用于以下输入类型:提交。

示例

具有两个提交按钮的表单(带验证和不带验证):

<form action="/action_page.html">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>
亲自试一试 »

novalidate 属性

这个novalidate属性是一个<form>属性。

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

示例

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

<form action="/action_page.html" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

HTML 表单和输入元素

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

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