通过学习，我们的人生被赋予了更多的选择，创造了更多的可能性。
文章目录
- 前言
- 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 | 当表单提交时向何处发送表单数据。 |
| method | 发送表单数据的 HTTP 方法。 取值：get / post |
| target | 规定在何处打开 action URL。 取值：_blank / _self / _parent / _top |
- 设置 action 属性：
- 绝对 URL - 指向另一个网站，比如：
action="http://www.example.com/example.htm"- 相对 URL - 指向网站内的一个文件，比如：
action="example.htm"
- 设置 method 属性：
- method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。
- 表单数据可被作为 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 类型，用法也不同：
- 对于 “button”、“reset”、“submit” 类型，value 属性定义
<input>元素按钮上的文本 ； - 对于 “text”、“password”、“hidden” 类型，value 属性定义
<input>元素输入字段的初始（默认）值； - 对于 “checkbox”、“radio”、“image” 类型，value 属性定义与
<input>元素相关的值，当提交表单时该值会发送到表单的 action URL； - value 属性对于 “checkbox” 和 “radio” 类型是必需的；
- 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"> ，用户是看不到的 |  |
| 用于 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 常用标签 - 第二集
