HTML Input 表单属性
本章介绍 HTML <input>
元素的不同 form*
属性。
form 属性
input 的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="Submit">
</form>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">
亲自试一试 »
formaction 属性
input 的 formaction
属性规定当提交表单时,对输入(数据)进行处理的文件的 URL。
注释: 该属性会覆盖
form
元素的 <form>
属性。
formaction
属性适用于以下输入类型:submit 和 image。
实例
带有两个提交按钮的 HTML 表单,它们具有不同的操作(action):
<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="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
亲自试一试 »
formenctype 属性
input 的 formenctype
属性指定提交时应如何编码表单数据(仅适用于 method="post" 的表单)。
注释: 此属性将覆盖 <form>
元素的 enctype 属性。
formenctype
属性适用于以下输入类型:submit 和 image。
实例
有两个提交按钮的表单。第一个发送使用默认编码的表单数据,第二个发送编码为 "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="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
亲自试一试 »
formmethod 属性
input 的 formmethod
属性定义了将表单数据发送到 action URL 的 HTTP 方法。
注释: 此属性将覆盖 <form>
元素的 method 属性。
formmethod
属性适用于以下输入类型:submit 和 image。
表单数据可以作为 URL 变量(method="get")或作为 HTTP post 事务(method="post")发送。
关于 GET 的注意事项:
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
- URL 的长度受到限制(2048 个字符)
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据,例如 Google 中的查询字符串
关于 POST 的注意事项:
- 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
- POST 没有大小限制,可用于发送大量数据。
- 带有 POST 的表单提交无法添加书签
提示:如果表单数据包含敏感信息或个人信息,请务必使用 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="Submit using
GET">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
亲自试一试 »
formtarget 属性
input 的 formtarget
属性指定一个名称或关键字,该名称或关键字规定在提交表单后在何处显示收到的响应。
注释:此属性将覆盖 <form>
元素的 target 属性。
formtarget
属性适用于以下输入类型:submit 和 image。
实例
有两个提交按钮且有不同目标窗口的表单:
<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="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
亲自试一试 »
formnovalidate 属性
input 的 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="Submit">
<input type="submit"
formnovalidate="formnovalidate"
value="Submit without validation">
</form>
亲自试一试 »
novalidate 属性
novalidate
属性是 <form>
属性。
如果已设置,novalidate 属性规定在提交时不应验证所有表单数据。
实例
规定在提交时不验证任何表单数据:
<form action="/action_page.php" novalidate>
<label
for="email">输入您的 email 邮箱:</label>
<input type="email"
id="email" name="email"><br><br>
<input type="submit"
value="Submit">
</form>
亲自试一试 »
HTML 表单和输入元素
标签 | 描述 |
---|---|
<form> | 定义用于用户输入的 HTML 表单 |
<input> | 定义输入控件 |
如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册。