5、HTML 常用标签 - 第三集

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

文章目录

• 前言
• 1. 表单域 form
• • 1.1 标签描述
  • 1.2 示例代码
  • 1.3 运行截图
• 2. 表单元素 input
• • 2.1 常用“输入框”类型
  • 2.2 常用“选择框”类型
  • 2.3 常用“按钮”类型
• 专栏附录

前言

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

1. 表单域 form

1.1 标签描述

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

• 设置 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 的区别：

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> 标签的重要属性：

以下将分类列举各类型 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 常用标签 - 第二集