您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

如何将浏览器上的数据,提交到服务器?

时间:2020-10-23 11:00:26  来源:  作者:
如何将浏览器上的数据,提交到服务器?

 

一、form表单

form,表格、表单的意思,我一开始把它和from搞混了。

还在想from不是从……开始的意思么,和表单有什么关系,感觉快被自己蠢哭了。

表单的作用就是将数据提交给服务器,至于其具体是如何提交的,暂时还不清楚,后续会学习到。

在我们现实生活中也挺常见的,有时会使用到的注册页面就可以理解成一个表单。

如何将浏览器上的数据,提交到服务器?

 

表单由三个部分组成:

1表单标签

包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

也就是对应form表单中的两个属性:action和method。

action就是指数据提交的路径,其中#表示的是本页面。

method也就是表单提交的方式

  • get:数据会出现在地址栏上面,是可见的,不安全。
  • post:提交的参数不会显示在地址栏上,是不可见的,相对而言更加安全。

2表单域

用户名,密码,邮箱这些都是表单域中的一部分。

3表单按钮

注册按钮也就是其中的一种。

form其子标签有:input(输入的内容),select(下拉框),textarea(文本域)

现在用代码演示表单是如何写出来的。

二、input标签

input 输入的意思,它是form标签中非常重要的子标签。

1.type属性

如何将浏览器上的数据,提交到服务器?

 

①用户名:type="text"

这个是默认的类型,也就是说如果input子标签中什么都不写的话就是文本框。

②密码:type="password"

密码框和文本框的区别在于文本框里的数据用户直接能看到,但是密码框里的数据,用户直接看不到。

③性别:type="radio"

radio,收音机,在这儿是单选框的意思。性别要么男,要么女也好理解。

④爱好:type="checkbox"

checkbox,复选框,意思就是可以同时选择好几个。

⑤生日:type="date"

也就是日期,日期在表单中是一个时间框,用户选择对应时间点击就好了。

⑥上传头像:type="file"

直接选择本地文件就可以上传了。

⑦提交按钮

一共有三种按钮:提交按钮,重置按钮和一般按钮。

  • 提交按钮是最基本的按钮,提交数据。
  • 重置就是可以将数据一键清零。
  • 一般按钮,上述中是用一张图片代替的,更美观,其本质还是被用来当成一个提交按钮。

⑧隐藏域:type="hidden"

顾名思义,数据是隐藏的,页面上面看不到。

2.其它属性

前面只是初步做出了一个模型,还有属性将表单功能进一步完善。

如何将浏览器上的数据,提交到服务器?

 

①name属性和values属性

基本上每一个input标签都可以设定name和values属性。

如果是文本框密码框,values表示的也就是初始默认值。

其中生日和头像不需要values,可以设定name,因为其本身就是一个输入框,values相当于是从外部传入的。

其中提交按钮不需要name,但是可以设定values(也就是按钮显示的文字)。

name和value具体有什么用呢?看下图;

如何将浏览器上的数据,提交到服务器?

 

如果拿JAVA中的知识点做一个比较的话:

  • name就相当于Map集合中的key。
  • value就相当于Map集合中的value。

②单选框功能完善

如果name设定是一样的,那么就只能选择一个,不然就算都是单选框,但是name不一样,还是可以多选。

value表示其对应的值,比如用0表示是男,1表示是女。

checked="checked",这个可以用来指定单选框的默认值。

其中我通过测试发现:如果单选框中都有这个默认属性,那么默认值是最后面的那个单选框。

③复选框

和单选框一样的道理,唯一区别就是可以多选。

三、input标签(了解)

1.其它属性

上述中说明的属性都是form表单中非常常见的。

除此之外还有一些其它属性,相对而言不是经常见,但最好也对其有一定的了解。

如何将浏览器上的数据,提交到服务器?

 

①size属性

用来控制文本框的长度,默认大小是20

②maxlength属性

可以设定输入的最大长度,我设置的是6,那么文本框里输入的字符只能有6个。

③readonly属性

只读的意思,文本框中的数据可以选中也可以点击,数据会提交但是不能修改。

④disabled属性

不可用的意思,只能看,不能选也不能点,并且数据也不会提交。

2其它type属性

如何将浏览器上的数据,提交到服务器?

 

button:可以定义一个可点击的按钮。

color:可以设定颜色(RGB)。

week:用第几周来表示时间。

month:用第几月来表示时间。

emil:定义一个邮件文本框(可用来校验输入格式)

type中的属性实在是太多了,就不一一说明了,详情见下图:

如何将浏览器上的数据,提交到服务器?

 

四、下拉框和文本域

学完form表单中的input子标签,还有两个子标签select和textarea。

1下拉框

如何将浏览器上的数据,提交到服务器?

 

name属性:也就是浏览器中地址栏里的name。

option属性:选项,有它才能有多个选项,这样才会出现下拉框。

multiple属性:多样的,用其可以多选。

size属性:多选时用以表示一次显示的数量。

如果不用multiple属性,这是单选,也就是图中右下角。

2文本域

如何将浏览器上的数据,提交到服务器?

 

name属性:提交时需要,不再赘述。

rows属性:文本域中的行数。

cols属性:文本域中的列数。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。



Tags:数据   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
这是很久以前的一则数据,我在iOS平台开发了“先知 - 优质生活”App,本想依靠封闭式环境,广告少体验不错等优点。会有一定的下载量,没想到开发完成后,就被App store埋藏起来了。个...【详细内容】
2021-12-27  Tags: 数据  点击:(2)  评论:(0)  加入收藏
安装环境Linux服务器:Centos 6 64位Oracle服务器:Oracle11gR2 64位 系统要求说明:内存必须高于1G的物理内存;交换空间,一般为内存的2倍(1G的内存可以设置swap 分区为3G大小);硬...【详细内容】
2021-12-27  Tags: 数据  点击:(2)  评论:(0)  加入收藏
作者:雷文霆 爱可生华东交付服务部 DBA 成员,主要负责Mysql故障处理及相关技术支持。爱好看书,电影。座右铭,每一个不曾起舞的日子,都是对生命的辜负。 本文来源:原创投稿 *爱可生...【详细内容】
2021-12-24  Tags: 数据  点击:(6)  评论:(0)  加入收藏
为啥这几年偷税漏税的新闻这么多?不是偷的人多了,是因为国家有了查税大杀器: ...【详细内容】
2021-12-24  Tags: 数据  点击:(8)  评论:(0)  加入收藏
博雯 发自 凹非寺量子位 报道 | 公众号 QbitAI在炼丹过程中,为了减少训练所需资源,MLer有时会将大型复杂的大模型“蒸馏”为较小的模型,同时还要保证与压缩前相当的结果。这就...【详细内容】
2021-12-24  Tags: 数据  点击:(9)  评论:(0)  加入收藏
前言JDBC访问Postgresql的jsonb类型字段当然可以使用Postgresql jdbc驱动中提供的PGobject,但是这样在需要兼容多种数据库的系统开发中显得不那么通用,需要特殊处理。本文介绍...【详细内容】
2021-12-23  Tags: 数据  点击:(12)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的HasorDB 是一个全功能数据库访问工具,提供对象映射、丰...【详细内容】
2021-12-22  Tags: 数据  点击:(5)  评论:(0)  加入收藏
现有数据架构难以支撑现代化应用的实现。 随着云计算产业的快速崛起,带动着各行各业开始自己的基于云的业务创新和信息架构现代化,云计算的可靠性、灵活性、按需计费的高性价...【详细内容】
2021-12-22  Tags: 数据  点击:(10)  评论:(0)  加入收藏
作者丨Rafal Grzegorczyk译者丨陈骏策划丨孙淑娟【51CTO.com原创稿件】您是否还在手动对数据库执行各种脚本?您是否还在浪费时间去验证数据库脚本的正确性?您是否还需要将...【详细内容】
2021-12-22  Tags: 数据  点击:(3)  评论:(0)  加入收藏
读取SQLite数据库,就是读取一个路径\\192.168.100.**\position\db.sqlite下的文件<startup useLegacyV2RuntimeActivationPolicy="true"> <supportedRuntime version="v4.0"/...【详细内容】
2021-12-16  Tags: 数据  点击:(21)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条