HTML 表单标签之form标签的学习

表单标签

表单	?
<form>	定义一个 HTML 表单，用于用户输入。
<input>	定义一个输入控件
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<datalist>New	规定了 input 元素可能的选项列表。
<keygen>New	规定用于表单的密钥对生成器字段。
<output>New	定义一个计算的结果

form标签

标签定义及使用说明

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个如下的表单元素：

<input>：定义一个输入控件
<textarea>：定义多行的文本输入控件。
<button>：定义按钮。
<select>：定义选择列表（下拉列表）。
<option>：定义选择列表中的选项。
<optgroup>：定义选择列表中相关选项的组合。
<fieldset>：定义围绕表单中元素的边框。
<label>：定义 input 元素的标注。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>


<!-- 请求方式是 get -->
<form method="get">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="登录">
</form>

</body>
</html>

Google浏览器中打开：

由于是get请求，输入账号密码登录，URL会改变，如：

属性

accept-charset属性

accept-charset 属性规定表单提交时使用的字符编码。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签的accept_charset属性</title>
</head>
<body>

<!-- accept-charset="UTF-8" ：采用UTF-8编码 -->
<form accept-charset="UTF-8">
    <!-- name：规定表单的名称 -->
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

action属性

action 属性规定当提交表单时，向何处发送表单数据。

值	描述
URL	当表单提交时向何处发送表单数据。可能的值：绝对 URL - 指向另一个网站（比如 action="http://www.example.com/example.htm"）相对 URL - 指向网站内的一个文件（比如 action="example.htm"）

值

描述

URL

当表单提交时向何处发送表单数据。

可能的值：

绝对 URL - 指向另一个网站（比如 action="http://www.example.com/example.htm"）
相对 URL - 指向网站内的一个文件（比如 action="example.htm"）

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签的action属性</title>
</head>
<body>

<form action="https://www.baidu.com" method="get">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

如上，提交后，会跳转到百度。

autocomplete属性

autocomplete 属性规定表单是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

提示：autocomplete "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。

属性值：

值	描述
on	默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
off	规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签的action属性</title>
</head>
<body>

<form action="https://www.baidu.com" method="get" autocomplete="on">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

Google浏览器中打开：

enctype属性

enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。

注意：只有 method="post" 时才使用 enctype 属性。

属性值：

值	描述
application/x-www-form-urlencoded	默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

举例：

发送以 "multipart/form-data" 编码的表单数据：

<form action="HTML_form_enctype.html"
      method="post" enctype="multipart/form-data">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
</form>

method属性

method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）。

关于 GET 的注释

将表单数据以名称/值对的形式附加到 URL 中

URL 的长度是有限的（大约 3000 字符）

绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）

对于用户希望加入书签的表单提交很有用

GET 更适用于非安全数据，比如在 Google 中查询字符串

关于 POST 的注释

将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）

没有长度限制

通过 POST 提交的表单不能加入书签

属性值：

值	描述
get	默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
post	以 HTTP post 事务的形式发送表单数据（form-data）。

举例：

使用 "get" 方法来提交表单：

<form method="get">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="登录">
</form>

Google浏览器中打开并提交数据：

使用 "post" 方法来提交表单：

<form method="post">
    账号: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="登录">
</form>

Google浏览器中打开并提交数据：

name属性

name 属性规定表单的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。

语法格式：

<form name="text">

属性值：

值	描述
text	规定表单的名称。

举例：

带有 name 属性的 HTML 表单

<form method="post">
    账号: <input type="text" name="账号"><br>
    密码: <input type="text" name="密码"><br>
    <input type="submit" value="登录">
</form>

Google浏览器中打开并提交数据：

novalidate属性

novalidate 属性是一个布尔属性。

novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。

举例：

<form method="post", novalidate>
    账号: <input type="text" name="账号"><br>
    密码: <input type="text" name="密码"><br>
    <input type="submit" value="登录">
</form>

target属性

target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。

target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。

属性值：

值	描述
_blank	在新窗口/选项卡中打开。
_self	在同一框架中打开。（默认）
_parent	在父框架中打开。
_top	在整个窗口中打开。
framename	在指定的 iframe 中打开。

举例：

提交一个在新窗口或新选项卡中打开的表单，即在新窗口或新选项卡中显示接收到的响应：

<form action="HTML_form_target.html" method="get" target="_blank">
    账号: <input type="text" name="账号"><br>
    密码: <input type="text" name="密码"><br>
    <input type="submit" value="登录">
</form>

Google浏览器中打开并提交数据，会弹出一个新的窗口：

这里指定提交数据到的窗口是该html文件，即弹出一个get方式提交的数据的URL窗口。