HTML Input form* 属性 详解
HTML Input form* 属性
本章介绍 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">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input form 属性</h1>
<p>form 属性指定输入元素所属的表单。</p>
<form action="/demo/html/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>
<p>下面的 "Last name" 字段在 form 元素之外，但仍是表单的一部分。</p>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
formaction 属性
input 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。
注释：该属性会覆盖 <form> 元素的 action 属性。
formaction 属性适用于以下输入类型：submit 和 image。
示例代码：
带有两个提交按钮的 HTML 表单，它们具有不同的操作（action）：
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input formaction 属性</h1>
<p>formaction 属性规定提交表单时对输入进行处理的的文件的 URL。</p>
<form action="/demo/html/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="/demo/html/action_page_2.php" value="以管理员提交">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
formenctype 属性
input 的 formenctype 属性指定提交时应如何编码表单数据（仅适用于 method="post" 的表单）。
注释：此属性将覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于以下输入类型：submit 和 image。
示例代码：
有两个提交按钮的表单。第一个发送使用默认编码的表单数据，第二个发送编码为 "multipart/form-data" 的表单数据：
<form action="/action_page_binary.php" 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="以 Multipart/form-data 编码提交">
</form>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input formenctype 属性</h1>
<p>formenctype 属性规定提交表单数据时应如何编码。</p>
<form action="/demo/html/demo_post_enctype.php" 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="以 Multipart/form-data 提交">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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">姓氏：</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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input formmethod 属性</h1>
<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>
<form action="/demo/html/action_page.php" method="get" target="_blank">
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
formtarget 属性
input 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。
注释：此属性将覆盖 <form> 元素的 target 属性。
formtarget 属性适用于以下输入类型：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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input formtarget 属性</h1>
<p>formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。</p>
<form action="/demo/html/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">
<input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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="提交">
<input type="submit" formnovalidate="formnovalidate"
value="不进行验证的提交">
</form>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input formnovalidate 属性</h1>
<form action="/demo/html/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="提交">
<input type="submit" formnovalidate="formnovalidate" value="不做验证的提交">
</form>
<p><b>注释：</b>Safari 10 或更早的版本不支持 input 标签的 formnovalidate 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>form novalidate 属性</h1>
<p>novalidate 属性规定提交表单时不应验证表单数据。</p>
<form action="/demo/html/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="提交">
</form>
<p><b>注释：</b>Safari 10 或更早的版本不支持 form 标签的 novalidate 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML Form 和 Input 元素
| 标签 | 描述 |
|---|---|
| <form> | 为用户输入定义 HTML 表单。 |
| <input> | 定义输入控件。 |
如需所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。
