HTML 表单和输入标签详解

HTML 表单是网页与用户交互的重要工具,它允许用户输入数据并将其提交到服务器。表单在网页中的应用非常广泛,例如登录、注册、搜索、评论等功能都离不开表单。本文将详细介绍 HTML 表单及其相关标签的使用方法,帮助你全面掌握表单的设计与实现。


表单的基本结构

HTML 表单使用 <form> 标签定义,表单中可以包含各种输入元素,例如文本框、密码框、单选按钮、复选框、下拉列表等。表单的基本结构如下:

<form action="/submit" method="post"><!-- 表单内容 -->
</form>
  • action:指定表单提交的目标地址(服务器端脚本的 URL)。
  • method:指定表单提交的 HTTP 方法,常用的有 GETPOST

表单常用标签

1. <form>:定义表单

<form> 标签用于创建表单,所有表单元素都需要放在 <form> 标签内。

<form action="/submit" method="post"><!-- 表单内容 -->
</form>

2. <input>:定义输入域

<input> 是表单中最常用的标签,用于创建各种输入控件。通过 type 属性可以定义不同的输入类型。

常见的输入类型
  • 文本输入type="text"
  • 密码输入type="password"
  • 单选按钮type="radio"
  • 复选框type="checkbox"
  • 提交按钮type="submit"
  • 重置按钮type="reset"
  • 文件上传type="file"
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">

在这里插入图片描述

3. <textarea>:定义文本域

<textarea> 用于创建多行文本输入框,用户可以输入多行文本。

<textarea name="message" rows="5" cols="30">请输入内容...</textarea>

在这里插入图片描述

  • rows:定义文本域的行数。
  • cols:定义文本域的列数。

4. <label>:定义输入标签

<label> 标签用于为表单元素添加标签,提升用户体验。通过 for 属性将标签与输入元素关联。

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

在这里插入图片描述

5. <fieldset><legend>:分组表单元素

<fieldset> 用于将一组相关的表单元素分组,并用边框包围。<legend> 用于定义分组的标题。

<fieldset><legend>用户信息</legend><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email">
</fieldset>

在这里插入图片描述

6. <select><option>:定义下拉列表

<select> 用于创建下拉列表,<option> 用于定义列表中的选项。

<label for="country">选择国家:</label>
<select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="japan">日本</option>
</select>

在这里插入图片描述

使用 <optgroup> 分组选项

<optgroup> 用于将下拉列表中的选项分组。

<select><optgroup label="亚洲"><option value="china">中国</option><option value="japan">日本</option></optgroup><optgroup label="欧洲"><option value="france">法国</option><option value="germany">德国</option></optgroup>
</select>

在这里插入图片描述

7. <button>:定义按钮

<button> 标签用于创建按钮,可以包含文本或图像。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

在这里插入图片描述

8. <datalist>:定义输入选项列表

<datalist> 用于为输入框提供预定义的选项列表,用户可以从列表中选择或输入自定义内容。

<label for="browser">选择浏览器:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari"><option value="Edge">
</datalist>

在这里插入图片描述

9. <keygen>:定义密钥对生成器字段

<keygen> 用于生成密钥对,通常用于表单的安全验证。不过,该标签在 HTML5 中已被废弃,不建议使用。

<keygen name="security">

10. <output>:定义计算结果

<output> 用于显示计算结果,通常与 JavaScript 结合使用。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"><input type="number" id="a" value="0"> +<input type="number" id="b" value="0"> =<output name="result" for="a b">0</output>
</form>

在这里插入图片描述


表单的提交与验证

表单提交

表单提交时,浏览器会将用户输入的数据发送到服务器。可以通过 action 属性指定提交的目标地址,通过 method 属性指定提交方法(GETPOST)。

<form action="/submit" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username"><br><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><br><button type="submit">提交</button>
</form>

在这里插入图片描述

表单验证

HTML5 提供了一些内置的表单验证功能,例如:

  • 必填字段:使用 required 属性。
  • 输入格式验证:使用 type 属性(如 emailnumber 等)。
  • 最小/最大值:使用 minmax 属性。
<form><label for="email">邮箱:</label><input type="email" id="email" name="email" required><br><br><label for="age">年龄:</label><input type="number" id="age" name="age" min="1" max="100"><br><br><button type="submit">提交</button>
</form>

在这里插入图片描述


总结

HTML 表单是网页与用户交互的核心工具,掌握表单及其相关标签的使用方法对于前端开发至关重要。本文详细介绍了 <form><input><textarea><label><fieldset><select> 等常用表单标签的使用方法,并通过示例代码帮助理解。无论是简单的登录表单还是复杂的数据提交表单,HTML 都为我们提供了强大的工具来实现。

如果你想了解更多关于 HTML 表单的知识,可以参考 菜鸟教程 上的详细教程。


相关链接:

  • HTML 表单教程
  • HTML 输入类型
  • HTML5 新特性

标签: HTML, 表单, 输入标签, 前端开发, 网页交互

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年,我的技术探索与成长之路

2024年&#xff0c;我的技术探索与成长之路 2024年已经过去&#xff0c;作为一名技术爱好者和写作者&#xff0c;我回顾了过去一年在博客上记录的点滴&#xff0c;感慨良多。这一年&#xff0c;我不仅见证了技术的飞速发展&#xff0c;也在不断学习和实践中找到了自己的成长方向…

Elasticsearch(ES)基础查询语法的使用

1. Match Query (全文检索查询) 用于执行全文检索&#xff0c;适合搜索文本字段。 { “query”: { “match”: { “field”: “value” } } } match_phrase&#xff1a;精确匹配短语&#xff0c;适合用于短语搜索。 { “query”: { “match_phrase”: { “field”: “text” }…

WinHttp API接口辅助类实现GET POST网络通讯

1、简述 近期需要在MFC基础上开发网络Http通讯,开始使用的WinINet进行通讯,后面发现WinINet对连接超时这块不支持设置,在网上搜索了几种方式效果都不太好,于是决定用WinHttp API接口进行通讯,分别对GET、POST进行了封装。 2、使用到接口 2.1、WinHttpOpen WinHttpOpen 是…

Js:DOM中的样式(包含行内样式、滚动样式、可见区域样式等)

这部分还在更新 1、 获取行内样式&#xff1a;元素.style.样式名称 2、 获取当前正在显示的样式&#xff08;只能读&#xff0c;不能修改&#xff0c;想要修改要使用style&#xff09;&#xff1a; ① 只有ie支持&#xff1a;元素.currentStyle.样式名称 ② 其他浏览器&…

《Long Context Compression with Activation Beacon》笔记

Activation Beacon出自智源与人大在2024年1月放在arxiv上的论文《Long Context Compression with Activation Beacon》(v1版的题目&#xff1a;Soaring from 4K to 400K: Extending LLM’s Context with Activation Beacon&#xff09;。它引入了Beacon token将上下文信息蒸馏到…

线程池 | java中的多线程

在 《Java异步编程 | CompletableFuture--实现复杂的异步控制流 》中&#xff0c;我们提到了 通过 自定义线程池 &#xff0c; 用于管理 异步任务的执行&#xff0c;避免频繁创建和销毁线程&#xff0c;提高性能。 本文将整理并介绍一些 Java 中常见的 多线程创建方式&#xf…

Javaweb之css

css的三种引入方式 1内行式 2.内嵌式 3.外部样式表 内行式和内嵌式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

SQLmap 注入-03 获得用户信息

1: Sqlmap 先进入库&#xff0c;然后进入table, 然后列出column: sqlmap -u "http://192.168.56.133/mutillidae/index.php?pageuser-info.php&usernamexiaosheng&passwordabc&user-info-php-submit-buttonViewAccountDetails" --batch -p username -D …

mac 安装 python2

官网下载2.7&#xff1a; Python Release Python 2.7.18 | Python.org 查找地址&#xff1a; which python2 # /usr/local/bin/python2 设置 npm 使用 Python 2&#xff08;新建窗口&#xff09;&#xff1a; npm config set python /usr/local/bin/python2 验证 Python 版…

Jupyter notebook中运行dos指令运行方法

Jupyter notebook中运行dos指令运行方法 目录 Jupyter notebook中运行dos指令运行方法一、DOS(磁盘操作系统&#xff09;指令介绍1.1 DOS介绍1.2 DOS指令1.2.1 DIR - 显示当前目录下的文件和子目录列表。1.2.2 CD 或 CHDIR - 改变当前目录1.2.3 使用 CD .. 可以返回上一级目录1…

基于注解实现去重表消息防止重复消费

基于注解实现去重表消息防止重复消费 1. 背景/问题 在分布式系统中&#xff0c;消息队列&#xff08;如RocketMQ、Kafka&#xff09;的 消息重复消费 是常见问题&#xff0c;主要原因包括&#xff1a; 网络抖动&#xff1a;生产者或消费者因网络不稳定触发消息重发。消费者超…

Biotin sulfo-N-hydroxysuccinimide ester ;生物素磺基-N-羟基琥珀酰亚胺酯;生物素衍生物;190598-55-1

一、生物素及其衍生物的概述 生物素衍生物是指在生物素&#xff08;Vitamin H或B7&#xff09;分子基础上进行化学修饰得到的衍生化合物。这些衍生化合物在生物医学研究、临床诊断和药物开发等领域有着广泛的应用。 生物素&#xff08;Biotin&#xff09;是一种水溶性维生素&a…

Ubuntu如何安装redis服务?

环境&#xff1a; Ubuntu22.04 WSL2 问题描述&#xff1a; 如何安装redis服务&#xff1f; 解决方案&#xff1a; 1.在 Linux 上&#xff08;如 Ubuntu/Debian&#xff09;安装 1.通过包管理工具安装 Redis 服务器&#xff1a; sudo apt update sudo apt install redis…

Datawhale组队学习笔记task2——leetcode面试题

文章目录 写在前面Day5题目1.0112.路径总和解答2.0113路径总和II解答3.0101.对称二叉树解答 Day6题目1.0124.二叉树中的最大路径和解答2.0199.二叉树的右视图解答3.0226.翻转二叉树解答 Day7题目1.0105.从前序与中序遍历序列构造二叉树解答2.0098.验证二叉搜索树解答3.0110.平衡…

Slate文档编辑器-Node节点与Path路径映射

Slate文档编辑器-Node节点与Path路径映射 在之前我们聊到了slate中的Decorator装饰器实现&#xff0c;装饰器可以为我们方便地在编辑器渲染调度时处理range的渲染&#xff0c;这在实现搜索替换、代码高亮等场景非常有用。那么在这篇文章中&#xff0c;我们聊一下Node节点与Pat…

麒麟系统中删除权限不够的文件方法

在麒麟系统中删除权限不够的文件&#xff0c;可以尝试以下几种方法&#xff1a; 通过修改文件权限删除 打开终端&#xff1a;点击左下角的“终端”图标&#xff0c;或者通过搜索功能找到并打开终端 。定位文件&#xff1a;使用cd命令切换到文件所在的目录 。修改文件权限&…

Kotlin语言的正则表达式

Kotlin语言中的正则表达式 引言 正则表达式作为一种强大的文本处理工具&#xff0c;广泛应用于字符串匹配、数据验证、文本搜索等场景。在Kotlin语言中&#xff0c;正则表达式的应用同样得到了广泛关注。Kotlin不仅具备与Java相同的正则表达式功能优势&#xff0c;还提供了更…

Flask简介与安装以及实现一个糕点店的简单流程

目录 1. Flask简介 1.1 Flask的核心特点 1.2 Flask的基本结构 1.3 Flask的常见用法 1.3.1 创建Flask应用 1.3.2 路由和视图函数 1.3.3 动态URL参数 1.3.4 使用模板 1.4 Flask的优点 1.5 总结 2. Flask 环境创建 2.1 创建虚拟环境 2.2 激活虚拟环境 1.3 安装Flask…

RFID系统安全认证协议及防碰撞算法研究(RFID Security)

目录 1.摘要 2.引言 3.前人研究成果 3.1 RFID系统协议模型 3.2 RFID系统安全认证协议分类 3.3 RFID安全认证协议及其研究 3.3.1 超轻量级安全认证协议及其研究 3.3.2 轻量级安全认证协议及其研究 3.3.2 中量级安全认证协议及其研究 3.3.3 重量级安全认证协议及其研究…

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令&#xff1a; 查看镜像&#xff1a;docker images 二、启动镜像 启动mysql01、02容器&#xff1a; docker run -d -p 3310:3306 -v /root/mysql/node-1/config:/etc/mysql/ -v /root/mysql/node-1/data:/var/lib/mysql -e MYS…