form表单的若干疑问

form表单的若干疑问


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

HTML <form>表单用于搜集不同类型的用户输入。
<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。(根据不同的 type 属性值,输入字段拥有很多种形式。<input type="text">

常用的<input>有如下几种:

标签 作用
text 默认。定义一个单行的文本字段。(默认宽度为20)
password 定义密码字段。(字符会被遮盖)
checkbox 复选框(checked属性:是否选中)
radio 单选框(name属性:指定多个单选框的在一个区域里进行单选操作)
button 定义普通按钮。常用于与JS一起启动脚本。(value属性:button按钮显示的文本)
reset 定义重置按钮(清除文本区域内容,重置所有表单值为默认值)
submit 定义提交按钮。
hide 定义隐藏输入字段。(存放仅用于自己使用的信息)
file 定义输入字段和 "浏览"按钮,供文件上传。
image 定义图像形式的提交按钮。

参考 Tina_xy:全面剖析 <input> 标签 ------ HTML\HTML5


post和get方式提交数据有什么区别?

  1. 安全性不同,get把提交的数据url可以看到,post在页面地址栏中被提交的数据是不可见的;
  2. 原理不同,get是拼接 url, post是放入http 请求体中;
  3. 提交数据量不同,get 最适合少量数据的提交,浏览器会设定容量限制,但post理论上无限制,受服务器限制;
  4. get提交的数据在浏览器历史记录中,安全性不好;
  5. 应用场景不同,如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息,且数据量较少时,可以使用get,并且这是form表单的默认提交方法。如果表单正在更新数据,或者包含敏感信息(例如密码)。则post更佳。

在input里,name有什么作用?

  1. name 属性规定 input 元素的名称。
  2. name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript 引用表单数据。
  3. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
  4. 在同一组input下,比如type属性为radio或者checkbox,单选复选框时,value值不同,但name一般是一样的,用来表示在一组。

radio如何分组?

radio可以通过在input标签中对name属性设置相同的值来实现分组,不同的radio选项通
过赋相同的name值来表示它们是处于同一组的,处于同一组后,即可实现同组radio只能选择一个的单选作用了


placeholder属性有什么作用?

placeholder这个单词中文意思是:占位符,占位文本,因此 placeholder="我是占位内容",用于在文本框中预设相关的文本信息,以提醒用户。当用户在文本框中键入了其他字符,则占位内容自动消失。


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

hidden隐藏域也是表单元素之一,它的语法和其他表单元素一样:

<input type="hidden" name="field_name" value="value"> 

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

参考码农教程:html hidden隐藏域作用及用法实例介绍


列出你所知道的HTML 5标签

很多新增的,但是有些即使是新增,但是不建议使用,比如很多时候在css里面做定义会更便于后期维护,以下列举一些常用的:

标签 作用
<article> 定义文章
<aside> 定义页面内容之外的内容
<audio> 定义声音内容
<canvas> 定义图形
<header> 定义 section 或 page 的页眉
<footer> 定义 section 或 page 的页脚
<nav> 定义导航链接
<section> 定义 section
<track> 定义用在媒体播放器中的文本轨道
<video> 定义视频
<time> 定义日期/时间

CSRF攻击是什么?如何防范?

CSRF (Cross Site Request Forgery)攻击,中文名:跨站请求伪造。

其原理是攻击者构造网站后台某个功能接口的请求地址,诱导用户去点击或者用特殊方法让该请求地址自动加载。

用户在登录状态下这个请求被服务端接收后会被误以为是用户合法的操作。对于 GET 形式的接口地址可轻易被攻击,对于 POST 形式的接口地址也不是百分百安全,攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。

关于防范:

首先用户习惯上,不要浏览一些不安全的网站,轻易点击陌生人发布的链接等。

从网站开发者角度:
尽量少用get,采用anti-csrf-token,服务器收到用户请求后,在页面生成 hidden属性的input表单,埋入预先生成的随机数。同时服务器端进行设置,把该随机数作为cookie或者session写入用户浏览器,最后当用户发送请求时,会自行带上csrf_token参数,当后台收到请求后,就会解析cookie中的csrf_token值,与之前埋入用户页面中的值做对比,相等,即是合法请求,此时,服务器端才能收到正常的请求。

CSRF 是什么?——饥人谷若愚

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 226,197评论 6 524
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,254评论 3 410
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 173,718评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,801评论 1 305
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,732评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,200评论 1 318
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,389评论 3 433
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,484评论 0 282
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,024评论 1 328
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,013评论 3 352
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,125评论 1 359
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,698评论 5 353
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,407评论 3 342
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,795评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,996评论 1 278
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,724评论 3 384
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,150评论 2 368

推荐阅读更多精彩内容