HTML表单标签大全并附有详细代码+案例

在这里插入图片描述

个人名片：

🐼作者简介：一名大二在校生
🐻‍❄️个人主页：落798.
🐼个人WeChat：落798.
🕊️系列专栏：零基础学java ----- 重识c语言 ---- 计算机网络—【Spring技术内幕】
🐓每日一句：看淡一点在努力，你吃的苦会铺成你要的路！

文章目录

  • HTML表单标签
      • 1. 表单标签
        • 1.1form表单的属性
      • 2. 表单域
        • 2.1 <input>标签
        • 2.2 <select> 下拉列表
        • 2.3 `<textarea>` 文本域
        • 2.4 `<label>` 标签
      • 3. 表单按钮
    • 代码案例：利用以上属性实现一个用户登录信息界面
    • 欢迎添加微信，加入我的核心小队，请备注来意

HTML表单标签

HTML 表单用于搜集不同类型的用户输入。

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

1. 表单标签

HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。

注意：元素是块级元素，其前后会产生折行。

<body> <form >form elements</form>
</body>

1.1form表单的属性

action="url"：请求地址，指定form表单向何处发送数据。

name="login"：作用是给表单起名，为了便于我们操作。

enctype ="string"：规定在发送表单数据之前，如何对表单数据进行编码。通常在使用文件上传时，我们会enctype=“multipart/form-data”，以二进制传输。

method ="get/post"：指定表单以何种方式发送到指定的服务器程序，该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post。

2. 表单域

要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。

2.1 标签

input用于收集用户信息，根据不同的类型显示不同的形式。input是空标签，它没有结束标签，在开始标签中结束。

<input> 元素根据不同的type属性，可以变化为多种形态。

<input> 元素设置name属性，用于网络请求时提交对应输入的字段。

input="text" 文本框

定义单行的输入字段，用户可在其中输入文本。它是一个单行文本框，input的默认类型即是text类型。

<form action="login.jsp">用户名：<input  name="userName" type="text">
</form>

input="password" 密码框

类型为password时，它用于收集用户输入的密码，在你输入时，浏览器会把输入的内容以符号来代替。

<form action="login.jsp">密码：<input  name="passworld" type="password">
</form>

文本框和密码框都可以添加placeholder属性，用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type="radio" 单选框

类型为radio时，用于定义单选按钮，name属性值相同的input单选框只能有一个被选中。

checked="checked" 设置默认选中的单选框。
value="1"是提交到服务器时给后台程序员们看的。

<form action="login.jsp">性别：男 <input name="sex" checked="checked" type="radio" value="1">女 <input name="sex" type="radio" value="2"></form>

type="checkbox" 复选框

类型为checkbox时，用于定义复选按钮，复选框允许用户在一定数目的选择中选取一个或多个选项。

<form action="login.jsp">兴趣爱好：篮球 <input type="checkbox" name="like1" value="1" checked>足球 <input type="checkbox" name="like2" value="2">游泳 <input type="checkbox" name="like3" value="3">跑步 <input type="checkbox" name="like4" value="4">
</form>

type="file" 文件上传

类型为file时，默认为单文件上传。

multiple="multiple" 设置为多文件上传。

<form action="login.jsp"><input type="file" name="file" multiple="multiple">
</form>

type="hidden" 隐藏字段

隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

<form action="login.jsp"><input type="hidden" name="hidden" value="123">
</form>

2.2 下拉列表

<select> 元素定义下拉列表，<option>元素定义待选择的选项。列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。

<form action="login.jsp">选择您喜欢的水果：<select name="select"><option value="apple">苹果</option><option value="banana">香蕉</option><!--榴莲设置为选中状态--><option selected value="durian">榴莲</option></select>
</form>

单选按钮、复选框默认选中用：checked属性。

下拉列表使用：selected属性。

使用size属性设置下拉列表展开，使用multiple属性设置多选。

<form action="login.jsp"><select name="select" size="4" multiple id=""><option value="1">重庆</option><option value="2">武汉</option><option value="3">北京</option><option value="4">上海</option></select><input type="submit">
</form>

2.3 <textarea> 文本域

<textarea> 元素定义多行输入字段（文本域）

  • cols：规定文本区内的可见宽度。

  • rows：规定文本区内的可见行数。

<form><textarea name="text" cols="50" rows="10"></textarea>
</form>

文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。

2.4 <label> 标签

label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。

通过label的for指向按钮的id来绑定，for和id属性的值要相同。

<form action="login.jsp"><label for="userName">请输入用户名:</label><input type="text" id="userName">
</form>
<form action="login.jsp">性别：<label for="man">男：</label><input type="checkbox" id="man"><label for="woman">女：</label><input type="checkbox" id="woman">
</form>

3. 表单按钮

type="reset" 重置按钮

重置按钮会清除表单中的所有数据。

value="重置"设置重置按钮上显示的文字。

<form action="login.jsp">用户名：<input name="userName" type="text">性别：男 <input name="sex" checked="checked" type="radio" value="1">女 <input name="sex" type="radio" value="2"><input type="reset" value="重置">
</form>

type="submit" 提交按钮

type="submit" 定义提交按钮。提交按钮用于向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面。

value="提交"设置提交按钮上显示的文字。

<form action="login.jsp">用户名：<input name="userName" type="text">性别：男 <input name="sex" checked="checked" type="radio" value="1">女 <input name="sex" type="radio" value="2"><input type="submit" value="提交">
</form>

type="button" 普通按钮

button类型的只是一个普通的按钮，而submit有一个提交的作用，在没有加js代码的情况下，button只是个装饰。

<form action="login.jsp"><input type="button" value="按钮">
</form>

type="image" 提交按钮

image类型的input也是具有一个提交的作用，不同的是可以指定一幅图片来作为按钮，不提倡使用image，因为它有时候会提交两次。

<form action="login.jsp"><input type="image" src="img/bg.jpg">
</form>

代码案例：利用以上属性实现一个用户登录信息界面

代码示例：

<from>
<h1 align = "center">用户注册</h1>用户名称：<input type="text" value="默认值"/><br/>用户密码：<input type="password" value="abc"/><br/>确认密码：<input type="password" value="abc"/><br/>性别：<input type="radio" name="sex">男<input type = "radio" name="sex">女<br/>兴趣爱好：<input type = "checkbox" checked ="checked"/>java<input type = "checkbox"/>c++<input type = "checkbox"/>html<br/>国籍：<select><option>--请选择国籍--</option><option selected="seclected">--中国--</option><option>--美国--</option><option>--韩国--</option><option>--澳大利亚--</option>
</select><br/>自我评价：<textarea rows="10"cols="30">我才是默认值</textarea><br/>重置表单：<input type = "reset"/><br/>撤销按钮：<input type = "reset" value = "撤销"/><br/>
</form>

完整代码：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"><!--form标签就是表单
input type = next     是文件输入框  value  设置默认显示效果
input type = password   是密码输入框   value设置默认显示效果
input type =radio 是单选  name属性可以对其进行分组  checked =“checked"表示默认选中
input type = "checkbox"复选框     checked =“checked"表示默认选中select 标签是下拉框
option 标签是下拉列表框中的选项  selected="selected"设置默认选中textarea 表示多行文本输入框 《起始标签和结束标签中间的值是默认值）rows 属性设置可以选择几行的高度clos 属性设置每行可以显示几个字符宽度
input type = "reset"是重置按钮   values属性修改文字内容
input type = "button"是按钮   values属性修改按钮文字内容
input type=hidden
input type=file 是文件上传域
input type=hidden 是隐藏域  当我们要发送给服务器的某些信息不需要用户参与，就可以使用
--><title>表单</title>
<head><style>body {background-image: url("微信图片_20220520211010.jpg");background-repeat: no-repeat;background-size: cover;}form {background-color: #f7f7f7;padding: 20px;border-radius: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);max-width: 400px;margin: 0 auto;}input[type="text"],input[type="password"],select,textarea {width: 100%;padding: 10px;border: none;border-radius: 5px;margin-bottom: 10px;background-color: #e2e2e2;font-family: Arial, sans-serif;font-size: 14px;}input[type="radio"],input[type="checkbox"] {margin-right: 5px;}input[type="reset"],input[type="submit"] {padding: 10px 20px;background-color: #ffaa00;color: #fff;border: none;border-radius: 5px;cursor: pointer;font-family: Arial, sans-serif;font-size: 14px;}textarea {resize: none;}/* 示例动画效果 */input[type="text"]:focus,input[type="password"]:focus,select:focus,textarea:focus {outline: none;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);transform: scale(1.05);transition: all 0.3s ease;}/* 示例图标和图片 */input[type="reset"] {background-image: url("微信图片_20220520211010.jpg");background-repeat: no-repeat;background-position: center;text-indent: -9999px;}</style>
</head>
<body>
<h1 align = "center">用户注册</h1>用户名称：<input type="text" value="默认值"/><br/>用户密码：<input type="password" value="abc"/><br/>确认密码：<input type="password" value="abc"/><br/>性别：<input type="radio" name="sex">男<input type = "radio" name="sex">女<br/>兴趣爱好：<input type = "checkbox" checked ="checked"/>java<input type = "checkbox"/>c++<input type = "checkbox"/>html<br/>国籍：<select><option>--请选择国籍--</option><option selected="seclected">--中国--</option><option>--美国--</option><option>--韩国--</option><option>--澳大利亚--</option>
</select><br/>自我评价：<textarea rows="10"cols="30">我才是默认值</textarea><br/>重置表单：<input type = "reset"/><br/>撤销按钮：<input type = "reset" value = "撤销"/><br/>
</form>
</body>
</html>

在这里插入图片描述

欢迎添加微信，加入我的核心小队，请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

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

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

相关文章

UE5.2 LyraDemo源码阅读笔记（四）

UE5.2 LyraDemo源码阅读笔记（四）

上一篇&#xff08;三&#xff09;讲到在模式玩法UI点击Elimination进入淘汰赛模式。 UI选择点击Elimination后&#xff0c;触发蓝图W_HostSessionScreen的HostSession节点&#xff0c;有&#xff1a; 调用这个方法切换关卡后&#xff0c;会调用到LyraGameMode.cpp的 ALyraGam…
阅读更多...
【ES】笔记-函数参数默认值

【ES】笔记-函数参数默认值

函数参数默认值 ES6 允许给函数参数赋值初始值 1. 形参初始值 具有默认值的参数&#xff0c;一般放到最后 function add(a,b,c10){return abc}let resultadd(1,2);console.log(result);2. 与解构赋值结合 function connect({host"127.0.0.1",username,password,port…
阅读更多...
【rust/egui】(一)从编译运行template开始

【rust/egui】(一)从编译运行template开始

说在前面 rust新手&#xff0c;egui没啥找到啥教程&#xff0c;这里自己记录下学习过程环境&#xff1a;windows11 22H2rust版本&#xff1a;rustc 1.71.1egui版本&#xff1a;0.22.0eframe版本&#xff1a;0.22.0rust windows安装参考&#xff1a;这里本文默认读者已安装相关环…
阅读更多...
微服务学习笔记-基本概念

微服务学习笔记-基本概念

微服务是一种经过良好架构设计的分布式架构方案。根据业务功能对系统做拆分&#xff0c;每个业务功能模块作为独立项目开发&#xff0c;称为一个服务。 微服务的架构特征&#xff1a; 单一职责&#xff1a;微服务拆分粒度更小&#xff0c;每一个服务都对应唯一的业务能力&…
阅读更多...
react 生命周期方法

react 生命周期方法

组件的生命周期 每个组件都包含 “生命周期方法”&#xff0c;你可以重写这些方法&#xff0c;以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中&#xff0c;常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。 挂…
阅读更多...
github版面混乱加载不出的解决办法

github版面混乱加载不出的解决办法

最近出现打开github 界面加载不成功&#xff0c;网页访问乱码&#xff0c;打开chrome的检查发现 github的github.githubassets.com 拒绝访问&#xff0c; 解法&#xff1a; 1.先打开hosts文件所在的目录C:\Windows\System32\drivers\etc 2.右键点击hosts文件-选择用记事本或者…
阅读更多...
【LVS-NAT配置】

【LVS-NAT配置】

配置 node1&#xff1a;128&#xff08;客户端&#xff09; node2&#xff1a;135&#xff08;调度器&#xff09; RS&#xff1a; node3&#xff1a;130 node4&#xff1a;132 node2添加网络适配器&#xff08;仅主机模式&#xff09; [rootnode2 ~]# nmtui[rootnode2 ~]#…
阅读更多...
软件测试基础篇——Linux

软件测试基础篇——Linux

1、Linux系统的特征 开源免费&#xff1a; 开源&#xff1a;开放源代码&#xff0c;指的是底层的源代码是可以开放出来&#xff0c;给相关的开发者&#xff0c;根据实际的需求做出修改的。 免费&#xff1a;不花钱&#xff0c;自由传播。 ​ Linux是一种免费使用和自由传播的…
阅读更多...
设计模式（2）工厂方法模式

设计模式（2）工厂方法模式

一、 1、介绍&#xff1a;定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。简单工厂模式的最大优点在于工厂类中包含了必要的逻辑判断&#xff0c;根据客户端的选择条件动态实例化相关的类&#xff0c;对于客户端来说…
阅读更多...
Docker启动、停止、删除容器的相关指令

Docker启动、停止、删除容器的相关指令

关闭容器指令&#xff1a; docker stop name启动命令&#xff1a; docker start name删除容器&#xff1a; docker rm name 或 id查看所有容器id&#xff1a; docker ps -aq删除所有容器&#xff1a; docker rm docker ps -aq开启着的容器是不能被删除的。 查看容器信息&…
阅读更多...
【LangChain学习】基于PDF文档构建问答知识库（二）创建项目

【LangChain学习】基于PDF文档构建问答知识库（二）创建项目

这里我们使用到 fastapi 作为项目的web框架&#xff0c;它是一个快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;上手简单。 一.创建 FastAPI 项目 我们在IDE中&#xff0c;左侧选择 FastAPI &#xff0c;右侧选择创建一个新的虚拟环境。 创建成功&#xff0c;会有…
阅读更多...
Java 的 Stream

Java 的 Stream

一、创建 Stream 1.1、创建 Stream 流 1.1.1、List 集合获取 Stream 流 Collection<String> list new ArrayList<>(); Stream<String> s1 list.stream(); 1.1.2、Map 集合获取 stream 流 Map<String, Integer> map new HashMap<>(); // …
阅读更多...
R语言中的函数24：Combinat：combn(), permn()

R语言中的函数24：Combinat：combn(), permn()

介绍 combinat中的combn()和permn()函数可以得到所有的排列组合的情况 combn()函数 combn(x, m, funNULL, simplifyTRUE, …)x – 组合的向量源m – 要取的元素的数量fun – 应用于每个组合的函数(可能为空)simplify – 逻辑的&#xff0c;如果是FALSE&#xff0c;返回一个列…
阅读更多...
爬虫如何应对网站的反爬机制？如何查找user-agent对应的值

爬虫如何应对网站的反爬机制？如何查找user-agent对应的值

import requestsurl https://movie.douban.com/top250 response requests.get(url) # 查看结果 print(response)在requests使用一文中我们有讲到&#xff0c;当状态码不是200时表示爬虫不可用&#xff0c;也就是说我们获取不到网页源代码。但是我们还是可以挣扎一下&#xff…
阅读更多...
数据结构----哈夫曼树

数据结构----哈夫曼树

这里写目录标题 基本概念引子基本概念各种路径长度各种带权路径长度结点的带权路径长度树的带权路径长度哈夫曼树 哈夫曼树的构造理论基础构造思想总结 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录…
阅读更多...
云原生K8S------Yaml文件详解

云原生K8S------Yaml文件详解

目录 一&#xff1a;K8S支持的文件格式 1&#xff0c;yaml和json的主要区别 2&#xff0c;YAML语言格式 二&#xff1a;yuml 1、查看 api 资源版本标签 2、写一个yaml文件demo 3、创建service服务对外提供访问并测试 4、详解k8s中的port 三&#xff1a;文件生成 1、kubec…
阅读更多...
32位M0核单片机XL32F003芯片特征和功能介绍

32位M0核单片机XL32F003芯片特征和功能介绍

XL32F003 系列微控制器采用高性能的 32 位 ARMCortex- M0 内核&#xff0c;宽电压工作范围的MCU。嵌入高达64 Kbytes flash和8 Kbytes SRAM存储器&#xff0c;最高工作频率32 MHz。包含多种不同封装类型多款产品。芯片集成多路I2C、SPI、 USART等通讯外设&#xff0c;1路12 bit…
阅读更多...
FPGA应用学习笔记----CORDIC 算法和小结

FPGA应用学习笔记----CORDIC 算法和小结

加减移位操作来运算三角函数&#xff0c;开根号&#xff0c;求对数 圆周旋转模式
阅读更多...
MySQL数据库表的增删查改 - 进阶

MySQL数据库表的增删查改 - 进阶

一&#xff0c;数据库约束 1.1 约束对象 not null - 该列不能为空unique - 保证该列的每一行都不一样default - 规定没有给列赋值时的默认值&#xff08;自定义&#xff09;primary key - not null 和 unique 的结合&#xff0c;会给该列添加一个索引&#xff0…
阅读更多...
Java-方法

Java-方法

在编程中&#xff0c;我们也可以将频繁使用的代码封装成"帖子"(方法)&#xff0c;需要时直接拿来链接 方法就是一个代码片段. 类似于 C 语言中的 “函数” 方法定义 修饰符 返回值类型 方法名称([参数类型 形参 …]){ 方法体代码; [return 返回值]; } 这里比得C语言…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023