表单:将用户所填写的各项信息集中处理提交给服务器
form有两个关键的属性,action和method:action是所要提交的后台地址;method是数据提交的方式
form表单中最常见的元素便是input
常见的input类型
类型 | 作用 | 备注 |
---|---|---|
text | 单行文本框 | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符 |
password | 密码框 | 定义密码字段。该字段中的字符被掩码 |
checkbox | 多选框 | 定义复选框 |
radio | 单选框 | 定义单选按钮 |
file | 上传文件按钮 | 定义输入字段和 "浏览"按钮,供文件上传 |
hidden | 定义隐藏的输入字段 | |
submit | 提交数据按钮 | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
button | 按钮 | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本) |
image | 图片提交按钮 | 定义图像形式的提交按钮 |
reset | 重置按钮 | 会将表单中的信息重置为“默认值”!!! |
- 注:
name属性规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或在客户端通过JavaScript引用表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
例如
<input name="username" id="username">
<input id="age">
上方两个input在提交表单信息上,默认情况下只有id为username,具有name属性的input的数据才能提交
- 同样,当 input 类型为 radio 时,name属性也常用于给此类单选框分组
<input type="radio" name="a" value="张三" id="a1" />
<input type="radio" name="a" value="曾四" id="a2"/>
placeholder属性(HTML 5新属性)
提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,在字段获得焦点时消失
placeholder 属性适用于这些类型的input:text search url telephone email password<input type="hidden">定义隐藏字段,对用户不可见,一般用于传递参数但不想显示在客户端上,会存储一个默认值,此默认值也可通过JavaScript修改
<input type="hidden" name="country" value="China">
method常见的有两种方式,get和post
- | get | post |
---|---|---|
区别 | 1.本质上是URL的拼接 请求没有主体,所请求的数据会附在URL之后,?分割URL和数据,参数之间用&相连 2.提交数据最多1024字节 3.常用于查询操作,若用于提交信息,安全性低 |
1.提交的数据放置在HTTP包的包体中 2.提交的数据没有大小限制 3.常用于提交表单信息操作,更加安全 |