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

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

news 文章来源：https://blog.csdn.net/u013179804/article/details/137059845 2025/5/22 12:57:29

你好，我是云桃桃。

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

苹果Find My产品需求增长迅速，伦茨科技ST17H6x芯片供货充足

苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、Ai…...

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

题目：忐忑楼梯Ⅱ

问题描述&#xff1a; 解题思路&#xff1a; 利用差分&#xff0c;当第一个以后的差分元素都为零时就代表楼梯高度等于第一个楼梯的高度。为什么是第一个呢&#xff0c;因为以第一个为标准的区间操作数最少。 注意点&#xff1a;每次都只能加一或减一&#xff0c;ans开ll 题解&…...

编程日记 2024/3/27 13:12:11

TS函数类型

函数类型表达式 function hello(x: string) {console.log(x) } //greeter函数的参数是一个函数fn&#xff0c;fn也有一个string类型参数&#xff0c;无返回值。 function greeter(fn: (a: string) > void) {fn(hello) } greeter(hello)也可以把定义参数类型的语句单独提取出…...

编程日记 2024/3/27 13:11:10

数据链路层（四）：数据链路层协议

目录 1 数据链路层协议1.1 异步协议1.2 同步协议1.3 局域网数据链路层协议1.4 广域网数据链路层协议 1 数据链路层协议 数据链路层“协议”也称为“规程”&#xff0c;数据链路控制协议也称数据链路控制规程。 数据链路控制协议主要分为异步协议和同步协议两大类。 1.1 异步协…...

编程日记 2024/3/27 13:07:06

#Linux系统编程（孤儿进程及僵尸进程以及wait函数）

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;概述 在 Unix/Linux 系统中&#xff0c;正常情况下&#xff0c;子进程是通过父进程创建的&#xff0c;且两者的运行是相互独立的&#xff…...

编程日记 2024/3/27 13:06:05

苍穹外卖项目-01（开发流程，介绍，开发环境搭建，nginx反向代理，Swagger）

目录 一、软件开发整体介绍 1. 软件开发流程 1 第1阶段: 需求分析 2 第2阶段: 设计 3 第3阶段: 编码 4 第4阶段: 测试 5 第5阶段: 上线运维 2. 角色分工 3. 软件环境 1 开发环境(development) 2 测试环境(testing) 3 生产环境(production) 二、苍穹外卖项目介绍 …...

编程日记 2024/3/27 13:05:03

学习笔记（16）函数防抖和节流

JavaScript 中的函数防抖&#xff08;Debounce&#xff09;和函数节流&#xff08;Throttle&#xff09;是两种优化频繁触发事件回调函数执行的技术&#xff0c;它们主要用于限制函数调用的频率&#xff0c;尤其是在处理高频率触发且响应开销较大的用户交互场景时。 函数防抖 …...

编程日记 2024/3/27 12:58:58

【揭秘】空号检测平台挑选秘籍：让每一分钱都花在“刀刃”上

在数字化营销时代&#xff0c;精准的数据是企业制胜的关键。而空号检测平台作为数据清洗的重要工具&#xff0c;其选择的正确与否直接影响到营销效果与成本效益。如何在众多平台中慧眼识珠&#xff0c;找到最适合自己的“黄金搭档”&#xff1f;今天&#xff0c;就跟着企讯通一…...

编程日记 2024/3/27 12:56:56

Linux源码包安装

目录 一、transmission源码包安装 二、 nginx源码包安装 一、transmission源码包安装 1、下载编译环境所需的软件包依赖 2、下载transmision源码包到用户主目录下 https://github.com/transmission/transmission/releases/download/4.0.5/transmission-4.0.5.tar.xz 3、解压…...

编程日记 2024/3/27 12:54:54

【P1328】[NOIP2014 提高组] 生活大爆炸版石头剪刀布

[NOIP2014 提高组] 生活大爆炸版石头剪刀布 题目背景 NOIP2014 提高组 D1T1 题目描述 石头剪刀布是常见的猜拳游戏&#xff1a;石头胜剪刀&#xff0c;剪刀胜布&#xff0c;布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种…...

编程日记 2024/3/27 12:49:50