前端必知必会-前端input与form相关属性

HTML 表单from 属性

id属性

输入表单属性指定 <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 属性

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

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

formaction 属性适用于以下输入类型：submit 和 image。

示例
带有两个提交按钮的 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="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 属性

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

注意：此属性覆盖 元素的 method 属性。

formmethod 属性适用于以下输入类型：submit 和 image。

表单数据可以作为 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="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 属性指定在提交时不应验证 元素。

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

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

示例
带有两个提交按钮的表单（带验证和不带验证）：

<form action="/action_page.php">
<label for="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">输入您的电子邮件：</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>

总结

本文介绍了html中form和input属性的使用，如有问题欢迎私信和评论