html的表单标签(form)
目录标题
- 1、表单标签主要有三大类:
- 2、表单标签中常见的属性
- 3、例子代码及结果
- 4、注意:
- 5、表单中特殊的属性
表单标签可以用来数据交互,而前面学的六个标签只能发送不能接收。 表单标签的作用就是数据交互
1、表单标签主要有三大类:
- input 文本框
- select 下拉框
- textarea 文本域
2、表单标签中常见的属性
action属性:表示要提交的URL
method属性:表示http提交的方式,默认不写就是get
name属性:非常重要,name属性是表单标签最重要的属性,服务器进行数据接收时,会通过name判断。
3、例子代码及结果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>用户注册</title>
</head><body><h1>用户注册</h1><form action="#" method="post" enctype="multipart/form-data"><p>用户名称:<input type="text" name="username" required> </p><p><label for="mypass">用户密码:</label><input type="password" id="mypass" name="mypass"></p><p>用户性别:<input type="radio" value="男" name="gender">男<!-- 性别需要用到我们的单选框,所以要用到radio --><input type="radio" value="女" name="gender">女 </p><p>用户爱好:<input type="checkbox" value="LOL" name="hobby">LOL<input type="checkbox" value="王者农药" name="hobby">王者农药<input type="checkbox" value="篮球" name="hobby">篮球<!-- 多选框要用到checkbox --></p><p>用户邮箱:<input type="email" id="email" name="email"></p><p>用户博客:<input type="url" id="url" name="url"></p><p>用户头像:<input type="file" id="avatar" name="avatar"></p><p>出生日期:<input type="datetime-local"> <br><input type="date" name="" id=""> <br><input type="time"></p><p><input type="color"></p><p>用户年龄:<input type="number"></p><p><input type="week"></p><p><input type="range" max="10" max="0" value="9"></p><p>用户地址:<select name="address" id="address"><option value="陕西">陕西</option><option value="陕西">陕西</option><option value="陕西">陕西</option><option value="陕西">陕西</option></select></p><p>用户建议或者意见:<textarea name="" id="" cols="30" rows="10"></textarea></p><p><!-- 提交按钮要用到submit --><input type="submit" value="注册"><!-- 清空选项要用到reset --><input type="reset" value="重置"><input type="button" value="按钮"><input type="image" src=""></p></form>
</body></html>
get是以等于什么去传的,只能传字符串,不能传文件
post可以传文件









4、注意:
- html中有相应的邮箱格式,email类型
- 网址格式就是url类型
- 头像上传就是file类型
- 文件上传如下代码
<form action="#" method="post" enctype="multipart/form-data">
- 按钮就是button类型,但不会提交数据
- 图片提交按钮就是image类型,可以提交数据
- 出生年月日就是datetime-local类型
- 颜色就是color类型
- 年龄就是number类型
- 涉及到周就是week类型
- 拖动框就是range类型,范围0-10,值在9
<input type="range" max="10" max="0" value="9">
- 隐藏框就是hidden类型,提交一些看不见的数据
- 地址需要用到选择,如下:
<select name="address" id="address"><option value="陕西">陕西</option><option value="广西">广西</option><option value="桂林">桂林</option><option value="福建">福建</option>
</select>
5、表单中特殊的属性
- required属性表示有值才能提交
- readonly属性表示有值不能修改
- disabled属性表示不可用,与readonly类似
- placeholder属性表示选中
- autofocus属性表示自动聚焦
相关文章:
html的表单标签(form)
目录标题1、表单标签主要有三大类:2、表单标签中常见的属性3、例子代码及结果4、注意:5、表单中特殊的属性表单标签可以用来数据交互,而前面学的六个标签只能发送不能接收。 表单标签的作用就是数据交互1、表单标签主要有三大类: …...
手把手教你部署ruoyi前后端分离版本
下载源码(当前版本3.8.5)RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 (gitee.com)创建数据库(一定要是这三个&…...
JUC并发编程 Ⅱ -- 共享模型之管程(上)
文章目录共享带来的问题临界区 Critical Section竞态条件 Race Conditionsynchronized 解决方案synchronized语法解决方案思考面向对象改进方法上的 synchronized线程八锁变量的线程安全分析成员变量和静态变量是否线程安全?局部变量是否线程安全?局部变…...
File类
🏡个人主页 : 守夜人st 🚀系列专栏:Java …持续更新中敬请关注… 🙉博主简介:软件工程专业,在校学生,写博客是为了总结回顾一些所学知识点 ✈️推荐一款模拟面试,刷题神器…...
ModSecurity规则功能说明
ModSecurity规则功能说明 owasp规则: 第一部分:基础规则集 modsecurity_crs_20_protocol_violations.conf HTTP协议规范相关规则modsecurity_crs_21_protocol_anomalies.conf HTTP协议规范相关规则modsecurity_crs_23_request_limits.conf HTTP协议大小长度限制相…...
医学生考研考博太卷,一篇文章轻松助力上岸(一)
考研考博太卷了,卷不过,想没想过本科发一篇文章呢? 330分考研人淘汰390分考研人这个故事,大家应该都知道吧。 本专栏带你六个月内,搞定一篇文章,本科生发文章也很容易。 在卷考研的同时,再卷…...
操作系统(一): 进程和线程,进程的多种状态以及进程的调度算法
文章目录前言一、进程和线程1. 进程2. 线程二、进程和线程的区别(面试常问)三、进程调度算法3.1. 批处理系统3.2. 交互式系统3.2.1 时间片轮转3.2.2 优先级调度3.2.3 多级别反馈队列3.3. 实时系统四、进程的状态五、进程同步5.1 什么是进程同步5.2 进程同步应该遵循的几点原则前…...
【随笔】我迟到的2022年度总结:突破零粉丝,1个月涨粉1000+,2023年目标3万+
前言 我是21年12月注册的csdn, 作为用户平时看看文章,从未参与过写文章这件事。 但这一年的时间我见证了很多新号的崛起,有的号我平时关注比较多,看着他们从零粉丝突破了三万甚至五万的粉丝量。 在csdn上遇到了我的贵人&#x…...
SpringCloud-Netflix学习笔记13——Zuul路由网关
什么是Zuul? Zuul包含了对请求的路由和过滤两个最主要的功能。 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础,而过滤器功能则负责对请求的处理过程进行干预,是实现请求校验,服务聚合等功能…...
Hive 之 DDL操作
DDL 操作是用于操作对象和对象的属性,这种对象包括数据库本身,以及数据库对象,像:表、视图等等 1. 数据库 1.1 创建数据库 数据库在 HDFS 上的默认存储路径是 /user/hive/warehouse/*.db CREATE (DATABASE|SCHEMA) [IF NOT EX…...
2. SpringMVC 请求与响应
文章目录1. 请求映射路径2. 请求参数2.1 get 请求发送普通参数2.2 post 请求发送普通参数2.3 五种类型的参数传递2.4.1 普通参数2.4.2 POJO 数据类型2.4.3 嵌套 POJO 类型参数2.4.4 数组类型参数2.4.5 集合类型参数3. json 数据传输参数(重点)3.1 传输 j…...
leaflet 读取上传的geojson文件,转换为wkt文件(057)
第057个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中上传geojson文件,解析geojson文件并转换为WKT,并在地图上显示图片。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码(共128行)安装 @terraf…...
面试题-前端开发Vue篇(答案超详细)
文章目录 如何实现跨域?JSONP原理和缺点谈谈你对DOM的理解及常用的DOM API说说你对 Vue 的理解说说 Vue 的优缺点什么是虚拟 DOM请描述下 vue 的生命周期是什么vue 如何监听键盘事件?watch 怎么深度监听对象变化删除数组用 delete 和 Vue.delete 有什么区别watch 和计算属性有…...
PTA甲级-1010 Radix c++
文章目录Input Specification:Output Specification:Sample Input 1:Sample Output 1:Sample Input 2:Sample Output 2:一、题干大意二、题解要点三、具体实现总结Given a…...
【项目重构】第1次思考
回顾与反思 2022年~至今(2023年2月),一共重构了2个项目。 第1个项目在重构的时候,总是想着把别人的代码copy过来,改一改,这就算重构好了。这样做效率太低,原因是前人写的代码不一定有很多注释…...
Java:SpringMVC的使用(2)
目录第十二章 REST风格CRUD练习12.1 搭建环境12.2 实现功能思路第十三章 SpringMVC消息转换器13.1 消息转换器概述13.2 使用消息转换器处理请求报文(1) 使用RequestBody获取请求体(2) 使用HttpEntity\<T>获取请求体及请求头13.3 使用消息转换器处理响应报文(1) 使用Respo…...
Elasticsearch7.8.0版本进阶——分布式集群(应对故障)
目录一、Elasticsearch集群的安装1.1、Elasticsearch集群的安装(win10环境)1.2、Elasticsearch集群的安装(linux环境)二、应对故障(win10环境集群演示)2.1、启动集群(三个节点)2.2、…...
【LeetCode】每日一题(2)
目录 题目:1138. 字母板上的路径 - 力扣(Leetcode) 题目的接口: 解题思路: 代码: 过啦!!! 写在最后: 题目:1138. 字母板上的路径 - 力扣&am…...
软件设计师教程(六)计算机系统知识-操作系统知识
软件设计师教程 软件设计师教程(一)计算机系统知识-计算机系统基础知识 软件设计师教程(二)计算机系统知识-计算机体系结构 软件设计师教程(三)计算机系统知识-计算机体系结构 软件设计师教程(…...
Zookeeper下载安装与集群搭建
Zookeeper下载安装与集群搭建1.下载安装1.1 下载安装1.2 配置启动2.集群搭建2.1 搭建要求2.2 准备工作2.3 配置集群2.4 启动集群2.5 模拟集群异常1.下载安装 1.1 下载安装 1、环境准备 ZooKeeper服务器是用Java创建的,它运行在JVM之上。需要安装JDK 7或更高版本。…...
文本风格转换技术:数字手写化工具的创新应用与实践指南
文本风格转换技术:数字手写化工具的创新应用与实践指南 【免费下载链接】text-to-handwriting So your teacher asked you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting xD 项目地址: h…...
STM32WU55蓝牙开发避坑指南:从官方例程到8通道肌电信号传输实战
STM32WU55蓝牙开发避坑指南:从官方例程到8通道肌电信号传输实战 当肌电信号采集遇上低功耗蓝牙,工程师们往往面临一个尴尬的平衡:既要满足医疗级数据精度,又要兼顾穿戴设备的续航需求。STM32WU55系列以其双核架构和集成射频模块&a…...
高效解决图表数据提取难题:WebPlotDigitizer全功能解析
高效解决图表数据提取难题:WebPlotDigitizer全功能解析 【免费下载链接】WebPlotDigitizer WebPlotDigitizer: 一个基于 Web 的工具,用于从图形图像中提取数值数据,支持 XY、极地、三角图和地图。 项目地址: https://gitcode.com/gh_mirror…...
飞书文档全流程备份终极方案:从手动操作到自动化管理的完美转型
飞书文档全流程备份终极方案:从手动操作到自动化管理的完美转型 【免费下载链接】feishu-doc-export 项目地址: https://gitcode.com/gh_mirrors/fe/feishu-doc-export 价值定位:破解企业文档管理的三大核心痛点 📊 在数字化办公日益…...
CYBER-VISION零号协议SolidWorks设计文档智能解读与生成
CYBER-VISION零号协议:让AI读懂你的SolidWorks设计图 每次打开一个复杂的SolidWorks装配体文件,面对几十上百个零件,你是不是也头疼过整理物料清单、编写设计说明?或者,当同事发来一份设计文档,你需要花半…...
OpenClaw飞书办公助手:Qwen3-VL:30B自动化会议纪要生成
OpenClaw飞书办公助手:Qwen3-VL:30B自动化会议纪要生成 1. 为什么需要自动化会议纪要 每次开完会最痛苦的事情是什么?对我来说就是整理会议纪要。作为团队的技术负责人,我每周要参加至少5场会议,从需求评审到技术方案讨论&#…...
保姆级教程:Windows下GDC-client下载TCGA数据的完整配置流程(含环境变量与配置文件修改)
Windows平台TCGA数据下载全流程:从环境配置到实战避坑指南 在生物信息学研究中,TCGA数据库无疑是癌症基因组学的宝库。但对于刚入门的研究者来说,获取这些数据往往成为第一道门槛。本文将彻底解决Windows用户在使用GDC-client工具时的各种&qu…...
终极指南:如何使用baidu-wangpan-parse工具免费突破百度网盘限速
终极指南:如何使用baidu-wangpan-parse工具免费突破百度网盘限速 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 百度网盘直链解析工具baidu-wangpan-parse是专为普…...
用Python手把手实现乘幂法:从理论到代码,5分钟搞定矩阵最大特征值计算
用Python手把手实现乘幂法:从理论到代码,5分钟搞定矩阵最大特征值计算 矩阵特征值计算是线性代数的核心问题之一,在机器学习、物理模拟和工程分析中无处不在。但当你面对一个实际项目时,真正需要的往往不是繁琐的数学推导…...
nli-distilroberta-base一文详解:开源NLI大模型在语义推理场景的落地应用
nli-distilroberta-base一文详解:开源NLI大模型在语义推理场景的落地应用 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务,专门用于判断两个句子之间的逻辑关系。这个轻量级模型继承了RoBERTa的强大语义理…...
