Form表单

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

  • Form表单的作用是:收集用户通过页面填写的信息,然后传给后台。
  • 常见的<input>标签及其作用
    首先要注意所有的表单都必须要放到<form></form>中,否则提交是无效的。
    下面列举出常见的<input>的type类型:
    单行文本输入框type="text":
<div class="text">
            <label for="username"></label>
            <input type="text" name="username" id="username" placeholder="输入用户名">
            <!--普通的单行文本输入框-->
        </div>

密码输入type="password"

        <div class="password">
            <label for="password"></label>
            <input type="password" name="password" id="password" placeholder="输入密码">
            <!--密码输入框,输入时默认是小圆黑点-->
        </div>

复选框type='checkbox'

        <div class="checkbox">
            <label>喜欢的运动</label>
            <input type="checkbox" name="sports" value="basketball">篮球
            <input type="checkbox" name="sports" value="baseball">棒球
            <input type="checkbox" name="sports" value="football"> 足球
            <!--复选框,使用的时候name要设置一致表明是一组选项。 value的值会根据用户填写选项返回给后台-->
        </div>

单选框type="radio"

        <div class="radio">
            <label>性别</label>
            <input type="radio" name="sex" value="male">man
            <input type="radio" name="sex" value="female">woman
            <!--单选框,其中name属性相同的为同一组选项,value的值会根据用户填写选项返回给后台-->
        </div>

上传文件 type="file"

        <div class="file">
            <input type="file" name="myFile" accept="image/gif">
            <!--用于上传文件-->
        </div>

隐藏域type="hidden"

        <div class="hidden">
            <input type="hidden" name="csrf" value="12u31uhuhdsg1dsyu12ghe1">
            <!--页面上用户看不到的隐藏域,可以用于防止csrf攻击,通过检查传到后台的value判断用户是否合法-->
        </div>

下面是提交和重置的type类型
提交

        <div class="submit">
            <input type="submit" value="submit">
            <!--提交-->
        </div>
        <div class="button">
            <button value="提交"></button>
            <!--提交-->
        </div>

重置

        <div class="reset">
            <input type="reset" value="reset">
            <!--重置已经输入的内容-->
        </div>

下面介绍其他相关标签:
下拉选择框select:

        <div class="select">
            <select name="sports">
                <option value="basketball">篮球</option>
                <option value="baseball">棒球</option>
                <option value="football" selected>足球</option>
            </select>
            <!--下拉选择框,其中<option>的 selected 表示初始默认选择项-->
        </div>

多行文本输入框textarea:

        <div class="textarea">
            <textarea name="textarea" id="textarea" cols="30" rows="10">
                可以输入多行的文本,而type="text"只允许输入单行文本
            </textarea>
        </div>

二.post 和 get 方式的区别?

在form标签中,一般属性有action和method,action表示的是表单提交信息的地址,而method是表示用何种方式传递数据,有get和post两种方式,下面比较两种方式的区别。

<div class="form">
    <form action="/deejay" method="post">

    </form>
</div>

get一般用于获取和查询数据信息,post一般用于更新资源。
get一般就像数据库查询一样,仅仅获取资源信息,并不会修改服务器上的值,post是用于更新资源的,可能会修改服务器上的资源。

  • 两种提交方式的区别
  1. get
    get请求的数据会加到URL之后,请求多个参数的时候用&隔开,传输的数据和URL依靠?分隔开来,例如
    [http://www.it315.org/counter.jsp?name=zhangsan&password=123]。另外url的编码格式为ASCII码,所有的非ASCII字符都需要重新编码在进行传输。
  2. post
    用post方式提交数据的时候,请求的数据是放到HTTP包的包体中的,所以post提交的情况浏览器的地址栏不会改变。
  • 传输数据的大小差异
    由于上述方式的差异,get方式一般提交的数据最多为1kb(1024字节),而post没有限制,可以传输较多的数据。
  • 安全性问题
    使用get请求发送数据的时候,你的username和password都会出现在URL上,很容易泄露,并且get请求可以被缓存。post请求不可以被缓存,相比之下post安全性要比get的安全性高
    所以要满足get是向服务器发送索取数据的一种请求,post是向服务器提交数据的一种请求这一条件。

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

在input标签中,name属性表示的是input元素的名称,只有设置了name属性的表单元素才能成功传递他们的值。另外在单选框中,name属性还起到分组的作用。

四.radio 如何 分组?

        <input type="radio"name="sex1" value="man">男
        <input type="radio" name="sex1" value="woman">女

        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女

中,通过设置name的值来确定分组,name属性的值相同的为同一组,同一组的只允许单选。

五.placeholder 属性有什么作用?

        <div class="text">
            <input type="text" name="username" placeholder="请输入用户名">
        </div>

运行效果为


placeholder效果

,会给用户一个提示内容引导用户输入数据。

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

<input type="hidden">称作表单隐藏域,对于用户来说是不可见的。用来传递参数和一些特殊的功能。可以暂时存储网站安全的信息以及一些其他数据。
隐藏域的优势在于支持所有的浏览器,在用户禁用cookie的时候也能使用。
一些具体的应用举例:

  1. 一般页面中form中有多个提交按钮时,如果要判断用户是通过哪一个按钮提交,就可以在每一个按钮上加上一个隐藏域来确定。
  2. 再或者要确定用户登录本页面时间长短,也可以通过设置隐藏域。
  3. 可以防止CSRF攻击,请求时,通过在隐藏域value中存储一个后台提供的随机数,来判断登录的用户是否合法。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,961评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,444评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,009评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,082评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,101评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,271评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,738评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,395评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,539评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,160评论 3 317
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,749评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1 256
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2 341

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 860评论 0 1
  • 一、Form表单有什么作用?有哪些常见的input标签,分别有什么作用? Form表单作用:简单理解就像在考试卷上...
    青鸣阅读 365评论 0 0
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于为用户创建HTML表单,并向服务器...
    zx9426阅读 595评论 0 1
  • 1.动手 form 表单table 表格 2. <form>表单元素 1) 简述: 元素是块级元素,其开始标签和结...
    _Dot912阅读 2,002评论 2 8
  • 关于写作的观点,我从未有过变化,那就是你想要通过写作得到什么,那就这么做吧。 有些人,通过写作能得到金钱,...
    瀑下顽石阅读 189评论 1 5