5、HTML 常用标签 - 第三集

通过学习，我们的人生被赋予了更多的选择，创造了更多的可能性。

---

前言

• 在 HTML 中，一个完整的表单通常由表单域 form 、表单控件(也称为表单元素)和提示信息3个部分构成。
• HTML 常用标签 - 第三集汇总了表单域 form 和表单元素 input 的基础用法、代码示例及运行截图。

---

1. 表单域 form

1.1 标签描述

• <form> 标签用于创建供用户输入的 HTML 表单。
• <form> 标签可以包含一个或多个表单元素，例如 <input> 、<select> 、<textarea> 等。
• 关键属性如下：

属性	描述
action	当表单提交时向何处发送表单数据。
method	发送表单数据的 HTTP 方法。 取值：get / post
target	规定在何处打开 action URL。 取值：_blank / _self / _parent / _top

• 设置 action 属性：

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

• 设置 method 属性：

1. method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。
2. 表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）。

• method 属性 设置 GET 和 POST 的区别：

GET	POST
method 属性默认值为 GET 。可以将表单数据（form-data）以名称/值对的形式附加到 URL 中： URL?name=value&name=value。	将表单数据附加到 HTTP 请求的 body 内。
不要使用 GET 来发送敏感数据！（因为数据在 URL 中是可见的），GET 更适用于非安全数据。	数据不显示在 URL 中。
URL 的长度是有限的 （大约 3000 字符）	没有长度限制。

1.2 示例代码

<h3>表单：绝对 URL + get 请求</h3>
<form action="test2.html" method="get">
  姓名: <input type="text" name="name"><br>
  年龄: <input type="text" name="age"><br>
  <input type="submit" value="提交">
</form>

<h3>表单：相对 URL + post 请求</h3>
<form action="https://www.w3cschool.cn/statics/demosource/demo_form_method_post.php" method="post" target="_blank">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

1.3 运行截图

2. 表单元素 input

<input> 标签可以接收用户的数据、信息，输入字段的方式及类型取决于 type 属性（默认类型是：text ）。<input> 标签的 value 属性对于不同 input 类型，用法也不同：

1. 对于 “button”、“reset”、“submit” 类型，value 属性定义 <input> 元素按钮上的文本 ；
2. 对于 “text”、“password”、“hidden” 类型，value 属性定义 <input> 元素输入字段的初始（默认）值；
3. 对于 “checkbox”、“radio”、“image” 类型，value 属性定义与 <input> 元素相关的值，当提交表单时该值会发送到表单的 action URL；
4. value 属性对于 “checkbox” 和 “radio” 类型是必需的；
5. value 属性不适用于 file 类型。

<input> 标签的重要属性：

属性	描述
type	规定要显示的 <input> 元素的类型。类型取值：button，checkbox，color，date，datetime，datetime-local，email，file，hidden，image，month，number，password，radio，range，reset，search，submit，tel，text，time，url，week。
value	指定 <input> 元素 value 的值。
name	规定 <input> 元素的名称。name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
maxlength	规定 <input> 元素中允许的最大字符数。
checked	规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	规定应该禁用的 <input> 元素，被禁用的 input 元素是无法使用和无法点击的。表单中被禁用的 <input> 元素不会被提交。disabled 属性不适用于 <input type="hidden"> 。
readonly	规定输入字段是只读的，不能修改。但是用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
src	规定显示为提交按钮的图像的 URL。src 属性对于 <input type="image"> 是必需的属性，且只能与 <input type="image"> 配合使用。
alt	alt 属性为用户由于某些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看图像时提供了替代文本。alt 属性只能与 <input type="image"> 配合使用。
placeholder	规定可描述输入字段预期值的简短的提示信息。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

以下将分类列举各类型 input 标签的使用场景、示例代码及运行截图。

2.1 常用“输入框”类型

类型	描述	示例代码	运行截图
text	type 属性的默认值是 “ text ”。 text 类型定义了一个单行的文本字段。 默认宽度为 20 个字符。	<input type="text" name="name" placeholder="请输入姓名">
number	定义用于输入数字的字段。	数量（1到5之间），数字间隔 step 为 0.5 ，默认值为 2 : <input type="number" name="quantity" min="1" max="5" step="0.5" value="2">
password	定义密码字段（字段中的字符会被遮蔽）。	<input type="password" name="pwd" maxlength="6">
hidden	定义隐藏输入字段。	隐藏字段 id <input type="hidden" name="id" value="123456"> ，用户是看不到的
email	用于 e-mail 地址的字段，Internet Explorer 9 及更早IE版本不支持 type=“email”	E-mail: <input type="email" name="usremail" placeholder="请输入邮箱">
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件），Internet Explorer 9 及更早IE版本不支持 type=“range”。	进度：<input type="range" name="points" min="10" max="100" value="70">

2.2 常用“选择框”类型

类型	描述	示例代码	运行截图
radio	允许用户在一定数量的选择中选取一个选项。	<label>性别：</label> <input type="radio" name="sex" value="01"> 男 <input type="radio" name="sex" value="02"> 女
checkbox	复选框允许用户在一定数量的选择中选取一个或多个选项。	<label>爱好：</label> <input type="checkbox" name="hobby" value="打游戏">打游戏 <input type="checkbox" name="hobby" value="看电影" checked>看电影 <input type="checkbox" name="hobby" value="看小说">看小说
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。	选择一个文件: <input type="file" name="img">
color	从拾色器中选取颜色。部分浏览器不支持。	选择你喜欢的颜色: <input type="color" name="favcolor" value="#ff0000">
date	定义 date 控件，包括年、月、日，不包括时间。部分浏览器不支持。	生日: <input type="date" name="birthday" value="2024-05-20">
time	定义用于输入时间的控件（不带时区）。部分浏览器不支持。	选择时间: <input type="time" name="usr_time">
datetime-local	date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。部分浏览器不支持。	会议时间（日期和时间）: <input type="datetime-local" name="meetingtime">
month	定义 month 和 year 控件（不带时区）。部分浏览器不支持。	生日（月和年）: <input type="month" name="bdaymonth">
week	定义 week 和 year 控件（不带时区）。部分浏览器不支持。	选择周: <input type="week" name="week_year">

2.3 常用“按钮”类型

类型	描述	示例代码	运行截图
button	定义可点击的按钮，在用户单击按钮时启动一段 JavaScript。	<input type="button" value="点我" onclick="msg()">
submit	定义提交按钮。	<input type="submit" value="提交">
reset	定义重置按钮（重置所有表单值为默认值）。	<input type="reset" value="重置">
image	定义图像作为提交按钮。	<input type="image" src="image01.png" alt="Submit" width="200" height="50">

专栏附录

学习HTML
1、HTML 入门知识点汇总
2、HTML 常用文本格式化标签
3、HTML 常用标签 - 第一集
4、HTML 常用标签 - 第二集