html提交表单原理,HTML5之Form 表单理论
一、form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
表单的作用是搜集用户的输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。
name:表单提交时的名称
action:提交到的地址
method:提交方式,get和post(默认是get)
input标签根据type属性不同,分以下常用标签:
button——定义可点击的按钮
checkbox——定义复选框
radio——定义单选按钮
text——定义单行输入框,可在其中输入文本
file——定义输入字段和“浏览”按钮,供文件上传
hidden——定义隐藏的输入字段
image——定义图像形式的提交按钮
password——定义密码字段,该字段中的字符被掩码
reset——定义重置按钮,用于清除表单中的所有数据
submit——定义提交按钮,把表单数据发给服务器
二、post 和 get 方式的区别?
表象不同,get把提交的数据url可以看到,post看不到
原理不同,get 是拼接 url, post 是放入http 请求体中
提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
get提交的数据在浏览器历史记录中,安全性不好
场景不同,get 重在 "要", post 重在"给"
在搜索引擎中检索信息时,应使用get方法,而在注册、登录、提交用户信息等场景中,应使用post方法
三、在input里,name 有什么作用?
规定input元素的名称,用于对提交到服务器后的表单数据进行标识
在客户端提供给 JavaScript,使其可以引用表单数据
用于单选/多选分组,相同name为一组
四、radio 如何 分组?
radio 使用name属性来分组的,所有name属性相同的radio 使用时其中只有一个会被选中。如:
性别:
男
女
取向:
男
女
五、placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失,且不会被提交
六、type=hidden隐藏域有什么作用? 举例说明
作用:对用户不看见,但是可以提交,这个特点应用很多
常见的防范CSRF:服务端防范的办法为在用户成功登录过后向客户端返回一个随机的token,由客户端放在表单的隐藏域中,在提交表单是一并提交到服务器,由服务器验证通过后在执行相关的逻辑操作。
type=hidden应用总结
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上οnclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。
javascript不支持全局变量(我们常说的全局变量其实是最外层作用域中的变量),但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。
还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。
七、 HTML 表单的用法
八、实现如下表单,附上预览地址。其中性别和取向是单选,爱好是多选
image.png
预览地址
html提交表单原理,HTML5之Form 表单理论相关推荐
- ajax提交表单跨域啊,form表单提交没有跨域问题,但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...
- vue表单提交数组_ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- form表单校验复杂系列--- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传
form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传 前言 公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...
- html5之form表单
表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能.一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的 ...
- php 提交表单跳转页面,form表单页面跳转方式提交练习
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 //form表单提交练习 /*新建一个form.html网页用来书写前端HTML表单*/ 表单提交练习 姓名: 年龄: 电话: 地址: QQ: 自我评价: ...
- php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...
- php 表单页面跳转,form表单页面跳转方式提交练习
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 //form表单提交练习 /*新建一个form.html网页用来书写前端HTML表单*/ 表单提交练习 姓名: 年龄: 电话: 地址: QQ: 自我评价: ...
- Html5的form表单案例
form表单 应用场景:提供给用户输入的位置 作用:将客户端用户输入的数据送到服务器端 <!DOCTYPE html> <html><head><meta c ...
- java 提交表单_http常见的form表单请求方式
在Web开发中,我们使用的比较多的HTTP请求方式基本上就是GET.POST. 一.http请求常见的表单文件上传形式 首先了解下application/x-www-form-urlencoded和m ...
- layui提交表单自动刷新_layui form表单提交后实现自动刷新
刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...
最新文章
- 云计算从“仰望星空”到“脚踏实地”
- selenium操作浏览器的前进和后退
- Python2.x还是3.x?
- 机器码合集开源易语言源码-市场上带多数的
- 图片服务 - thumbor设置背景色
- css legend框大小,CSS-如何给 legend 标签设定宽度
- SQL Server - 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表)
- [蓝桥杯解题报告]第九届蓝桥杯大赛省赛2018(软件类)真题C++A组 Apare_xzc
- 跟着“不睡觉的怪叔叔”一起学习openlayers入门
- sklearn.neighbors.KNeighborsClassifier函数详解
- 华为Vo5G技术GC方式下引入G
- 三角形外接圆与内切圆
- 赵小楼《天道》《遥远的救世主》深度解析(47)为什么要给韩楚风的司机小赵点赞?芮小丹是怎么做到“反客为主、打破阶层”的?
- 每日10行代码57: appium测试坚果手机出现socket hang up报错的解决
- 浅析:SEO是什么意思?
- ruyistdio IDE caffemodel 转.wk
- 360与腾讯的连横合纵
- USF MSDS501 计算数据科学中文讲义 1.3 播放声音
- kc网络电话 不能使用 GPRS蜂窝网络?
- python和R语言比较
热门文章
- 时间管理(二):时间管理的六项基本原则
- [转]Java 的强引用、弱引用、软引用、虚引用
- 设计模式 (十八 ) 观察者模式
- spring扩展点五:factoryBean的使用
- (十二)JAVA springboot微服务b2b2c电子商务系统:使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪...
- 对语音通话占用带宽的理解
- linux下内存调试工具——valgrind
- Python学习资源收集
- HDOJ-2602 Bone Collector [DP-01背包问题]
- static 和 const的解释(转载)