语言►HTML

HTML中的form元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/22/HTML%E4%B8%AD%E7%9A%84form%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 什么是<form>
  2. 作用
  3. HTML 特性

正文

什么是<form>

<form>是 HTML 中的一个块元素

作用

向服务器提交信息

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="./search.html">
      <input type="text" name="keywords" placeholder="placeholder" />
      <button>submit</button>
    </form>
  </body>
</html>

HTML 特性

action

目标 URL

默认值为当前网页的 URL

示例：

a.example.com/learn_form/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action=""></form>
    <script>
      // a.example.com/learn_form/index.html
      console.log(document.querySelector('form').action);
    </script>
  </body>
</html>

autocomplete

是否开启自动完成功能

取值范围：

  • on 开启，默认值
  • off 关闭

举个例子：如果用户曾在input:text、input:search中输入内容并提交了对应的表单，浏览器就会将这些内容记录下来。将来任何网页中的相同的元素满足条件时，浏览器就会弹出一个内容候选列表供用户选择。

条件：

  1. type和name都相同
  2. 元素被鼠标点击，或者用户已键入的字符匹配到了相应的内容

注意：清空浏览器缓存可以清空候选列表

经过测试：

  1. 如果没有当前页面不会被 bfcache 缓存，且关闭自动完成，那么提交表单后再【返回】，表单里的所有值都不会保留
  2. 如果当前页面会被 bfcache 缓存，即使关闭自动完成，那么提交表单后再【返回】，表单里的所有值会保留

method

网络请求方法

取值范围：

  • GET
  • POST
  • dialog 若<form>为<dialog>的子元素，则使用此方法提交表单可以关闭<dialog>

默认值为GET

enctype

编码方式，即 HTTP 中的Content-Type请求头

若method=POST，则取值范围：

  • application/x-www-form-urlencoded
  • multipart/form-data 若<form>中包含input:file，则必须使用此编码方式
  • text/plain

默认值为application/x-www-form-urlencoded

novalidate

禁用校验

若此特性存在，则required等校验将失效。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form novalidate>
      <input type="text" name="keywords" required placeholder="placeholder" />
      <button>submit</button>
    </form>
  </body>
</html>

target

于何处显示 HTTP 响应

target的值为浏览上下文（例如：<iframe>）的name特性

除此之外，还支持 4 个关键字：

  • _self 在当前页显示
  • _blank 在新标签页中显示
  • _parent 在父页面显示（当前页作为<iframe>被嵌在父页面中），若当前页面没有父页面，则表现和_self相同
  • _top 在顶级页面显示（当前页作为<iframe>被嵌在顶级页面中），若当前页面已为顶级页面，则表现和_self相同

默认值为_self

示例：于<iframe name="result"></iframe>中显示 HTTP 响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form target="result">
      <input type="text" name="keywords" placeholder="placeholder" />
      <button>submit</button>
    </form>
    <iframe name="result"></iframe>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/22/HTML%E4%B8%AD%E7%9A%84form%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信