HTML基础：8个常见表单元素的详解
你好，我是云桃桃。
一个希望帮助更多朋友快速入门 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 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。 用户经常填写的表…...
密码学之哈希碰撞和生日悖论
哈希碰撞 哈希碰撞是指找到两个不一样的值，它们的哈希值却相同 假设哈希函数的取值空间大小为k ，计算次数为n 先算每个值不一样的概率P’ 所以至少两个值相同(即存在哈希碰撞)的概率P为 生日悖论 假设班里有50个人，求班里至少两个人相同…...
SpringBoot + Redis + Lua = 王炸！
经有一位魔术师，他擅长将Spring Boot和Redis这两个强大的工具结合成一种令人惊叹的组合。他的魔法武器是Redis的Lua脚本。 今天，我们将揭开这个魔术师的秘密，探讨如何在Spring Boot项目中使用Lua脚本，以解锁新的可能性和提高性能…...
【Python】搭建 Python 环境
目 录 一.安装 Python二.安装 PyCharm 要想能够进行 Python 开发，就需要搭建好 Python 的环境 需要安装的环境主要是两个部分： 运行环境: Python开发环境: PyCharm 一.安装 Python (1) 找到官方网站 (2) 找到下载页面 选择 “Download for Windows”…...
NVIDIA 发布 Project GR00T 人形机器人基础模型和 Isaac 机器人平台重大更新
系列文章目录 前言 Isaac 机器人平台现可为开发者提供全新的机器人训练仿真器、Jetson Thor 机器人计算机、生成式 AI 基础模型和由 CUDA 加速的感知和操作库。 Project GR00T 是一种多模态人形机器人通用基础模型，作为机器人的大脑，使它们能够学习技能…...
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循环…...
Git 分布式版本控制系统基本概念和操作命令
目录 Git 基本概念 功能特点 工作流程 操作命令 新建代码库 配置 增删文件 代码提交 分支 标签 查看信息 远程同步 撤销 其他 小结 Git Git 是一个开源的分布式版本控制系统，用于跟踪文件的变更历史。它最初由 Linux Torvalds 设计，用于…...
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 &…...
放弃 Rust 选择 Zig，Xata 团队推出 pgzx —— 计划使用 Zig 开发基于 PG 的分布式数据库
Summary Xata 公司在基于 PostgresSQL 开发自己的分布式数据库，出于 Zig 和 C 语言以及 PostgreSQL 的 API 有更好的互操作性的考虑，他们选择了 Zig 而非当红炸子鸡语言 Rust。他们的博客文章中对 pgzx 进行了介绍。让我们来看下他们对 Zig 和 Rust 语言…...
线性数据结构----(数组,链表,栈,队列，哈希表)
线性数据结构 数组链表栈使用场景 队列应用场景 哈希表特点哈希函数，哈希值，哈希冲突键值对 Entry 开放寻址法和拉链法 参考文档 数组 数组(Array) 是一种很常见的数据结构。由相同类型的元素组成，并且是使用一块连续的内存来存储的。 在数组…...
lvgl 窗口 windows lv_port_win_visual_studio 版本 已解决
不知道的东西，不知道lvgl窗口。一切从未知开始 lv_port_win_visual_studio 主分支 对应的分支 v7版本更新git submodule update --init --recursive同步 lvgl代码随后打开 visualSudio 打开.sln 文件 编译 release模式 允许 一切正常代码部分...
【多模态融合】SuperFusion 激光雷达与相机多层次融合 远距离高清地图预测 ICRA 2024
前言 本文介绍激光雷达与相机进行多层次融合，包括数据级融合、特征级融合和BEV级融合。 融合后的BEV特征可以支持不同的任务头，包括语义分割、实例编码和方向预测，最后进行后处理生成高清地图预测，它是来自ICRA 2024的。 会讲解…...
富格林：梳理正规本领远离虚假套路
富格林悉知，黄金投资者在从事黄金交易之前，必须先了解黄金交易的风险。因为投资虽然能给你带来一定的收益，但往往也有亏损的风险。在进场后投资者可通过正规经验指导有效避免因为虚假诱导带来的异常亏损，增加安全做单盈利机会。以…...
fastadmin学习01-windows下安装部署
下载源代码 官网 安装 解压，然后使用phpstorm打开 修改配置文件 创建数据库 -- drop database fastadmin01; create database fastadmin01;这样fastadmin就部署好了 访问主页也能看到前台页面...
JAVA学习-网络编程.TCP
TCP（Transmission Control Protocol）是一种面向连接的、可靠的传输协议，它在Java网络编程中被广泛应用。TCP通信可以确保数据的可靠传输，并且具有一定的顺序性。 一、Java中实现TCP通信主要有以下几种方式： 1. Socke…...
[Android]创建Google Play内购aab白包
开发时需要调试Google内购，需要先往Google商店传一个白包上去。确定包名，然后进行内购产品创建。 1.创建一个空项目，填写正式名称和正式包名。 如果你只是为一个测试开发账号打白包，然后进行内购测试，这时包名随便写…...
大数据基础：Linux基础详解
课程介绍 本课程主要通过对linux基础课程的详细讲解，让大家熟练虚拟机的安装使用，Linux系统的安装配置，学习掌握linux系统常用命令的使用，常用的软件安装方法，制作快照，克隆，完成免密登录&…...
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)) { …...
增强现实（AR）在广告中的力量
The Power of AR in Advertising 写在前面 增强现实（AR -Augmented Reality）是指借助软件、应用程序和智能手机、平板电脑或耳机等设备，为日常生活添加视觉和音频元素的技术。如今，品牌和广告商可以在营销活动中使用AR࿰…...
日志收集监控告警平台的选型思考
目前市面上比较常见的日志收集系统有：ELK，Grafana Loki，OpenObserve，SigNoz，Graylog ，Syslog-ng，Highlight，接下来我会对这几个一一做分析。 1. ELK ELK 是 Elasticsearch、Logsta…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...