HTML 表单标签之form标签的学习
表单标签
表单 | 描述 |
---|---|
form | 定义一个 HTML 表单,用于用户输入。 |
input | 定义一个输入控件 |
textarea | 定义多行的文本输入控件。 |
button | 定义按钮。 |
select | 定义选择列表(下拉列表)。 |
optgroup | 定义选择列表中相关选项的组合。 |
option | 定义选择列表中的选项。 |
label | 定义 input 元素的标注。 |
fieldset | 定义围绕表单中元素的边框。 |
legend | 定义 fieldset 元素的标题。 |
datalist | 规定了 input 元素可能的选项列表。 |
keygen | 规定用于表单的密钥对生成器字段。 |
output | 定义一个计算的结果 |
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") |
举例:
<!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窗口。
本文来自博客园,作者:LeeHua,转载请注明原文链接:https://www.cnblogs.com/liyihua/p/12350734.html