HTML Form属性

本页内容
上一节: HTML_Form表单 下一节: HTML_表单元素

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

action属性

action 属性定义了提交表单时要执行的操作。

通常,当用户单击提交按钮时,表单数据会发送到服务器上的文件。在下面的示例中,表单数据被发送到名为“.php”的文件中。此文件包含处理表单数据的服务器端脚本:


示例

<html>
<form action="/third/http.php" method="GET">
  <label for="fname">姓名:</label><br>
  <input type="text" id="fname" name="fname" value="小白"><br>
  <label for="age">年龄:</label><br>
  <input type="text" id="age" name="age" value="1"><br><br>
  <input type="submit" value="提交">
</form>
</html>

如果 action 省略该属性,则将操作设置为当前页面。

target属性

target 属性指定在哪里显示提交表单后收到的响应。

target 属性可以具有以下值之一:

  • _blank 响应显示在新窗口或选项卡中
  • _self 响应显示在当前窗口中
  • _parent 响应显示在父框架中
  • _top 在最顶级的浏览上下文中(即当前上下文的一个没有父级的祖先浏览上下文),如果没有父级,则与 _self 表现一致。
  • framename 响应显示在指定name的iframe中


示例

在新的窗口中显示响应

<html>
<form action="/third/http.php" method="GET" target="_blank">
  <label for="fname">姓名:</label><br>
  <input type="text" id="fname" name="fname" value="小白"><br>
  <label for="age">年龄:</label><br>
  <input type="text" id="age" name="age" value="1"><br><br>
  <input type="submit" value="提交">
</form>
</html>


方法属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量(使用 method="get" )或作为 HTTP body 内容(使用 method="post" )发送。

提交表单数据时的默认 HTTP 方法是 GET。


示例

使用post提交,这个时候你可以发现浏览器的URL中并不包含我们提交的数据

<html>
<form action="/third/http.php" method="" target="_blank">
  <label for="fname">姓名:</label><br>
  <input type="text" id="fname" name="fname" value="小白"><br>
  <label for="age">年龄:</label><br>
  <input type="text" id="age" name="age" value="1"><br><br>
  <input type="submit" value="提交">
</form>
</html>

GET注意事项:

  • 以名称/值对的形式将表单数据附加到 URL
  • 切勿使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
  • URL 的长度是有限的(2048 个字符)
  • 对于用户想要为结果添加书签的表单提交很有用
  • GET 适用于非安全数据,例如 Google 中的查询字符串

POST注意事项:

  • 在 HTTP 请求正文中附加表单数据(提交的表单数据未显示在 URL 中)
  • POST 没有大小限制,可用于发送大量数据。
  • 不能为带有 POST 的表单提交添加书签
  • 上传图片或者其他文件只能用post。

自动完成属性

autocomplete 属性指定表单是否应该打开或关闭自动完成功能。

启用自动完成后,浏览器会根据用户之前输入的值自动完成值。

示例

设置为off可以关闭自动完成

<html>
<form action="/third/http.php" method="" target="_blank"  autocomplete="on">
  <label for="fname">姓名:</label><br>
  <input type="text" id="fname" name="fname" value="小白"><br>
  <label for="age">年龄:</label><br>
  <input type="text" id="age" name="age" value="1"><br><br>
  <input type="submit" value="提交">
</form>
</html>

novalidate 属性

novalidate属性是一个布尔属性。当存在时,它指定表单数据(输入)格式在提交时不应该被验证。

示例

提交第一个表格不会验证邮箱,第二个会验证邮箱格式

不验证邮箱格式
<form action="/third/http.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
验证邮箱格式
<form action="/third/http.php">
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
上一节: HTML_Form表单 下一节: HTML_表单元素
此页面最后编辑于2022年8月14日 (星期日) 21:00。