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

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

近教学过程中需要实现form表单中的input文本框在用户点击按钮时自动生成新的文本框，在完成数据填写之后通过ajax批量将填写的信息存储到数据库中。每一行文本框对应数据库表中的记录。初始状态如下图：

文本框组合（行）

如上图，前端用户需要借助文本框批量提交数据，每一行有5个文本框，对应后台表中的一条记录。用户可填写数据，完成填写后点击添加，页面自动添加新的一行文本框。效果如下：

动态文本框行添加生成效果

上图给出了点击添加之后的新效果，整个文档HTML代码描述如下：

表单代码

代码描述如上，文本框以label标签为基础进行分组，每5个为一行，所有的input文本框具有相同的class名称。

解决措施：

针对待解决的问题，设计采用JavaScript DOM文档对象模型提供的方法，将表单看成结点，调用附加结点方法实现动态结点的添加。主要涉及使用到的方法函数如下：

(1) getElementById()方法

获取元素（结点）函数，通过使用HTML标记对应的ID标签值获取该元素，返回元素对象，可进一步执行元素的操作。

(2) createElement()方法

创建结点元素方法，该方法用于实现动态创建新结点元素，为下一步添加新结点奠定基础。

(3) setAttribute()方法

该方法主要用于实现结点属性的设置，函数需要提供两个参数，分别为属性名称与属性值。

(4) appendChild()方法

附加结点方法，该方法主要用于将新创建结点附加到指定结点的尾部。

(5) getElementsByClassName()方法

该方法主要用于返回HTML文档中具有相同Class名字的一组元素的集合，并可通过下标访问其中的每一个元素。

为将前端表单文本框组合与数据表中行对应，涉及采用插入数据类insetv实现对每一行文本框数据进行存储。该类设计描述如下：

行数据（记录）类

每一行使用实例化的insetv进行数据存储，针对多行的情况，设计采用数组对每一行进行存储。即数组的每一个元素都是insetv对象。最终实现数组按照数据行对填写信息进行存储。然后自定义两个按钮的onclick消息响应函数，实现存储数据与动态表格生成。其中addRow用于生成新的行，该函数实现代码描述如下：

添加文本框（行）函数

定义insert方法用于获取表单所有文本框填写的信息，并采用数组对获取的信息进行存储，数组每一个元素为insetv对象，对应每一条记录。Insert方法实现描述如下图所示：

插入数据操作函数

本例所有的文本框行都是JS编码实现，因此需要在window对象的onload实践中调用addRows方法实现初始化时生成第一行。实现代码如下：

初始化首行函数

为方便测试演示与展示，我们将获取的数据直接在本页面进行展示，实际测试过程描述如下动图所示：

动态实现效果展示

在插入操作过程我们使用console.log()对输入数据对应数组进行了控制台的输出。输出结果如下：

数据获取存储结果

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，该案例相关文章链接如下：

前端开发-拼图游戏（N数码问题）A*算法智能求解效果展示

前端设计-JavaScript美女拼图游戏开发实例

前端设计-教你如何快速绘制HTML5动画

eb前端HTML/CSS教程大纲

本文总结了HTML和CSS的教程大纲，大家可以保存收藏下来的，这个是一个学习大纲页面方便自己找文章，HTML和CSS是前端的基础，这个是需要学的，有了基础后面的JS、vue框架等等，都容易学。

古语有言，名师出高徒，如果跟弱者学习，那么就会成为弱者，跟强者学习，就会成为强者，学习跟混社会是一样的道理，如果你跟精明的商人学习你就会成为商业高手，如果你跟摆地摊的学习，那你就成为摆地摊的货色，学习前端也是如此，如果你是真心想学好前端，你可以来这个群 153775627，前端大神之路正为你敞开！

HTML/CSS教程大纲

HTML教程：

1、HTML是什么？

2、HTML使用哪个编辑器好

3、HTML基础标签的使用

4、HTML元素标签

5、HTML标题的重要性

6、什么是HTML段落

7、HTML常用的文本格式

8、HTML跳转链接制作

9、HTML头部了解

10、HTML中的CSS是什么？

11、HTML图片调用

12、HTML表格编写方法

13、HTML列表编写方法

14、HTML表单的玩法

15、HTML模块

16、HTML网页布局

17、HTML颜色调用

18、什么是HTML脚本

19、HTML中URL的由来

20、HTML字符实体

21、HTML用过的标签元素

22、HTML总结

CSS教程：

1、什么是CSS

2、CSS语法

3、CSS中的ID和class

4、CSS创建

5、CSS背景

6、CSS文本

7、CSS字体

8、CSS链接

9、CSS列表

10、CSS表格

11、CSS盒子

12、CSS边框

13、CSS中outline属性

14、CSS外边距

15、CSS填充

16、CSS分组和嵌套选择器

17、CSS尺寸

18、CSS中的Display与Visibility

19、CSS中的Positioning定位

20、CSS浮动

21、CSS水平对齐

22、CSS组合选择符

23、CSS伪类(Pseudo-classes)

24、CSS伪元素

25、CSS导航栏

26、CSS下拉框

27、CSS媒体类型

28、CSS属性选择器

29、CSS总结

HTML和CSS主要是做静态页面，做得高深一点，做成动态及特效也是可以做到，主要是看自己怎么运用，在这里发的，只是我最初学前端的一些知识，这也是最基础的知识，算不上有多高深，但是基础要打牢，后面的才会好学，话不多少，就说到这！

在线咨询

上一篇：如何使用HTML写文档标签和文本标签
下一篇：常见六大 Web 安全攻防解析 - 技术头条

您的项目需求

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

整合营销服务商

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

一、表单的组成

二、表单元素

解决措施：

您的项目需求