美文网首页
Form表单介绍

Form表单介绍

作者: 饥人谷_溯彬 | 来源:发表于2017-06-14 17:05 被阅读0次

    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时就自己关掉

    相关文章

      网友评论

          本文标题:Form表单介绍

          本文链接:https://www.haomeiwen.com/subject/zszsqxtx.html