博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html表单
阅读量:6083 次
发布时间:2019-06-20

本文共 2862 字,大约阅读时间需要 9 分钟。

####什么是form表单? form表单是用来收集用户输入信息的表单。一般形式为:

.form elements.
复制代码

具体介绍可参考w3c 接下来以一个常规用户登录页面作为示例介绍form表单的应用:

复制代码

页面效果如下:

####从input标签开始介绍 对form表单来说,input标签是最重要也是最常用的form表单元素,该标签有多个type类型,每种类型又对应着不同的功能,首先来举几个例子。

  • type = "text",文本类输入框,一般用于输入账号等明文信息
 //输入框名称,for属性对应input的id,添加for属性后,当点击label标签时,相当点击了其for属性对应id的input        //name属性指代该输入信息名称,表单提交时该信息对应的name值。placeholder为提示信息,不会影响表单提交数据复制代码

  • type = "password",密码输入框,以暗文展示。
  //value值设置时,改输入框的默认输入值即value值复制代码

  • type = "radio",单选框,一般用于选择性别等单选信息,name值相同的radio标签是一组,且只能单选,value值及该标签的值
男 //设置checked属性,相当于设为默认选中状态 女复制代码

  • type = "checkbox",多选框,和单选框类似,唯一区别是可以多选。
                                                                        复制代码

  • textarea标签,该标签为独立标签,为文本域,用来输入多行文本,此处要注意的是该标签不是自闭和标签。
 //cols="60"指该文本域宽度为60列,rows="20"指该完本高度为20行,标签内的内容为初始值,不设则为空复制代码
  • select标签,下拉选择框,其中每个option对呀下拉框的值
            复制代码

  • 提交,当我们填写完表单信息后,需要将填写完成的表单内容提交到服务器,此时需要一个提交按钮
 //input的type属性设为submit,这就是一个提交按钮,点击之后会把表单内容提交  //另外,直接使用button标签也具备提交功能复制代码
  • 但是,当我们仅仅只是需要一个按钮而不需要表单进行提交操作时,该怎么办呢?小菜一碟!此时只需要把type值设为button即可,这样我们就得到一个不具备提交功能的按钮啦。
复制代码

####最后,再回到form 当我们点击提交按钮之后,表单内容会被浏览器通过我们设置的提交方式来提交给我们指定的地址,那么提交方式和地址从哪里来的呢?我们在回头看看示例的form标签。form标签的action属性指定我们的表单数据提交的地址,method指定提交方式。

复制代码

form表单的提交方式有两种,get和post。这两种方式有什么区别呢? 1.本质

Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求

2.服务器端获取值的方法

get方式提交的数据,服务器端使用request.QueryString获取变量的值

post方式提交的数据,服务器端使用request.Form获取数据

3.安全性

get方式安全性低,post方式较安全。但是post方式执行效率要比get方式差一些。

4.机制

get是把参数数据队列加到提交表单的action属性所指的URL中,如:http://www.xxx.com?sessonid=db23434&name=hongten&age=20。 在URl中,值和表单南日各个字段一一对应,并且这些在URl中对用户来说是可见的,即用户时可以看到的。如:name=hongten。

post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址,对于用户来说,这是透明的。

5.大小

URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。

get提交在浏览器中url的体现:

get提交在浏览器中传送的数据:

可以看到,使用get方式提交,我们输入的内容(包括隐私的密码),都体现在url中。

post提交在浏览器中url的体现:

post提交在浏览器中传送的数据:

可以看出,传送一样的数据,post相对get来说更加安全,但也并不是说get方式不可取,在某些方面,比如搜索引擎搜索字段传值可以使用get,更加直观。所以重在日常工作中,post和get两种提交方式需要灵活运用。

今天就介绍到这里,如有错误,欢迎纠正。

转载地址:http://zlkwa.baihongyu.com/

你可能感兴趣的文章
使用grep、awk统计查询日志
查看>>
Spring 5 core 中的 @NonNull 是个什么鬼?!
查看>>
vsftpd系列--2--匿名访问控制
查看>>
Excel工作表保护破解方法
查看>>
实现geo相关
查看>>
SSM项目搭建三(终)
查看>>
vmware esxi基础篇之模版与克隆
查看>>
拥抱 Gradle: 下一代自动化工具
查看>>
CyclicBarrier让多线程齐步走
查看>>
tomcat与web程序结构与Http协议与HttpUrlConnection
查看>>
PHPStorm下调试使用CURL抓取数据中文乱码的一种可能
查看>>
解决hadoop namenode -format / hdfs namenode -format 找不到java的文件目录
查看>>
springMVC 几种页面跳转方式
查看>>
Python的集合类型详解17
查看>>
HBase配置优化
查看>>
英特网级别的服务设计及部署
查看>>
动态路由
查看>>
mssql dba問題與答案
查看>>
悦悦走好
查看>>
分享一些 Kafka 消费数据的小经验
查看>>