HTML表单标签详解：如何用HTML标签打造互动网页？

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

世界微尘里

吾宁爱与憎

- 2024.03.18 -

在互联网的世界中，表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物，表单都扮演着至关重要的角色。在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签。

HTML提供了一系列的表单标签，使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签，了解它们的作用以及如何使用它们来构建一个有效的用户界面。

一、表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成。

表单域

表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

表单控件

这些是用户与表单交云的各种元素，如<input>（用于创建不同类型的输入字段）、<textarea>（用于多行文本输入）、<button>（用于提交表单或执行其他操作）、<select>和<option>（用于创建下拉列表）等。

提示信息

这些信息通常通过<label>标签提供，它为表单控件提供了描述性文本，有助于提高可访问性。<label>标签通常与<input>标签一起使用，并且可以通过for属性与<input>标签的id属性关联起来。

这三个部分共同构成了一个完整的HTML表单，使得用户可以输入数据，并通过点击提交按钮将这些数据发送到Web服务器进行处理。

二、表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。下面就来介绍HTML中常用的表单元素。

1、<form>标签：基础容器

作用：定义一个表单区域，用户可以在其中输入数据进行提交。

<form action="submit.php" method="post">

其中action属性指定了数据提交到的服务器端脚本地址，method属性定义了数据提交的方式（通常为GET或POST）。

2、<input>标签：数据输入

<input>标签是一个单标签，用于收集用户信息。允许用户输入文本、数字、密码等。

<input type="text" name="username" placeholder="请输入用户名">

type属性决定了输入类型，name属性定义了数据的键名，placeholder属性提供了输入框内的提示文本。

<input>标签的属性

下面举个例子来说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用户名：<input type="text" value="请输入用户名"><br>
密码：<input type="password"><br>
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>
</body>
</html>

3、<label>标签：关联说明

它与输入字段如文本框、单选按钮、复选框等关联起来，以改善网页的可用性和可访问性。<label>标签有两种常见的用法：

1）包裹方式：

在这种用法中，<label>标签直接包裹住关联的表单元素。例如：

<label>用户名：<input type="text" name="username"></label>

这样做的好处是用户点击标签文本时，关联的输入字段会自动获取焦点，从而提供更好的用户体验。

2）使用for属性关联：

在这种用法中，<label>标签通过for属性与目标表单元素建立关联，for属性的值应与目标元素的id属性相匹配。例如：

<label for="username">用户名：</label><input type="text" id="username" name="username">

这样做的优势是单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。

4、<select>和<option>标签：下拉选择

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

注意点：

<select>中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选中项

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>标签：多行文本输入

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签。

允许用户输入多行文本。

<textarea name="message" rows="5" cols="30">默认文本</textarea>

rows和cols属性分别定义了文本区域的行数和列数。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>

6、<button>标签：按钮控件

创建一个可点击的按钮，通常用于提交或重置表单。它允许用户放置文本或其他内联元素（如<i>、<b>、<strong>、<br>、<img>等），这使得它比普通的<input type="button">具有更丰富的内容和更强的功能。

<button type="submit">提交</button>

type属性为submit时表示这是一个提交按钮。

7、<fieldset>和<legend>标签：分组和标题

通常用于在HTML表单中对相关元素进行分组，并提供一个标题来描述这个组的内容。

<fieldset>标签：该标签用于在表单中创建一组相关的表单控件。它可以将表单元素逻辑分组，并且通常在视觉上通过围绕这些元素绘制一个边框来区分不同的组。这种分组有助于提高表单的可读性和易用性。

<legend>标签：它总是与<fieldset>标签一起使用。<legend>标签定义了<fieldset>元素的标题，这个标题通常会出现在浏览器渲染的字段集的边框上方。<legend>标签使得用户更容易理解每个分组的目的和内容。

代码示例：

<form>
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音乐</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">运动</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">阅读</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在这个示例中，我们使用了两个<fieldset>元素来组织表单的不同部分。第一个<fieldset>包含姓名和邮箱字段，而第二个<fieldset>包含三个复选框，用于选择用户的兴趣爱好。每个<fieldset>都有一个<legend>元素，用于提供标题。这样，用户在填写表单时可以更清晰地了解每个部分的内容。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

8、<datalist>标签：预定义选项列表

<datalist>标签是HTML5中引入的一个新元素，它允许开发者为输入字段提供预定义的选项列表。当用户在输入字段中输入时，浏览器会显示一个下拉菜单，其中包含与用户输入匹配的预定义选项。

使用<datalist>标签可以提供更好的用户体验，因为它可以帮助用户选择正确的选项，而不必手动输入整个选项。此外，<datalist>还可以与<input>元素的list属性结合使用，以将预定义的选项列表与特定的输入字段关联起来。

下面是一个使用<datalist>标签的代码示例：

<form>
<label for="color">选择你喜欢的颜色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="红色">
<option value="蓝色">
<option value="绿色">
<option value="黄色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>标签：计算结果输出

<output>标签是HTML5中引入的一个新元素，它用于显示计算结果或输出。该标签通常与JavaScript代码结合使用，通过将计算结果赋值给<output>元素的value属性来显示结果。

<output>标签可以用于各种类型的计算和输出，例如数学运算、字符串处理、数组操作等。它可以与<input>元素一起使用，以实时更新计算结果。

下面是一个使用<output>标签的示例：

<form>
<label for="num1">数字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">数字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">结果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>标签：任务进度展示

<progress>标签是HTML5中用于表示任务完成进度的一个新元素。它通过value属性和max属性来表示进度，其中value表示当前完成的值，而max定义任务的总量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我们创建了一个名为"fileDownload"的<progress>元素，并设置了初始值为0，最大值为100。我们还添加了一个按钮，当用户点击该按钮时，会触发名为"startDownload"的JavaScript函数。这个函数模拟了一个文件下载过程，通过循环逐步增加<progress>元素的value属性值，从而显示下载进度。

11、<meter>标签：度量衡指示器

<meter>标签在HTML中用于表示度量衡指示器，它定义了一个已知范围内的标量测量值或分数值，通常用于显示磁盘使用情况、查询结果的相关性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>内存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在这个示例中，我们使用了两个<meter>标签来分别显示CPU和内存的使用率。value属性表示当前的测量值，min和max属性分别定义了测量范围的最小值和最大值。通过这些属性，<meter>标签能够清晰地显示出资源的使用情况。

需要注意的是，<meter>标签不应该用来表示进度条，对于进度条的表示，应该使用<progress>标签。

12、<details>和<summary>标签：详细信息展示

<details>和<summary>标签是HTML5中新增的两个元素，用于创建可折叠的详细信息区域。

<details>标签定义了一个可以展开或折叠的容器，其中包含一些额外的信息。它通常与<summary>标签一起使用，<summary>标签定义了<details>元素的标题，当用户点击该标题时，<details>元素的内容会展开或折叠。

示例：

<details>
<summary>点击查看详细信息</summary>
<p>这里是一些额外的信息，用户可以点击标题来展开或折叠这些信息。</p>
</details>

在这个示例中，我们使用了<details>标签来创建一个可折叠的容器，并在其中添加了一个<summary>标签作为标题。当用户点击这个标题时，容器的内容会展开或折叠。

总结：

HTML表单标签是构建动态网页的基石，它们使得用户能够与网站进行有效的交互。

通过合理地使用这些标签，开发者可以创建出既美观又功能强大的表单，从而提升用户体验和网站的可用性。所以说，掌握这些标签的使用，对于前端开发者来说是至关重要的。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

今天，前端工程师已经成为研发体系中的重要岗位之一。

可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。

最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。

今天我们就带来一门适合前端初学者的课程，可以带你从零入门 HTML、CSS、JS、React 等前端核心技能，并创建一个待办事项的管理应用～

项目效果：

课程从最基础的 HTML/ CSS/JS 讲起，还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深，层层递进，如果你想快速上手 React 框架，这门课会是你非常好的选择。

访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。

以下是课程第一节的内容 —— 「HTML 简介」，带你快速入门HTML，让我们一起进入前端的大门看看吧：

「HTML 简介」

实验介绍

本实验是对 HTML 进行学习，并且较详细的说明了 Web 是如何工作的。主要内容有：HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习，可以构建简单的 HTML 网页。

知识点

什么是 HTML
Web 是如何工作的
文档结构
常见标签
表格
表单
有序列表和无序列表

什么是 HTML

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

Web 是如何工作的

下面我们来演示用户是如何看到一个网页显示的。

具体来讲：

当用户通过浏览器输入网址后，浏览器先在 DNS 服务器上找到它，然后对它进行解析。
解析完成后，浏览器给服务器发送 http 请求。
服务器同意这个请求，就把 HTML 文件发送回浏览器。
浏览器拿到 HTML 文件，对其解析执行，显示在用户屏幕上。

HTML 文档结构

首先我们来看一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

这是一个 HTML 的基本骨架，我们将逐步介绍这些是什么意思。

文档类型声明

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。

html 标签

html 标签即根元素，此处表示文档的开始，该标签包含两个子标签：head 和 body。

head 元素

head 标签下面所包含的标签由 title、meta、link、style、script 等（后面会讲到）。

title 标签

作用：设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个，必须有一个 title 标签。

meta 标签

<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。

body 标签

body 标签定义文档的主体，也就是我们的主要内容（比如文本、超链接、图像、表格和列表等）。

常见标签

1.h 系类标签

h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

为了大家能更有效的学习，请使用实验楼的环境。首先我们新建一个文件，点击 File，然后 New File，命名为 index.html。

然后输入上面的代码。

让我们来看一下运行效果吧。鼠标右键 index.html 文件，点击 Open With，然后点击 Preview。

最终效果为：

2.p 标签

p 标签是我们的文本标签，p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

<p>我是第一段文字，实验楼，做实验，学编程</p>
<p>我是第二段文字，实验楼，做实验，学编程</p>

3. 图片标签

HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 标签

<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

<a href="https://www.shiyanlou.com/">实验楼</a>

点击文字：

跳转到指定网页：

篇幅有限，后续的课程内容，请在“实验楼”边敲代码边学习～

访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”，就能找到课程，继续学习啦！

景说明

假设需要劫持http响应并在html页面中注入一段js代码后再传回浏览器，实现在浏览器出现一个弹框消息提醒。

由于原始html页面编码格式存在UTF-8、GBK等多种编码格式，如果注入的js包含中文消息的话，那么在UTF-8或GBK编码的页面就会有一个出现乱码。有没有办法做到不管是针对GBK、UTF-8编码的页面都能做到正常显示而不会出现乱码哪？

产生乱码的原因

首先来分析一下产生乱码的原因，我们在浏览器看到的信息都是通过图形学手段在显示器上呈现出来的，而实际保存在计算机硬件上的都是0和1（因为计算机实现是基于二进制），那么计算机要显示、传递信息就需要依靠一套规则把一串串的0和1识别为正确的字符，这就是编码。

例如01000001在ASCII编码规则下对应字母A。相同的0/1串，不同的编码解析出的字符一般是不同的，因此如果html页面按照UTF-8的编码解析正常，那么按照GBK的编码解析就会是乱码了。根据上面的示意图，假设注入的js代码为utf-8编码格式，而原始html编码格式也为UTF-8编码格式，那么最终注入这部分中的中文就能正常显示，但是如果原始html为GBK编码，那注入的这部分js代码的中文就会显示乱码。

解决办法

有一种unicode统一编码字符集，目标是把所有文字、字符统一编码，也就是一串0/1组合在unicode字符集下对应的字符是唯一的，不会存在歧义。而js是支持解析unicode字符的，那么就可以在注入js中把要显示的消息统一转换为unicode编码，浏览器端去解析这个unicode编码，这样不管原始html是UTF-8还是GBK，都能正常显示中文。

原始注入js代码关于中文字符的部分

// utf-8编码格式
let message = "中文";

解决乱码的注入js代码关于中文字符的部分

// utf-8编码格式
let message = "\\u4e2d\\u6587";  // 这个编码对应上面的message"中文"

注意：

注入的js代码仍然是utf-8编码格式，只是消息内容转换为unicode编码的形式；
unicode中0x4e2d表示的0/1串对应汉字"中"，0x6587对应的0/1串对应汉字"文";
message其实也不是真正的unicode编码，它只是普通的字符串，只是使用了unicode对应的码点（也就是二进制对应的数值），因为可以利用这个码点在浏览器中恢复出正确的字符，事实上unicode字符集并没有规定具体的编码格式。

在线咨询

上一篇：入门｜15分钟用JS做一个简易计算器
下一篇：三步完成 Oxygen Webhelp HTML 字体定制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商