Form表单介绍

form表单有什么作用?

Form 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。

表单的工作机制

表单工作机制

有哪些常用的input 标签,分别有什么作用?

text 单行文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件上传
select 下拉框
option 下拉选项
textarea 多行文本
hidden 隐藏域
button 普通按钮
submit 提交按钮
reset 重置按钮

POST 和 GET 方式的区别?

本质上,Get是向服务器发索取数据的一种请求,而POST是向服务器提交数据的一种请求。

GET请求:是把参数数据队列加到提交表单的action属性所指的URL中,如:http://www.xxx.com?username=subin&age=20。在URl中,值和表单标签名称各个字段一一对应,并且这些在URl中对用户来说是可见的,即用户时可以看到的。即:name=value

POST请求:POST请求会把请求的数据放置在HTTP请求包的包体中。也就是HTML HEADER内一起传送到action属性所指的URL地址。

因此,GET请求的数据会暴露在地址栏中,而POST请求则不会。

2、传输数据的大小
在HTTP规范中,没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中,对于GET,特定的浏览器和服务器对URL的长度有限制。因此,在使用GET请求时,传输数据会受到URL长度的限制。

对于POST,由于不是URL传值,理论上是不会受限制的,但是实际上各个服务器会规定对POST提交数据大小进行限制,Apache、IIS都有各自的配置。

3、安全性
POST的安全性比GET的高。这里的安全是指真正的安全,而不同于上面GET提到的安全方法中的安全,上面提到的安全仅仅是不修改服务器的数据。比如,在进行登录操作,通过GET请求,用户名和密码都会暴露再URL上,因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因,此时的用户名和密码就很容易被他人拿到了。除此之外,GET请求提交的数据还可能会造成Cross-site request frogery攻击

4、另外
GET后退按钮/刷新无害,POST数据会被重新提交(浏览器应该告知用户数据会被重新提交)。
GET书签可收藏,POST为书签不可收藏。
GET能被缓存,POST不能缓存 。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET编码类型application/x-www-form-url,POST编码类型application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
GET只允许 ASCII 字符。POST没有限制。也允许二进制数据

在input里,name 有什么作用?

name:表单的名称。注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。

radio 如何 分组?

使用name相同的一组单选按钮,不同radio设定不同的value值
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

placeholder 属性有什么作用?

placeholder 属性是 HTML5 中的新属性。
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, password、 search, url, telephone,以及 email
具体写法:
<input type="password" name="password" placeholder="请输入密码">
效果展示:

type=hidden隐藏域有什么作用? 举例说明

隐藏域具体写法:
<input type="hidden" name="field_name" value="value">
hidden隐藏域无外乎下面六点作用:

  • 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
  • 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
  • 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
  • 有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。
  • javascript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。
  • 还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单在web应用中主要是用来进行数据...
    yangjie727阅读 4,367评论 0 0
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 9,513评论 0 3
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于为用户创建HTML表单,并向服务器...
    zx9426阅读 3,693评论 0 1
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 4,421评论 0 1
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 8,700评论 2 14

友情链接更多精彩内容