当前位置：首页 > news >正文

HTML基础：8个常见表单元素的详解

news 2026/3/30 10:19:37

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端程序媛。

后台回复“前端工具”可免费获取开发工具，持续更新。

今天来说说 HTML 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。

用户经常填写的表单有：用户注册表单，登录表单，搜索表单，订阅表单，联系表单，调查问卷表单，评论表单等，这些基本都是通过表单实现的。比如，下图，淘宝登录，就是一个表单。

表单在网页开发中承担着收集用户数据、实现用户互动、提供个性化服务、保障数据安全等重要作用，是构建交互式和功能丰富的网页不可或缺的组成部分。

那我们一起来看看吧。

元素语法

1、<input>：用于接受用户输入的文本、密码、日期等。

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

<label> 元素为输入框提供了标签文本 "用户名："，通过 for 属性与相应的输入框关联，此标签通常和表单元素一同使用。
<input> 元素创建了一个文本框，用户可以在其中输入文本。type="text" 表示文本框类型为文本输入，id 属性用于关联 <label> 元素，name 属性指定了输入框的名称，required 属性表示该输入框为必填项。

而通过设置 type="password" 属性来指定输入类型为密码框，你输入的内容是不可见的，比如，如下代码。

<label for="password">密码：</label> <input type="password" id="password" name="password" required />

2、<textarea>：用于接受多行文本输入。

<label for="comments">评论：</label><br />
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

<label> 元素为文本域提供了标签文本 "评论："。
<textarea> 元素创建了一个文本域，用户可以在其中输入多行文本。rows 和 cols 属性指定了文本域的行数和列数。

3、<select>：用于创建下拉列表框。

<label for="country">国家：</label>
<select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option><option value="japan">日本</option>
</select>

<label> 元素为下拉列表框提供了标签文本 "国家："。
<select> 元素创建了一个下拉列表框，用户可以从预定义的选项中选择一个。name 属性指定了下拉列表框的名称，选项通过 <option> 元素定义，value 属性指定了每个选项的值，显示的文本在 <option> 元素之间。

4、<button>：用于创建按钮。

<button type="button" onclick="alert('Hello!')">点击我</button>

<button> 元素创建了一个按钮，文本内容为 "点击我"。
type="button" 属性指定了按钮的类型为普通按钮，不会触发表单提交。
onclick 属性指定了按钮点击时执行的 JavaScript 代码，这里是弹出一个提示框显示 "Hello!"。

5、<checkbox>：用于创建复选框。

<input type="checkbox" id="coding" name="interests" value="coding" /> <label for="coding">编程</label>

<input> 元素创建了一个复选框，type="checkbox" 表示复选框类型，id 属性用于关联标签文本，name 属性指定了复选框的名称，value 属性指定了复选框选中时提交的值。
<label> 元素为复选框提供了标签文本 "编程"，通过 for 属性与相应的复选框关联。

6、<radio>：用于创建单选按钮。

<input type="radio" id="male" name="gender" value="male" />
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="female">女</label>

<input> 元素创建了两个单选按钮，type="radio" 表示单选按钮类型，id 属性用于关联标签文本，name 属性指定了单选按钮所属的组，value 属性指定了单选按钮选中时提交的值。
<label> 元素为单选按钮提供了标签文本 "男" 和 "女"，通过 for 属性与相应的单选按钮关联。

综合应用

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单示例</title></head><body><h2>用户调查问卷</h2><form action="/xxx" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username" required /><br /><br /><label for="email">邮箱：</label><input type="email" id="email" name="email" required /><br /><br /><label for="password">密码：</label><input type="password" id="password" name="password" required /><br /><br /><label for="confirm_password">确认密码：</label><input type="password" id="confirm_password" name="confirm_password" required /><br /><br /><label for="gender">性别：</label><input type="radio" id="male" name="gender" value="male" /><label for="male">男</label><input type="radio" id="female" name="gender" value="female" /><label for="female">女</label><br /><br /><label for="interests">兴趣：</label><br /><input type="checkbox" id="coding" name="interests" value="coding" /><label for="coding">编程</label><br /><input type="checkbox" id="reading" name="interests" value="reading" /><label for="reading">阅读</label><br /><input type="checkbox" id="music" name="interests" value="music" /><label for="music">音乐</label><br /><br /><label for="comments">评论：</label><br /><textarea id="comments" name="comments" rows="4" cols="50"></textarea><br /><br /><label for="country">国家：</label><select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option><option value="japan">日本</option></select><br /><input type="submit" value="提交" /></form></body>
</html>

代码效果如图：

最后来说说form标签。它是表单元素，用于包裹表单中的各个输入控件。它的 action 属性指定了表单提交的目标地址，method 属性指定了提交的方式为 POST 方法，还有 GET 方法，具体根据实际项目后端交互而定。

ok，以上，本文完。

HTML基础：8个常见表单元素的详解

你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端程序媛。后台回复“前端工具”可免费获取开发工具，持续更新。今天来说说 HTML 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。用户经常填写的表…...

编程日记 2024/3/27 13:56:59

密码学之哈希碰撞和生日悖论

哈希碰撞哈希碰撞是指找到两个不一样的值，它们的哈希值却相同假设哈希函数的取值空间大小为k ，计算次数为n 先算每个值不一样的概率P’ 所以至少两个值相同(即存在哈希碰撞)的概率P为生日悖论假设班里有50个人，求班里至少两个人相同…...

编程日记 2024/3/27 13:47:51

SpringBoot + Redis + Lua = 王炸！

经有一位魔术师，他擅长将Spring Boot和Redis这两个强大的工具结合成一种令人惊叹的组合。他的魔法武器是Redis的Lua脚本。今天，我们将揭开这个魔术师的秘密，探讨如何在Spring Boot项目中使用Lua脚本，以解锁新的可能性和提高性能…...

编程日记 2024/3/27 13:43:46

【Python】搭建 Python 环境

目录一.安装 Python二.安装 PyCharm 要想能够进行 Python 开发，就需要搭建好 Python 的环境需要安装的环境主要是两个部分： 运行环境: Python开发环境: PyCharm 一.安装 Python (1) 找到官方网站 (2) 找到下载页面选择 “Download for Windows”…...

编程日记 2024/3/27 13:42:45

NVIDIA 发布 Project GR00T 人形机器人基础模型和 Isaac 机器人平台重大更新

系列文章目录前言 Isaac 机器人平台现可为开发者提供全新的机器人训练仿真器、Jetson Thor 机器人计算机、生成式 AI 基础模型和由 CUDA 加速的感知和操作库。 Project GR00T 是一种多模态人形机器人通用基础模型，作为机器人的大脑，使它们能够学习技能…...

编程日记 2024/3/27 13:38:41

05.循环

格式： 05.循环 01.循环语句02.while循环1.1while循环1.2.死循环1.3 while循环应用计算123。。。100的和 03.for循环（迭代循环）3.1 基本格式3.2 range() 04.break和continue关键字4.1 break4.2 continue 01.循环语句 02.while循环 03.for循环…...

编程日记 2024/3/27 13:37:40

Git 分布式版本控制系统基本概念和操作命令

目录 Git 基本概念功能特点工作流程操作命令新建代码库配置增删文件代码提交分支标签查看信息远程同步撤销其他小结 Git Git 是一个开源的分布式版本控制系统，用于跟踪文件的变更历史。它最初由 Linux Torvalds 设计，用于…...

编程日记 2024/3/27 13:36:38

爬取地址https://www.stats.gov.cn/sj/tjbz/tjyqhdmhcxhfdm/2023/ import re import requests import pandas as pd import warnings warnings.filterwarnings("ignore") import time from lxml import etree import pymysql t ,urls ,names [],[],[] INDEX_URL &…...

编程日记 2024/3/27 13:35:37

放弃 Rust 选择 Zig，Xata 团队推出 pgzx —— 计划使用 Zig 开发基于 PG 的分布式数据库

Summary Xata 公司在基于 PostgresSQL 开发自己的分布式数据库，出于 Zig 和 C 语言以及 PostgreSQL 的 API 有更好的互操作性的考虑，他们选择了 Zig 而非当红炸子鸡语言 Rust。他们的博客文章中对 pgzx 进行了介绍。让我们来看下他们对 Zig 和 Rust 语言…...

编程日记 2024/3/27 13:34:36

线性数据结构----(数组,链表,栈,队列，哈希表)

线性数据结构数组链表栈使用场景队列应用场景哈希表特点哈希函数，哈希值，哈希冲突键值对 Entry 开放寻址法和拉链法参考文档数组数组(Array) 是一种很常见的数据结构。由相同类型的元素组成，并且是使用一块连续的内存来存储的。在数组…...

编程日记 2024/3/27 13:30:30

lvgl 窗口 windows lv_port_win_visual_studio 版本已解决

不知道的东西，不知道lvgl窗口。一切从未知开始 lv_port_win_visual_studio 主分支对应的分支 v7版本更新git submodule update --init --recursive同步 lvgl代码随后打开 visualSudio 打开.sln 文件编译 release模式允许一切正常代码部分...

编程日记 2024/3/27 13:29:29

【多模态融合】SuperFusion 激光雷达与相机多层次融合远距离高清地图预测 ICRA 2024

前言本文介绍激光雷达与相机进行多层次融合，包括数据级融合、特征级融合和BEV级融合。融合后的BEV特征可以支持不同的任务头，包括语义分割、实例编码和方向预测，最后进行后处理生成高清地图预测，它是来自ICRA 2024的。会讲解…...

编程日记 2024/3/27 13:26:26

富格林：梳理正规本领远离虚假套路

富格林悉知，黄金投资者在从事黄金交易之前，必须先了解黄金交易的风险。因为投资虽然能给你带来一定的收益，但往往也有亏损的风险。在进场后投资者可通过正规经验指导有效避免因为虚假诱导带来的异常亏损，增加安全做单盈利机会。以…...

编程日记 2024/3/27 13:24:25

fastadmin学习01-windows下安装部署

下载源代码官网安装解压，然后使用phpstorm打开修改配置文件创建数据库 -- drop database fastadmin01; create database fastadmin01;这样fastadmin就部署好了访问主页也能看到前台页面...

编程日记 2024/3/27 13:23:23

JAVA学习-网络编程.TCP

TCP（Transmission Control Protocol）是一种面向连接的、可靠的传输协议，它在Java网络编程中被广泛应用。TCP通信可以确保数据的可靠传输，并且具有一定的顺序性。一、Java中实现TCP通信主要有以下几种方式： 1. Socke…...

编程日记 2024/3/27 13:22:22

[Android]创建Google Play内购aab白包

开发时需要调试Google内购，需要先往Google商店传一个白包上去。确定包名，然后进行内购产品创建。 1.创建一个空项目，填写正式名称和正式包名。如果你只是为一个测试开发账号打白包，然后进行内购测试，这时包名随便写…...

编程日记 2024/3/27 13:21:21

大数据基础：Linux基础详解

课程介绍本课程主要通过对linux基础课程的详细讲解，让大家熟练虚拟机的安装使用，Linux系统的安装配置，学习掌握linux系统常用命令的使用，常用的软件安装方法，制作快照，克隆，完成免密登录&…...

编程日记 2024/3/27 13:20:20

unity中鼠标按下移动端与pc端的位置

if (Input.GetMouseButtonDown(0)) { Vector2 V Input.touchCount > 0 ? Input.GetTouch(0).position : new Vector2(Input.mousePosition.x, Input.mousePosition.y); } 射线检测 if (Input.GetMouseButtonDown(0)) { …...

编程日记 2024/3/27 13:19:19

增强现实（AR）在广告中的力量

The Power of AR in Advertising 写在前面增强现实（AR -Augmented Reality）是指借助软件、应用程序和智能手机、平板电脑或耳机等设备，为日常生活添加视觉和音频元素的技术。如今，品牌和广告商可以在营销活动中使用AR&#xff0…...

编程日记 2024/3/27 13:18:17

日志收集监控告警平台的选型思考

目前市面上比较常见的日志收集系统有：ELK，Grafana Loki，OpenObserve，SigNoz，Graylog ，Syslog-ng，Highlight，接下来我会对这几个一一做分析。 1. ELK ELK 是 Elasticsearch、Logsta…...

编程日记 2024/3/27 13:17:16

快速上手腾讯混元OCR：部署过程常见错误及解决方法合集

快速上手腾讯混元OCR：部署过程常见错误及解决方法合集 1. 认识腾讯混元OCR 腾讯混元OCR（HunyuanOCR）是一款基于腾讯混元原生多模态架构的端到端OCR专家模型。作为一款轻量级但功能强大的文字识别工具，它仅用1B参数就实现了多项业…...

编程新知 2026/3/30 10:14:03

如何彻底解决Zotero-GPT集成中的AI调用故障：从诊断到优化的完整技术指南

如何彻底解决Zotero-GPT集成中的AI调用故障：从诊断到优化的完整技术指南【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt Zotero-GPT项目作为文献管理工具与大型语言模型的深度集成方案，为…...

编程新知 2026/3/30 10:12:03