当前位置： 首页 > news >正文

html的表单标签（form）

news 文章来源：https://blog.csdn.net/weixin_64311421/article/details/128995027 2024/11/7 5:22:46

目录标题

      • 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、表单标签主要有三大类&#xff1a;2、表单标签中常见的属性3、例子代码及结果4、注意&#xff1a;5、表单中特殊的属性表单标签可以用来数据交互&#xff0c;而前面学的六个标签只能发送不能接收。 表单标签的作用就是数据交互1、表单标签主要有三大类&#xff1a; …...

编程日记 2023/2/12 22:34:34

手把手教你部署ruoyi前后端分离版本

下载源码&#xff08;当前版本3.8.5&#xff09;RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本 (gitee.com)创建数据库(一定要是这三个&…...

编程日记 2023/2/12 22:33:26

JUC并发编程 Ⅱ -- 共享模型之管程(上)

文章目录共享带来的问题临界区 Critical Section竞态条件 Race Conditionsynchronized 解决方案synchronized语法解决方案思考面向对象改进方法上的 synchronized线程八锁变量的线程安全分析成员变量和静态变量是否线程安全&#xff1f;局部变量是否线程安全&#xff1f;局部变…...

编程日记 2023/2/12 22:32:14

File类

&#x1f3e1;个人主页 &#xff1a; 守夜人st &#x1f680;系列专栏&#xff1a;Java …持续更新中敬请关注… &#x1f649;博主简介&#xff1a;软件工程专业&#xff0c;在校学生&#xff0c;写博客是为了总结回顾一些所学知识点 ✈️推荐一款模拟面试&#xff0c;刷题神器…...

编程日记 2023/2/12 22:31:07

ModSecurity规则功能说明

ModSecurity规则功能说明 owasp规则: 第一部分&#xff1a;基础规则集 modsecurity_crs_20_protocol_violations.conf HTTP协议规范相关规则modsecurity_crs_21_protocol_anomalies.conf HTTP协议规范相关规则modsecurity_crs_23_request_limits.conf HTTP协议大小长度限制相…...

编程日记 2023/2/12 22:29:58

医学生考研考博太卷，一篇文章轻松助力上岸（一）

考研考博太卷了&#xff0c;卷不过&#xff0c;想没想过本科发一篇文章呢&#xff1f; 330分考研人淘汰390分考研人这个故事&#xff0c;大家应该都知道吧。 本专栏带你六个月内&#xff0c;搞定一篇文章&#xff0c;本科生发文章也很容易。 在卷考研的同时&#xff0c;再卷…...

编程日记 2023/2/12 22:28:48

操作系统(一): 进程和线程，进程的多种状态以及进程的调度算法

文章目录前言一、进程和线程1. 进程2. 线程二、进程和线程的区别(面试常问)三、进程调度算法3.1. 批处理系统3.2. 交互式系统3.2.1 时间片轮转3.2.2 优先级调度3.2.3 多级别反馈队列3.3. 实时系统四、进程的状态五、进程同步5.1 什么是进程同步5.2 进程同步应该遵循的几点原则前…...

编程日记 2023/2/12 22:27:41

【随笔】我迟到的2022年度总结：突破零粉丝，1个月涨粉1000+，2023年目标3万+

前言 我是21年12月注册的csdn&#xff0c; 作为用户平时看看文章&#xff0c;从未参与过写文章这件事。 但这一年的时间我见证了很多新号的崛起&#xff0c;有的号我平时关注比较多&#xff0c;看着他们从零粉丝突破了三万甚至五万的粉丝量。 在csdn上遇到了我的贵人&#x…...

编程日记 2023/2/12 22:26:33

SpringCloud-Netflix学习笔记13——Zuul路由网关

什么是Zuul? Zuul包含了对请求的路由和过滤两个最主要的功能。 其中路由功能负责将外部请求转发到具体的微服务实例上&#xff0c;是实现外部访问统一入口的基础&#xff0c;而过滤器功能则负责对请求的处理过程进行干预&#xff0c;是实现请求校验&#xff0c;服务聚合等功能…...

编程日记 2023/2/12 22:25:26

Hive 之 DDL操作

DDL 操作是用于操作对象和对象的属性&#xff0c;这种对象包括数据库本身&#xff0c;以及数据库对象&#xff0c;像&#xff1a;表、视图等等 1. 数据库 1.1 创建数据库 数据库在 HDFS 上的默认存储路径是 /user/hive/warehouse/*.db CREATE (DATABASE|SCHEMA) [IF NOT EX…...

编程日记 2023/2/12 22:24:16

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 数据传输参数&#xff08;重点&#xff09;3.1 传输 j…...

编程日记 2023/2/12 22:23:08

leaflet 读取上传的geojson文件，转换为wkt文件（057）

第057个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中上传geojson文件，解析geojson文件并转换为WKT，并在地图上显示图片。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共128行）安装 @terraf…...

编程日记 2023/2/12 22:22:02

面试题-前端开发Vue篇（答案超详细）

文章目录 如何实现跨域？JSONP原理和缺点谈谈你对DOM的理解及常用的DOM API说说你对 Vue 的理解说说 Vue 的优缺点什么是虚拟 DOM请描述下 vue 的生命周期是什么vue 如何监听键盘事件？watch 怎么深度监听对象变化删除数组用 delete 和 Vue.delete 有什么区别watch 和计算属性有…...

编程日记 2023/2/12 22:20:49

PTA甲级-1010 Radix c++

文章目录Input Specification:Output Specification:Sample Input 1:Sample Output 1:Sample Input 2:Sample Output 2:一、题干大意![在这里插入图片描述](https://img-blog.csdnimg.cn/68d84d3ea86e4aaab002152ae8472e05.png#pic_center)二、题解要点三、具体实现总结Given a…...

编程日记 2023/2/12 22:19:42

【项目重构】第1次思考

回顾与反思 2022年~至今&#xff08;2023年2月&#xff09;&#xff0c;一共重构了2个项目。 第1个项目在重构的时候&#xff0c;总是想着把别人的代码copy过来&#xff0c;改一改&#xff0c;这就算重构好了。这样做效率太低&#xff0c;原因是前人写的代码不一定有很多注释…...

编程日记 2023/2/12 22:18:33

Java：SpringMVC的使用（2）

目录第十二章 REST风格CRUD练习12.1 搭建环境12.2 实现功能思路第十三章 SpringMVC消息转换器13.1 消息转换器概述13.2 使用消息转换器处理请求报文(1) 使用RequestBody获取请求体(2) 使用HttpEntity\<T>获取请求体及请求头13.3 使用消息转换器处理响应报文(1) 使用Respo…...

编程日记 2023/2/12 22:17:24

Elasticsearch7.8.0版本进阶——分布式集群（应对故障）

目录一、Elasticsearch集群的安装1.1、Elasticsearch集群的安装&#xff08;win10环境&#xff09;1.2、Elasticsearch集群的安装&#xff08;linux环境&#xff09;二、应对故障&#xff08;win10环境集群演示&#xff09;2.1、启动集群&#xff08;三个节点&#xff09;2.2、…...

编程日记 2023/2/12 22:15:14

【LeetCode】每日一题（2）

目录 题目&#xff1a;1138. 字母板上的路径 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;1138. 字母板上的路径 - 力扣&am…...

编程日记 2023/2/12 22:14:08

软件设计师教程（六）计算机系统知识-操作系统知识

软件设计师教程 软件设计师教程&#xff08;一&#xff09;计算机系统知识-计算机系统基础知识 软件设计师教程&#xff08;二&#xff09;计算机系统知识-计算机体系结构 软件设计师教程&#xff08;三&#xff09;计算机系统知识-计算机体系结构 软件设计师教程&#xff08;…...

编程日记 2023/2/12 22:13:03

Zookeeper下载安装与集群搭建

Zookeeper下载安装与集群搭建1.下载安装1.1 下载安装1.2 配置启动2.集群搭建2.1 搭建要求2.2 准备工作2.3 配置集群2.4 启动集群2.5 模拟集群异常1.下载安装 1.1 下载安装 1、环境准备 ZooKeeper服务器是用Java创建的&#xff0c;它运行在JVM之上。需要安装JDK 7或更高版本。…...

编程日记 2023/2/12 22:11:57

Filter防火墙（8）

实验目的 1、了解个人防火墙的基本工作原理&#xff1b; 2、掌握Filter防火墙的配置。 预备知识防火墙 防火墙&#xff08;Firewall&#xff09;是一项协助确保信息安全的设备&#xff0c;会依照特定的规则&#xff0c;允许或是限制传输的数据通过。防火墙可以是一台专属的硬…...

编程日记 2023/2/12 22:10:52

Spring事务的传播级别——包你一文通

文章目录一、简单说明二、具体案例描述2.1.PROPAGATION_REQUIRED2.2.PROPAGATION_REQUIRED_NEW2.3.PROPAGATION_SUPPORTS2.4.PROPAGATION_NOT_SUPPORTED2.5.PROPAGATION_MANDATORY2.6.PROPAGATION_NEVER2.7.PROPAGATION_NESTED三、总结3.1、PROPAGATION_REQUIRED3.2、PROPAGATI…...

编程日记 2023/2/12 22:09:43

C语言（C预编译指令）

目录 1.undef 2.条件编译#ifdef,#else和#endif 3.#ifndef 4.#if和#elif 5.预定义宏 6.#line和#error 7.#pragma 1.undef #undef指令用于取消已定义的#define指令 #define LIMIT 400 #undef LIMIT 如果想使用一个名称但又不确定之前是否已经用过&#xff0c;为了安全起…...

编程日记 2023/2/12 22:08:36

JMeter 接口测试/并发测试/性能测试

Jmter工具设计之初是用于做性能测试的&#xff0c;它在实现对各种接口的调用方面已经做的比较成熟&#xff0c;因此&#xff0c;本次直接使用Jmeter工具来完成对Http接口的测试。因为再做接口测试时可以设置线程组&#xff0c;所以也可做接口性能测试。本篇使用JMeter完成了一个…...

编程日记 2023/2/12 22:07:28

大家心心念念的RocketMQ5.x入门手册来喽

1、前言 为了更好的拥抱云原生&#xff0c;RocketMQ5.x架构进行了大的重构&#xff0c;提出了存储与计算分离的设计架构&#xff0c;架构设计图如下所示&#xff1a; RocketMQ5.x提供了一套非常建议的消息发送、消费API&#xff0c;并统一放在Apache顶级开源项目rocketmq-clie…...

编程日记 2023/2/12 22:06:22

（考研湖科大教书匠计算机网络）第四章网络层-第三节1：IPv4地址概述

获取pdf&#xff1a;密码7281专栏目录首页&#xff1a;【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一&#xff1a;IPv4地址概述二&#xff1a;IPv4地址表示方法&#xff08;1&#xff09;概述&#xff08;2&#xff09;8位无符号二进制数转十进制正整数&#xff…...

编程日记 2023/2/12 22:05:16

B站Python与OpenCV人脸识别项目超详细记录（对图片、视频、摄像头人脸的检测）

课程来源&#xff1a;一天搞定人脸识别项目&#xff01;学不会up直接下跪&#xff01;&#xff08;pythonopencv&#xff09;_哔哩哔哩_bilibili 图片来源&#xff1a;感谢王鹤棣先生友情出镜~ 环境配置详见&#xff1a; 在conda虚拟环境中安装OpenCv并在pycharm中使用_cond…...

编程日记 2023/2/12 22:04:08

【Node.js实战】一文带你开发博客项目之Koa2重构（实现session、开发路由、联调、日志）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…...

编程日记 2023/2/12 22:03:02

第一部分：简单句——第二章：简单句的补充

简单句的核心构成&#xff1a;一主一谓 主语/宾语/表语 可以变成名词/代词/doing/to do 谓语动词有四种核心变化&#xff1a;三态 一否 时态语态情态否定 简单句的核心&#xff1a;将简单句给写对 简单句的补充&#xff1a;将简单句给写的更好、更充分 简单句的补充 1、限定…...

编程日记 2023/2/12 21:59:43

Spring Security简介

前面我们已经完成了传智健康后台管理系统的部分功能&#xff0c;例如检查项管理、检查组管理、套餐管理、预 约设置等。接下来我们需要思考2个问题&#xff1a; 问题1&#xff1a;在生产环境下我们如果不登录后台系统就可以完成这些功能操作吗&#xff1f; 答案显然是否定的&am…...

编程日记 2023/2/12 21:58:35

深圳龙华网站公司/seo分析师

在本文中&#xff0c;我们将介绍如何清除Linux终端。1)clear命令让我们假设你的终端填满了命令和输出&#xff0c;如下所示&#xff0c;在终端提示符的底部运行clear。结果终端屏幕被清除&#xff0c;如下所示2)reset命令就像上面的例子一样&#xff0c;你需要在终端的底部运行…...

编程日记 2024/11/6 21:44:51

专做蔬菜水果的网站/百度app安装

我们是否有必要费力创造一种通用的Web字节码&#xff1f;LLVM就是解决方案吗&#xff1f;Mozilla asm.js和Google PNaCl这两种支持在浏览器中运行原生代码的机制&#xff0c;哪种更好呢&#xff1f;本文汇集了网络上的一些相关观点。\u0026#xD;ArsTechnica上发布了一篇有关以Ja…...

编程日记 2024/11/6 9:15:06

全包家装原创装修网站/怎么做百度网页

美食节 题解&#xff1a;学习了动态加边&#xff0c;可以说是进一步理解了网络流。具体思路就是考虑每一道菜&#xff0c;如果这是该位厨师最后一次做&#xff0c;那么等待时间就是做这道菜的时间&#xff0c;如果是倒数第二次做&#xff0c;就要两倍时间&#xff08;目前做了一…...

编程日记 2024/11/6 7:05:20

公司网站制作策划/seo赚钱培训

访问修饰符 修饰符 返回值类型 方法名(参数列表){ 　　语句块;} 访问修饰符&#xff1a;所有类成员访问修饰符都可以使用&#xff0c;如果省略访问修饰符&#xff0c;默认是private。 修饰符&#xff1a;在定义方法时修饰符包括virtual(虚拟的)、abstract(抽象的)、override(重…...

编程日记 2024/11/6 5:03:19

福州建设厅官方网站/国产系统2345

CSMA/CD&#xff08;CarrierSenseMultipleAccesswithCollisionDetection&#xff09;即带冲突检测的载波监听多路访问技术(载波监听多点接入/碰撞检测)。在传统的共享以太网中&#xff0c;所有的节点共享传输介质。如何保证传输介质有序、高效地为许多节点提供传输服务&#xf…...

编程日记 2024/11/6 4:34:52

做网站论坛 前置许可/长沙疫情最新数据消息

场景一&#xff1a;类似于微博&#xff0c;实现关注和被关注功能。 思路&#xff1a; 对每个用户使用两个集合类型键&#xff0c;用来存储关注别人的用户和被该用户关注的用户。当用户A关注用户B的时候&#xff0c;执行两步操作&#xff1a; sadd user:A B sadd user:B A 问题1…...

编程日记 2024/11/6 3:15:25