标签-表单

表单是网页搜集用户输入信息的最常见方式


表单的组成:

  1. 外壳 form
  2. 表单输入 input
  3. 选择列表 select
  4. 关联表单控件 label for

ps:很多表单属性有name,这个name属性是给服务器看的,如果没有name就不会往服务器传输。


form

表单的外壳,所有表单部分代码都应该被form标签包裹在内。
主要作用是把用户输入的信息发送到后台。
主要有action、name、method三个属性

- action 数据发往的地址
- name 表单提交到服务器的名称
- method 提交数据的方式,有get和post两种。
  1. get 是url的简单拼接,工作原理是把全部input标签里的name属性(以name='xxx'的方式)拿出来用&进行拼接,放到url里,最后把这个合成的url发到服务器。
    ps:get方式不太安全,关键数据会显示出来,而且传输的数据量受限于url长度限制,get无法传送较大数据。
  2. post 保密性比较好,url里不会有关键数据,不受浏览器的限制可以发送大量数据。

input

输入表单,有很多常用类型,具体类型由type属性控制

PS:一个特殊的input属性,disabled="disabled"表示该input标签被禁止编辑。
  • text type='text'

文本输入框,这里按回车是不能换行的。

  • password

密码输入框

  • checkbox

复选框
1. 备选项的name值必须相同,这样服务器才知道这几个选项属于同一个复选框;
2. 备选项的value属性值最好与备选项内容有关联,有了value值服务器才知道这个复选框到底被选了什么,被选项value属性会作为备选项name的值(以数组形式)发送给服务器。
3. checked='checked'预先选定该项

  • radio

单选框,和checkbox一样,备选项的name值必须一致,value必须有值(如果没有value的话,服务器收到的只有一个on,根本不知道选了什么)
提交的内容: 【name值】:【被选项的value值】

  • file

上传文件,这个标签有一个accept属性,如果写了accept属性,那么就只能上传accept属性允许的格式文件,
<input type='file' accept='image/png'>就说明这个按钮只允许上传png文件。

  • textarea

文本域,textarea跟text不通的不仅是文本域可以换行,它本身是有闭合标签的。故而它的value值不在textarea标签属性内,而是在两个标签中间。

  • hidden

页面看不见这个控件,<input type='hidden' name='xx' value='123'>
一般适用于网站安全,可以防止别人用假的页面数据欺骗服务器。

  • button

<input type='button' value='Button'>
就是一个按钮

  • submit

提交表单,是一个特殊的button,它集成了提交这个功能,如果用js写了提交功能绑定到按钮上,那么就要把submit改回button,否则会提交两次。

  • reset

刷新表单,并让表单回到value所指定的值,一般是清空;
这里有一种特殊情况,value本来就有值的,比如保留了上次输入的信息,那么就不会清空表单了而是回到上次输入状态。

PS:有一个特别的input属性,placeholder,placeholder='请输入密码';这样的话会有默认的类似灰色【请输入密码】字样,一旦输入信息【请输入密码】会自动消失,如果没输入信息点了submit也不会把palceholder的值发送到服务器。

select

下拉菜单
<select name='city'>
<option value='xx'>xx</option>
<option value='ab' selected>ab</option>
</select>
如果想预先选定,就在相应选项的option标签末尾加一个selected即可


label for

把文本和表单控件绑定到一起,达到点击文本就触发相关表单控件的效果
<label for='xxx'>abd</label>
点击abd就等于点击了【id属性为xxx】的表单控件(input或者别的什么)

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,601评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,225评论 1 41
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 903评论 0 1
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,135评论 3 17
  • 想念儿时的我自己,那个她时常出现在脑海中。 那个时候住在副食品公司的宿舍,家在三楼,一楼楼梯拐角处有一堆黑...
    TinaTinaTina_阅读 156评论 0 0