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…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
GitFlow 工作模式（详解）
今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...