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…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别：不同层级的事件处理 方…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...