HTML form

HTML 表单由<form>元素创建,您可以自定义其中的属性达成目的

实例

实例使用了form 的action与method属性

form Action属性

Action属性定义表单提交的目的网页,上文实例则是将表单收集内容提交给try_result.html文件进行后端处理,并有可能在该页面进行结果展示

提示:如果省略 action 属性,则将 action 设置为当前页面。

form Method属性

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

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

提交表单数据时,本属性缺省则默认的 HTTP 方法是 GET。

关于 GET 的注意事项:

  1. 以名称/值对的形式将表单数据追加到 URL
  2. 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
  3. URL 的长度受到限制(2048 个字符)
  4. 对于用户希望将结果添加为书签的表单提交很有用
  5. GET 适用于非安全数据

关于 POST 的注意事项:

  1. 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
  2. POST 没有大小限制,可用于发送大量数据
  3. 带有 POST 的表单提交无法添加书签

提示:如果表单数据包含敏感信息或个人信息,请务必使用 POST!

form Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一:

描述
_blank 响应显示在新窗口或选项卡中。
_self 响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中
framename 响应显示在命名的 iframe 中

提示:默认值为 _self,这意味着响应将在当前窗口中打开。

form Autocomplete属性

autocomplete 属性规定表单是否应打开自动完成功能。

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

form Novalidate属性

novalidate 属性是一个布尔属性。添加此属性浏览器将不校验输入的合法性

举例:我们在form表单里放置一个邮箱地址输入的input标签,输入的内容不是一个合法的邮箱地址时候,浏览器会自动校验提示你要输入合法的内容并阻止提交。

加入novalidate 浏览器将不会校验

form 属性的列表

属性 描述
accept-charset 规定用于表单提交的字符编码。
action 规定提交表单时将表单数据发送到何处。
autocomplete 规定表单是否应打开自动完成(填写)功能。
enctype 规定将表单数据提交到服务器时应如何编码(仅供 method="post")
method 规定发送表单数据时要使用的 HTTP 方法。
name 规定表单名称。
novalidate 规定提交时不应验证表单
rel 规定链接资源和当前文档之间的关系
target 规定提交表单后在何处显示接收到的响应
关注本站微信公众号