HTML 表单的基本用法

HTML 表单的基本用法

说起 HTML 中的form表单,大家一定都很熟悉了,这是用于搜集各种用户输入的信息,并让用户提交,增加网站的交互效果,本文就简单介绍一下表单的基本用法。


什么是表单?

表单是一个包含表单元素的区域,用标签<form>来进行定义。表单元素就放在此标签中。

表单代码

zheshitupian
zheshitupian

form有两个常用的属性,action 规定当提交表单时向何处发送表单数据, method 规定用于发送 form-data 的 HTTP 方法。
最常用的HTTP方法是postget

1.表象不同,get把提交的数据url可以看到,post看不到

  1. 原理不同,get 是拼接 url, post 是放入http 请求体中
  2. 提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
  3. get提交的数据在浏览器历史记录中,安全性不好
  4. 场景不同,get 重在 "要", post 重在"给"

可参照form表单的若干疑问、以及HTTP Methods

上图的示例代码中,展示了表单元素<input><label>

其中<input>标签标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
上例中,展示了type属性的两个值,username(用户名)和password(密码),另外<input>元素中还有个属性placeholder,来帮助用户填写输入字段的提示。而name属性,则是定义 input 元素的名称。
效果如下图:

而form表单中,包含的<label>元素标签:

<label> 标签为input元素定义标注(标记)。
label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性, 规定 label 绑定到哪个表单元素,所以应当与相关元素的 id 属性相同。


除了username和password之外,input 的type属性值还有:

属性值 作用
button 定义可点击按钮
checkbox 复选框
file 定义输入字段和 "浏览"按钮,供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
radio 定义单选按钮
reset 定义重置按钮。重置按钮会清除表单中的所有数据
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
email 输入邮箱地址,发送邮件
search 查找文件

下面来为大家一一演示:

单选按钮、复选框、提交按钮
浏览器效果

隐藏输入字段、重置按钮、邮箱、上传文件

细心的你一定会发现,在浏览器中是看不到hidden的隐藏输入字段的,关于hideen 的更多用法,可参照form表单的若干疑问

浏览器效果

好了,以上为大家演示了<input>标签中,type属性不同值的部分常见例子,当然form表单中除了<input><label>标签之外,还有<select><textarea>标签,分别用来定义 下拉列表 以及 多行的文本输入框:

下拉列表、多行的文本输入框
浏览器效果

结束语

其实以上只是展示了冰山一角,form表单实在是还有很多花样和玩法,限于篇幅,这里我就不再挨个为小伙伴演示了,以后更多的实战中,会反复用到表单,另外想要学习更多表单用法的小伙伴,推荐去这里:
W3school:HTML <form> 标签

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

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 答:form表单用于收集信息,并将信息...
    北城_荒阅读 235评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 1.常见的表单元素HTML表单主要用于向服务器端传输用户的数据信息。它可以包含input、menus、textar...
    l_meng阅读 301评论 0 0
  • 什么是HTML表单? 表单是一个包含元素的区域,表单元素是允许用户在表单中(比如:文本域,列表,单选框,复选框等)...
    饥人谷_一叶之秋阅读 296评论 0 0
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 879评论 0 1