HTML笔记(3)

news2024/11/23 11:00:44

表单标签

       用于登录、注册界面,以采集用户输入的信息,把信息采集到之后,用户一点按钮,就会把这些信息发送到服务端,服务端就可以把这些数据存储到数据库,所以表单是一个非常重要的html标签,它主要是用于数据的采集功能,采集了数据之后和服务器来进行交互的一个手段。

代码演示

表单有图上框住的两个属性,数据才可以被提交。

method属性值默认为get

       在图上的位置有一个键值对 username = hehe,username就是文本输入框的name属性值,这个将来会作为键,所以不能少;hehe是文本输入框里输入的值。这个键值对将来就会被提交到服务端去,服务端就可以来解析这个键值对来获取到对应的数据。这里没有指定method属性,默认是get,所以键值对就被拼接到了URL地址栏的后面。

method属性值为post

提交数据前

提交数据后

完整版

 

表单项标签

       在修改的时候需要将id一起提交,但是又不能让用户填写,所以这里就需要type属性的取值为hidden,让它隐藏在表单里一起提交到服务端。

代码演示

运行效果

text & password

点击文字,输入框被选中效果

radio

性别单选框,选男选女提交到请求体中内容都是on;不选,请求体中就没有该项信息。

checkbox

单选框只能选一个,复选框可以选多个。

点击注册之后:

请求体中有两个爱好数据

file

选择图片之后的效果

点击注册后会将图片提交到请求体中

(这里知道<input type="file">这句代码可以提供一个文件选择的框框就行了,后续会学习到具体的文件上传相关的内容)

hidden

设置 id 为123

value值被隐藏,看不到隐藏域的效果。

运行后,id一起被提交到请求体中

rese重置按钮

选择数据后,点击重置:

选好的信息数据就会被清空

button按钮

现在没有任何效果,后面会结合JavaScript一起使用,产生一些点击的效果。

select下拉列表

没设置value值点击提交后

设置了value值点击提交后

textarea文本域

运行效果

在文本域输入内容,点击提交:

输入的内容被提交到请求体中

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

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

相关文章

机器学习之数据集

目录 1、简介 2、可用数据集 3、scikit-learn数据集API 3.1、小数据集 3.2、大数据集 4、数据集使用 ⭐所属专栏&#xff1a;人工智能 文中提到的代码如有需要可以私信我发给你&#x1f60a; 1、简介 当谈论数据集时&#xff0c;通常是指在机器学习和数据分析中使用的一组…

Thymeleaf快速入门及其注意事项

&#x1f600;前言 本篇博文是关于Thymeleaf的基本介绍&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的…

SAP安全库存-安全库存共享、安全库存简介

SAP系统中的安全库存用于管理计划外和计划内的库存需求,在某些行业中,由于不同的情况,如意外损耗、损坏、环境问题、制造工艺问题、需求增加等,通常会出现意外的库存需求。 SAP提供了维护安全库存的处理方式来处理这样的问题,安全库存的字段信息在主数据视图中,在物料需…

系统架构设计师---职责及与其他角色的关系区别

一. 系统架构设计师的职责如下: 系统架构设计师是系统或产品线的设计责任人,是一个负责理解和管理并最终确认和评估非功能性系统需求(比如软件的可维护性、性能、复用性、可靠性、有效性和可测试性等),给出 开发规范,搭建系统实现的核心构架,对整个软件架构、关键构件、…

商城-学习整理-高级-全文检索-ES(九)

目录 一、ES简介1、网址2、基本概念1、Index&#xff08;索引&#xff09;2、Type&#xff08;类型&#xff09;3、Document&#xff08;文档&#xff09;4、倒排索引机制4.1 正向索引和倒排索引4.2 正向索引4.3 倒排索引 3、相关软件及下载地址3.1 Kibana简介3.2 logstash简介…

MySQL运维MySQL读写分离

查看当前从库的状态 一主一从 1 3 上一样的 指定一个逻辑库 逻辑库不用指定逻辑表 当前逻辑库对应的数据节点 用balance2 是随机的

自适应AI chatgpt智能聊天创作官网html源码

我们致力于开发先进的自适应AI智能聊天技术&#xff0c;旨在为用户提供前所未有的聊天体验。通过融合自然语言处理、机器学习和深度学习等领域的顶尖技术&#xff0c;我们的智能聊天系统能够准确理解用户的需求并给出相应的回应。 我们的自适应AI智能聊天系统具备以下核心特点…

21.0 CSS 介绍

1. CSS层叠样式表 1.1 CSS简介 CSS(层叠样式表): 是一种用于描述网页上元素外观和布局的样式标记语言. 它可以与HTML结合使用, 通过为HTML元素添加样式来改变其外观. CSS使用选择器来选择需要应用样式的元素, 并使用属性-值对来定义这些样式.1.2 CSS版本 CSS有多个版本, 每个…

Java | IDEA中 jconsole 不是内部或外部命令,也不是可运行的程序

解决办法&#xff1a; 1.先将Terminal的Shell path 修改为C:\WINDOWS\system32\cmd.exe 2.在检查环境变量中的ComSpec的值 3.找到自己电脑下载的jdk的bin的地址 4.将jdk的bin地址加入到系统变量path中

windows权限维持—SSPHOOKDSRMSIDhistorySkeletonKey

windows权限维持—SSP&HOOK&DSRM&SIDhistory&SkeletonKey 1. 权限维持介绍1.1. 其他 2. 基于验证DLL加载—SPP2.1. 操作演示—临时生效2.1.1. 执行命令2.1.2. 切换用户 2.2. 操作演示—永久生效2.2.1. 上传文件2.2.2. 执行命令2.2.3. 重启生效 2.3. 总结 3. 基…

【Linux】【驱动】杂项设备驱动

【Linux】【驱动】杂项设备驱动 Linux三大设备驱动1. 我们这节课要讲的杂项设备驱动是属于我们这三大设备驱动里面的哪个呢?2.杂项设备除了比字符设备代码简单&#xff0c;还有别的区别吗?3.主设备号和次设备号是什么? 挂载驱动 杂项设备驱动是字符设备驱动的一种&#xff0…

JavaWeb学习-Day03

Ajax 同步与异步 Acios&#xff1a; 前后端分离开发 yapi&#xff1a;(YApi Pro-高效、易用、功能强大的可视化接口管理平台) 前端开发的工程化 Vue项目 template:定义HTML代码&#xff0c;相当于Vue当中的视图部分 script:定义JS代码&#xff0c;Vue当中的数据模型以及当中的…

AutoHotKey+VSCode开发扩展推荐

原来一直用的大众推荐的SciTeAHK版&#xff0c;最近发现VSCode更舒服一些&#xff0c;有几个必装的扩展推荐一下&#xff1a; AutoHotkey Plus 请注意不是AutoHotkey Plus Plus。如果在扩展商店里搜索会有两个&#xff0c;一个是Plus&#xff0c;一个是Plus Plus。我选择Pllus&…

logstash 原理(含部署)

1、ES原理 原理 使⽤filebeat来上传⽇志数据&#xff0c;logstash进⾏⽇志收集与处理&#xff0c;elasticsearch作为⽇志存储与搜索引擎&#xff0c;最后使⽤kibana展现⽇志的可视化输出。所以不难发现&#xff0c;⽇志解析主要还 是logstash做的事情 从上图中可以看到&#x…

音视频技术开发周刊 | 306

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 人工智能研究人员声称&#xff0c;通过Zoom音频检测击键的准确率为93% 通过记录按键并训练深度学习模型&#xff0c;三位研究人员声称&#xff0c;基于单个按键的声音特征…

前后端分离------后端创建笔记(11)用户删除

B站视频&#xff1a;30-用户删除&结束语_哔哩哔哩_bilibili 1、现在我们要做一个删除的功能 1.1 首先做一个删除的功能接口&#xff0c;第一步先来到后端&#xff0c;做一个删除的接口 2、删除我们用Delete请求 3、方法名我给他改一下 3.1这里给他调一下删除方法&#xf…

【Vue-Router】导航守卫

前置守卫 main.ts import { createApp } from vue import App from ./App.vue import {router} from ./router // import 引入 import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(router) // use 注入 ElementPlu…

《算法竞赛·快冲300题》每日一题:“圆内的最短距离”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 圆…

第五章 Opencv图像处理框架实战 5-10 文档扫描OCR识别

一、整体流程演示 上一篇我们进行了银行卡数字识别,这次我们利用opnecv等基础图像处理方法实现文档扫描OCR识别,该项目可以对任何一个文档,识别扫描出该文档上所有的文字信息。 为了方便后续程序运行,大家可以在Run->Edit Configuration中配置相关参数,选择相应编译器…

使用PostgreSQL构建强大的Web应用程序:最佳实践和建议

PostgreSQL是一个功能强大的开源关系型数据库,它拥有广泛的用户群和活跃的开发社区。越来越多的Web应用选择PostgreSQL作为数据库 backend。如何充分利用PostgreSQL的特性来构建健壮、高性能的Web应用?本文将给出一些最佳实践和建议。 一、选择合适的PostgreSQL数据类型 Pos…