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

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

news 2026/2/6 9:58:12

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 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个常见表单元素的详解

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

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

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

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

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

SpringBoot + Redis + Lua = 王炸！

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

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

【Python】搭建 Python 环境

目 录 一.安装 Python二.安装 PyCharm 要想能够进行 Python 开发&#xff0c;就需要搭建好 Python 的环境 需要安装的环境主要是两个部分&#xff1a; 运行环境: 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 是一种多模态人形机器人通用基础模型&#xff0c;作为机器人的大脑&#xff0c;使它们能够学习技能…...

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

05.循环

格式&#xff1a; 05.循环 01.循环语句02.while循环1.1while循环1.2.死循环1.3 while循环应用 计算123。。。100的和 03.for循环&#xff08;迭代循环&#xff09;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 是一个开源的分布式版本控制系统&#xff0c;用于跟踪文件的变更历史。它最初由 Linux Torvalds 设计&#xff0c;用于…...

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

Python3爬取2023省市区

爬取地址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 开发自己的分布式数据库&#xff0c;出于 Zig 和 C 语言以及 PostgreSQL 的 API 有更好的互操作性的考虑&#xff0c;他们选择了 Zig 而非当红炸子鸡语言 Rust。他们的博客文章中对 pgzx 进行了介绍。让我们来看下他们对 Zig 和 Rust 语言…...

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

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

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

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

lvgl 窗口 windows lv_port_win_visual_studio 版本 已解决

不知道的东西&#xff0c;不知道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

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

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

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

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

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

fastadmin学习01-windows下安装部署

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

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

JAVA学习-网络编程.TCP

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

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

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

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

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

大数据基础：Linux基础详解

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

编程日记 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 写在前面 增强现实&#xff08;AR -Augmented Reality&#xff09;是指借助软件、应用程序和智能手机、平板电脑或耳机等设备&#xff0c;为日常生活添加视觉和音频元素的技术。如今&#xff0c;品牌和广告商可以在营销活动中使用AR&#xff0…...

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

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

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程新知 2026/1/26 21:49:59

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起&#xff0c;为了跨网段推流&#xff0c;千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...

编程新知 2026/2/1 12:22:07

【Vue】scoped+组件通信+props校验

【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性&#xff0c; 令样式只作用于当前组件的标签 作用&#xff1a;防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...

编程新知 2026/1/23 14:36:52

ubuntu清理垃圾

windows和ubuntu 双系统&#xff0c;ubuntu 150GB&#xff0c;开发用&#xff0c;基本不装太多软件。但是磁盘基本用完。 1、查看home目录 sudo du -h -d 1 $HOME | grep -v K 上面的命令查看$HOME一级目录大小&#xff0c;发现 .cache 有26GB&#xff0c;.local 有几个GB&am…...

编程新知 2025/12/7 7:46:22

信息收集:从图像元数据(隐藏信息收集)到用户身份的揭秘 --- 7000

目录 &#x1f310; 访问Web服务 &#x1f4bb; 分析源代码 ⬇️ 下载图片并保留元数据 &#x1f50d; 提取元数据&#xff08;重点&#xff09; &#x1f464; 生成用户名列表 &#x1f6e0;️ 技术原理 图片元数据&#xff08;EXIF 数据&#xff09; Username-Anarch…...

编程新知 2026/2/5 9:28:08