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

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

news 2026/3/30 9:43:45

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 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

终极Node.js无头浏览器测试指南：Zombie.js与Mocha集成实战

终极Node.js无头浏览器测试指南&#xff1a;Zombie.js与Mocha集成实战 【免费下载链接】zombie Insanely fast, full-stack, headless browser testing using node.js 项目地址: https://gitcode.com/gh_mirrors/zo/zombie 在当今快速发展的Web开发领域&#xff0c;Zomb…...

编程新知 2026/3/30 8:43:30

Unity游戏模组革命：MelonLoader新手10分钟完全指南

Unity游戏模组革命&#xff1a;MelonLoader新手10分钟完全指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 你是否想过为喜爱…...

编程新知 2026/3/30 8:35:27

彻底解决Win10中HP Hotkey UWP Service内存占用过高的终极指南

1. 什么是HP Hotkey UWP Service&#xff1f; HP Hotkey UWP Service是惠普笔记本预装的一个后台服务程序&#xff0c;主要负责管理键盘上的功能快捷键。比如调节屏幕亮度、音量大小、切换飞行模式等操作都需要这个服务支持。它属于通用Windows平台&#xff08;UWP&#xff09;…...

编程新知 2026/3/30 7:33:04

Waymo Open Dataset Docker部署：环境配置与容器化最佳实践

Waymo Open Dataset Docker部署&#xff1a;环境配置与容器化最佳实践 【免费下载链接】waymo-open-dataset Waymo Open Dataset 项目地址: https://gitcode.com/gh_mirrors/wa/waymo-open-dataset Waymo Open Dataset是自动驾驶领域的重要开源项目&#xff0c;提供了丰…...

编程新知 2026/3/30 6:36:52

避坑指南：vsftpd服务重启后仍报530？检查这5个隐藏配置项

避坑指南&#xff1a;vsftpd服务重启后仍报530&#xff1f;检查这5个隐藏配置项 当你已经按照常规流程检查了vsftpd服务状态、用户列表和基础配置文件&#xff0c;却依然遭遇"530 Permission denied"的顽固错误时&#xff0c;问题往往隐藏在那些容易被忽略的配置细节…...

编程新知 2026/3/30 6:02:36

IPD实战：如何用DCP决策点避免产品开发中的‘死亡陷阱’（附真实案例）

IPD实战&#xff1a;如何用DCP决策点避免产品开发中的"死亡陷阱" 在硅谷某科技公司的产品复盘会上&#xff0c;CTO盯着投影仪上的数据图表沉默良久——这个投入1200万美元、历时18个月的智能硬件项目&#xff0c;最终因为电池续航不达标而被迫终止。更令人痛心的是&a…...

编程新知 2026/3/30 4:29:45

Qwen3字幕生成工具5分钟快速上手：零基础制作精准SRT字幕

Qwen3字幕生成工具5分钟快速上手&#xff1a;零基础制作精准SRT字幕 1. 工具简介与核心优势 1.1 什么是Qwen3字幕生成工具 Qwen3字幕生成工具是一款基于阿里云通义千问双模型的本地智能字幕生成解决方案。它由两个核心AI模型组成&#xff1a; Qwen3-ASR-1.7B&#xff1a;负…...

编程新知 2026/3/30 4:17:27

从WHL文件到集成开发：Windows系统下PySide2的完整部署指南

1. 为什么选择PySide2开发Windows GUI应用 用Python开发图形界面程序有很多选择&#xff0c;但PySide2绝对是Windows平台下最值得推荐的工具之一。作为Qt官方绑定的Python库&#xff0c;PySide2不仅功能强大&#xff0c;还能免费商用。我最早接触PySide2是在一个工业控制项目里…...

编程新知 2026/3/30 3:43:06

告别Moom！用Hammerspoon实现Mac窗口精准控制（附完整快捷键表+配置文件）

用Hammerspoon打造Mac高效工作流&#xff1a;从窗口管理到自动化脚本 每次看到同事花十几秒拖动窗口调整大小&#xff0c;或者在不同显示器间来回切换应用时&#xff0c;我总忍不住想分享这个改变我工作效率的神器。Hammerspoon——这个完全免费的开源工具&#xff0c;让我彻底…...

编程新知 2026/3/30 2:16:30

STM32串口环形队列实现与优化

## 1. STM32串口环形队列实现方案### 1.1 环形队列数据结构设计环形队列&#xff08;Ring Buffer&#xff09;是嵌入式系统中处理串口数据流的经典方案&#xff0c;其核心数据结构定义如下&#xff1a;c #define RING_BUFF_SIZE 256 // 根据实际需求调整缓冲区大小typedef str…...

编程新知 2026/3/30 1:48:18