HTML 表单

form(表单)

说明

Form (表单)是页面与 WEB 服务器交互过程中最重要的信息来源。

<form>标签用于创建 HTML 表单。表单能够包含 input 元素,比如文本字段,复选框,单选框,提交按钮等。还可以包含 menus , textarea , fieldset 和 label 元素等。

属性

action {URL} : 一个 URL 地址;指定 form 表单向何处发送数据。

enctype {string} :规定在发送表单数据之前,如何对表单数据进行编码。

method {get/post} :指定表单以何种方式发送到指定的页面。

指定的值有:get ,form 表单里所填的值,附加在 action 指定的 URL后面,作为 URL 链接而传递。

post ,form 表单里所填的值,附加在 HTML headers 上。

应用场景

表单主要用于向服务器传输数据,登陆注册等。

input 标签

input name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 javascript 引用表单数据。

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

text:默认。定义一个单行的文本字段。(默认宽度为20)

password:定义密码字段。(字符会被遮盖)

checkbox:复选框(checked属性:是否选中)

radio:单选框(name属性:指定多个单选框的在一个区域里进行单选操作)

button:定义普通按钮。常用于与JS一起启动脚本。(value属性:button按钮显示的文本)

reset:定义重置按钮(清除文本区域内容,重置所有表单值为默认值)

submit:定义提交按钮。

hide:定义隐藏输入字段。(存放仅用于自己使用的信息)

file:定义输入字段和 "浏览"按钮,供文件上传。

image:定义图像形式的提交按钮。

HTML 5 新增类型

email:在提交表单时会自动验证email的格式是否正确,格式不正确浏览器是不允许提交的。opera浏览器中必须有name属性,否则不起作用。

<input type="email" name="email">

url:在提交表单时会自动验证url的格式。Opera中会自动在开始处添加http://

<input type="url" />

number:可以限制输入的数字,若未输入则会抛出一个错误。(step为上一个数字与下一个数字的间隔)

<input type="number" max="12" min="0" step="1"/>

range:此类型将显示一个可拖动的滑块条,能够选择性的对限制范围内的数值进行设置。拖动时会反馈给value一个值.

<input type="range"  min="1" max="10" />

search:此类型表示输入的将是一个搜索关键字。

<input type="search" />

color: 此类型表单可让选择颜色值,并反馈到value中.

<input type="color"/>

telephone:此类型可输入一个电话号码。

<input type="telephone" />

post 和 get 方式的区别

查询字符串(名称/值对)是在 GET 请求的 URL 中发送的。

get 请求:

  1. 可以被缓存

  2. 保留在浏览器历史纪录里

  3. 可被收藏为书签

  4. 不加密

  5. 有长度限制

  6. 用于从服务器取回数据

POST 请求

查询字符串(名称和值对)是在 POST 请求的 HTTP 消息主体中发送的:

  1. 不会被缓存

  2. 不会保留在浏览器历史记录里

  3. 不能被收藏为书签

  4. 对数据长度没有要求

  5. 可以用于处理敏感数据

  6. 对数据类型没有限制

GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。

对于 GET 方式的请求,浏览器会把 HTTP header 和 data 一并发送出去,服务器响应 200 (返回数据);

对于 POST 请求,浏览器先发送 header ,服务器响应 100 continue ,浏览器再发送 data ,服务器
响应 200 ok (返回数据);

POST 需要两步。

  1. GET与POST都有自己的语义,不能随便混用。

  2. 在网络环境好的情况下,发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下,两次包的TCP在验证数据包完整性上,有非常大的优点。

  3. 并不是所有浏览器都会在POST中发送两次包,Firefox就只发送一次。

radio 分组

name 属性相同的就是一组。

placeholder 属性的作用

placehloder 属性能够让你在文本框里显示提示信息,一旦你在文本框里输入信息, placeholder就会隐藏。HTML 5 原生支持。

type = hidden 隐藏域有什么作用?

input type = hidden 作用是用了储存一些表单消息,却不想要直接显示在表单上,例如一些特定的参数等。

value 也会传递给后端,每一个表单可以赋予不同名称的隐藏域,传递各种表单消息。

基本语法:

<input type="hidden" name="隐藏域名称" value = "">

type="hidden" 就是说明这是一个隐藏域,一般还有 name 和 value 两个参数。

<form action = "index.html" method = "post">
<input type="hidden" name = "age" value = "23">
<input type="submit" name = "send" value = "送出表单">
</form>

效果图:

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 4,013评论 0 3
  • 1 表单是如何工作的? 用户在网页上填写表单并提交所填信息,浏览器将用户提交的数据发送至 Web 服务器, Web...
    饥人谷_Mily阅读 1,181评论 0 1
  • 常见问题 form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于搜集不同类型的...
    JohnHank阅读 420评论 0 0
  • 狗狗的肉垫是身体十分重要的部位,虽然粗粗的、硬硬的,不像猫猫的那样粉嫩,但是同样需要主人细心护理。 外出要注意——...
    宠蜜Ben阅读 822评论 0 0