HTML Input 表单* 属性
本章介绍 HTML <input>
元素的各种 form*
属性。
form 属性
input form
属性指定了 <input>
元素所属的表单。
此属性的值必须等于其所属的 <form>
元素的 id 属性。
示例
位于 HTML 表单外部(但仍属于表单一部分)的输入字段
<form action="/action_page.php" id="form1">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
</form>
<label for="lname">姓:</label>
<input type="text" id="lname" name="lname" form="form1">
自己动手试一试 »
formaction 属性
input formaction
属性指定了提交表单时将处理输入的文件的 URL。
注意:此属性会覆盖 <form>
元素的 action
属性。
formaction
属性适用于以下 input 类型:submit 和 image。
示例
具有两个提交按钮的 HTML 表单,具有不同的操作
<form action="/action_page.php">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
<input type="submit" formaction="/action_page2.php" value="以管理员身份提交">
</form>
自己动手试一试 »
formenctype 属性
input formenctype
属性指定了提交表单时应如何编码表单数据(仅适用于 method="post" 的表单)。
注意:此属性会覆盖 <form>
元素的 enctype 属性。
formenctype
属性适用于以下 input 类型:submit 和 image。
示例
带有两个提交按钮的表单。第一个以默认编码发送表单数据,第二个以 "multipart/form-data" 编码发送表单数据
<form action="/action_page_binary.asp" method="post">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 形式提交">
</form>
自己动手试一试 »
formmethod 属性
input formmethod
属性定义了将表单数据发送到 action URL 的 HTTP 方法。
注意:此属性会覆盖 <form>
元素的 method 属性。
formmethod
属性适用于以下 input 类型:submit 和 image。
表单数据可以作为 URL 变量 (method="get") 或作为 HTTP POST 事务 (method="post") 发送。
关于“get”方法的注意事项
- 此方法将表单数据以名称/值对的形式附加到 URL
- 此方法对于用户希望收藏结果的表单提交很有用
- URL 中可以放置的数据量有限(因浏览器而异),因此,您不能确定所有表单数据都能正确传输
- 切勿使用“get”方法传递敏感信息!(密码或其他敏感信息将在浏览器的地址栏中可见)
关于“post”方法的注意事项
- 此方法将表单数据作为 HTTP POST 事务发送
- 使用“post”方法的表单提交无法被收藏
- 与 "get" 方法相比,"post" 方法更强大、更安全,并且 "post" 没有大小限制
示例
带有两个提交按钮的表单。第一个使用 method="get" 提交表单数据。第二个使用 method="post" 提交表单数据
<form action="/action_page.php" method="get">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="使用 GET 提交">
<input type="submit" formmethod="post" value="使用 POST 提交">
</form>
自己动手试一试 »
formtarget 属性
input formtarget
属性指定了名称或关键字,用于指示提交表单后收到的响应的显示位置。
注意:此属性会覆盖 <form>
元素的 target 属性。
formtarget
属性适用于以下 input 类型:submit 和 image。
示例
带有两个提交按钮的表单,具有不同的目标窗口
<form action="/action_page.php">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
<input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
</form>
自己动手试一试 »
formnovalidate 属性
input formnovalidate
属性指定在提交时,不应对 <input>
元素进行验证。
注意:此属性会覆盖 <form>
元素的 novalidate 属性。
formnovalidate
属性适用于以下 input 类型:submit。
示例
带有两个提交按钮的表单(有和无验证)
<form action="/action_page.php">
<label for="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">输入您的电子邮件:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
自己动手试一试 »
HTML 表单和输入元素
标签 | 描述 |
---|---|
<form> | 定义一个用于用户输入的 HTML 表单 |
<input> | 定义一个输入控件 |
有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考。