HTML 表单的基本用法
说起 HTML 中的form表单,大家一定都很熟悉了,这是用于搜集各种用户输入的信息,并让用户提交,增加网站的交互效果,本文就简单介绍一下表单的基本用法。
什么是表单?
表单是一个包含表单元素的区域,用标签<form>
来进行定义。表单元素就放在此标签中。
form
有两个常用的属性,action
规定当提交表单时向何处发送表单数据, method
规定用于发送 form-data 的 HTTP 方法。
最常用的HTTP方法是post
和get
。
1.表象不同,get把提交的数据url可以看到,post看不到
- 原理不同,get 是拼接 url, post 是放入http 请求体中
- 提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
- get提交的数据在浏览器历史记录中,安全性不好
- 场景不同,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 | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
输入邮箱地址,发送邮件 | |
search | 查找文件 |
下面来为大家一一演示:
细心的你一定会发现,在浏览器中是看不到hidden的隐藏输入字段的,关于hideen 的更多用法,可参照form表单的若干疑问
好了,以上为大家演示了<input>
标签中,type
属性不同值的部分常见例子,当然form表单中除了<input>
和<label>
标签之外,还有<select>
和<textarea>
标签,分别用来定义 下拉列表 以及 多行的文本输入框:
结束语
其实以上只是展示了冰山一角,form表单实在是还有很多花样和玩法,限于篇幅,这里我就不再挨个为小伙伴演示了,以后更多的实战中,会反复用到表单,另外想要学习更多表单用法的小伙伴,推荐去这里:
W3school:HTML <form> 标签