html表单的简单用法
form表单作用:
form标签用于为用户输入创建HTML表单,用于向服务器传输数据
form属性
action:表单提交的地址
method:提交表单的方法(post/get)
target : 在何处打开action
enctype:编码方式(application/x-www-fom-urlencoded:在发送前编码
text/plain:空格转换为“+”号,但是不编码
multipart/form-data:使用包含文件上传控件的表单时,必须使用该值)
get和post区别
- 区别一 提价方式 get是将表单的内容拼接到url提交给服务器post是将表单内容直接提交给服务器,url不变
- 区别二安全方面 get方式把提交的内容都显示在url包括密码,可以让任何人看见,不安全,post是直接提交个服务器,看不见提交的信息,比较安全
- 区别三 提交内容的长度,get是把内容拼接到url,url有最大长度限制,如果提交的内容过长,会导致提交的内容被截取,提交的内容不完整,post是直接提价给服务器,没有影响
常用的的input标签及作用:
- type=“text” 文本输入框
- type=“password” 输入的内容变为圆点
- type="checkbox" 复选框
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
提交的值为 name和value值 - type="radio" 单选框
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
提交的是name和value值 - type="file" 文件上传
<input type="file" name="myfile" accept="image/png">
accept属性:只接受指定格式的文件 - type=“hidden”
<input type="hidden" name="csrf" value="12345623fafdffdd">
提交nam和value - type=“button、submit、reset”
<input type="button" value="Buttom" /> 不会提交
<input type="submit" value="Submit" /> 会提交
<input type="reset" value="Reset" />forn表单清空, 重置输入
input中,name属性相当于提交的key值,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。用于服务器进行识别
radio 如何分组
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
name相同的为一组,提交name和vaule的值
placeholder 作用
<input id="password" type="password" name="password" placeholder="输入密码">用于input框的要输入的信息给予提示,不影响input框的输入
type="hidden" 作用
1)可以暂存信息
2)安全 举例:服务器验证hidden的value值是否正常,来决定是否接受表单,不然会造成随便一个表单都可以想服务提交数据,导致修改数据库,造成安全隐患问题