美文网首页
Form表单知识点

Form表单知识点

作者: Feiyu_有猫病 | 来源:发表于2017-03-19 16:28 被阅读0次

1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

表单对于用户而言是数据的录入和提交的界面,对于网站而言是获取用户信息的途径。它可以将用户输入的信息提交给网站服务器。

  • <input name="xxx" type="text">
    普通文本输入框,用于提交文本信息。
  • <input name="xxx" type="password">
    密码输入框,用于输入密码。
  • <input name="xxx" type="radio">
    单选框,用于用户勾选单选信息。
  • <input name="xxx" type="checkbox">
    多选框,用于用户勾选多选信息。
  • <input name="xxx" type="button">
    用于在页面上添加一个普通按钮。按钮可赋予不同的功能。
  • <input name="xxx" type="submit">
    用于在页面上添加一个提交按钮,用于提交表单数据。
  • <input name="xxx" type="reset">
    用于在页面上添加一个重置按钮,便于用户修改所填信息。
  • <input name="xxx" type="image">
    用一幅图像作为按钮。
  • <input name="xxx" type="file">
    用于用户上传文件。
  • <input name="xxx" type="hidden">
    隐藏的表单,通常用于数据验证,提高网站安全性。

2.post 和 get 方式的区别?

get:将表单的填充信息以key=value的形式拼接到action属性所指的url中,并跳转到这个url。例如文本输入框中input的name属性值为key,输入的内容为value
post:是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

  • get方式会跳转url地址,post方式不会。
  • get方式安全性低,post方式安全性高。
  • get方式传输的数据量较小,post方式传输数据量较大。

一般向后台传输关键词,向后台查询索要数据,可以用get。
而主要功能是将用户输入的数据传输给后台的情况下,一般用post。

3.在input里,name 有什么作用?

name表示该表单项的名称,用于跟其他表单项区别开来。在提交数据时name的值也会一并提交以区分数据种类。

4.radio 如何 分组?

<input name="单选按钮名称" type="radio" value="单选按钮取值" />
在多个单选按钮中,name属性值相同的为一组,一组中仅有一个选项可选。name属性值不同则不属同一组,选项互不影响。

5.placeholder 属性有什么作用?

用于在表单输入框内添加提示信息,该提示信息会在输入字段为空时显示,并会在字段获得焦点时消失。该提示信息仅作为对用户的提示,不会跟随表单数据一起提交服务器。

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

hidden隐藏域无外乎下面六点作用:

  1. 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
  2. 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
  3. 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
  4. 有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。
  5. javascript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。
  6. 还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。

例如:

  • <input name="xxx" type="hidden" value="123abc">
    网页开发者在一个表单中添加此隐藏域。当用户在提交表单时,此隐藏域的信息也会被一起提交到服务器。服务器就可以辨别有此隐藏域数据的是用户正常途径提交上来的,而有些没有此隐藏域数据的就可能是恶意的csrf跨站攻击。从而达到一定的防csrf攻击的效果。

相关文章

  • react学习(20)非受控组件

    知识点: 1:对于表单:form的action属性是用来标识表单要提交的地址,form有一个onsubmit原生事...

  • 关于vue v-decorator

    ant-desigin-vue中form表单的使用 form表单的使用 form表单之获取表单的数据 创建表单 通...

  • bootstrap表单

    bootstrap表单 1、form 声明一个表单域2、form-inline 内联表单域3、form-horiz...

  • form表单知识点

    form表单 form表单作用 简单来说用来通过web服务向server提供数据,实现调用搜索等任务,以及用户与w...

  • Form表单知识点

    1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单对于用户而言是数据的录入和提交的界...

  • Form 表单知识点

    form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 提交表单输入的信息,用于向服务器传输数据。...

  • Vue.js-ElementUI表单

    1 表单el-form 每个表单el-form由多个表单域el-form-item组成。默认情况,表单域是垂直分布...

  • 前端面试每日 3+1 —— 第132天

    今天的知识点 (2019.08.26) —— 第132天 [html] 触发form表单自动提交的方式有哪些? [...

  • Form表单、四种常见的POST请求提交数据方式、MIME【转】

    浏览器行为:Form表单提交 1、form表单常用属性 enctype为form表单数据的编码格式,Content...

  • Bootstrap全局样式 - 表单

    知识点 基本表单 、 、 设置.form-control类,这些元素将会被设置为 width:100%;heigh...

网友评论

      本文标题:Form表单知识点

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