HTML form 表单
HarleyWang93 opened this issue · comments
form
表单有什么作用?有哪些常用的input
标签,分别有什么作用?
- 表单用于向服务器传输数据
- 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
标签 | 功能 |
---|---|
<input type="text"> |
定义单行输入文本框 |
<input type="password"> |
定义密码字段 |
<input type="radio"> |
定义单选按钮,用name分组 |
<input type="checkbox"> |
定义多选按钮 |
<input type="submit"> |
定义提交表单数据至表单处理程序的按钮 |
<input type="button"> |
定义按钮 |
<input type="reset"> |
定义重置按钮 |
<input type="number"> |
用于应该包含数字值的输入字段 |
<input type="date"> |
用于应该包含日期的输入字段 |
<input type="color"> |
用于应该包含颜色的输入字段 |
post
和 get
方式的区别?
-
方式
get
把参数包含在 URL 中,post
通过 request body 传递参数。
-
安全
get
比 post
更不安全,因为参数直接暴露在 URL 上,所以不能用来传递敏感信息。
-
数据量的问题
传输给后台数据量很大,post
可以防止数据传输不完整
数据量小 get
-
使用场景
需要向后台查询数据 get
传输数据给后台 post
在input
里,name
有什么作用?
name
属性规定input
元素的名称,达到区分多个表单的目的,从而防止了表单提交到后台程序之后出现混乱,也只有设置了name
属性的表单元素才能在提交表单时传递它们的值。
radio
如何 分组?
通过 name
属性分组,eg(name="sex1"
的为一组,name="sex2"
的为一组):
<input type="radio" name="sex1" value="male">男
<input type="radio" name="sex1" value="female" >女
<input type="radio" name="sex2" value="male">男
<input type="radio" name="sex2" value="female" >女
placeholder
属性有什么作用?
placeholder
属性能够在文本框里显示提示信息,提示信息会在输入字段时消失,在没有字段输入时显示。
type=hidden
隐藏域有什么作用? 举例说明
- 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
- 当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上,可以让服务器知道数据采集的是否正确,从而避免服务器数据被假页面提交的数据攻击篡改。或者有些时候我们要给用户一信息,让用户在提交表单时提交上来以确定用户身份。
HTML 表单的用法
- 表单用于向服务器传输数据
form
<form action="提交到服务器地址" method="get">
...
...
</form>
action
:提交表单的地址
method
:提交表单使用的方法,get
或者post
input
通过type
属性来设置不同的input
类型。
text
文本域
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
password
密码域,显示为小黑圆点
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="请输入密码">
</div>
-
button
提交按钮,不会提交
<input type="buttom" value="按钮">
-
submit
提交按钮,会提交
<input type="submit" value="提交">
-
reset
重置输入按钮
<input type="reset" value="重置">
-
radio
单选,通过name
属性分组
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
checkbox
复选框
<div class="hobby">
<label for="hobby">爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
file
上传文件
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
此例中image/png
意思是只能选择此格式的图片上传
hidden
隐藏域
<input type="hidden" name="..." value="...">
label
在介绍 input
元素时,label
元素已出现多次,eg:
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
label
元素为 input
元素定义标注,当鼠标选择该标签时,关联的元素控件会获得焦点,for
属性与关联元素的 id
属性要相同。
select
元素和嵌套的option
元素
下拉菜单栏
<div class="section">
<label for="car">My Car</label>
<select id="car" name="car">
<option value="TT">TT</option>
<option value="SAAB" selected>萨博</option>
<option value="GTR">GTR</option>
</select>
</div>
textarea
多行文本框
<textarea name="comment"></textarea>