form表单标签及属性的介绍
版权声明:本⽂为博主原创⽂章,未经博主允许不得转载。html中提交表单用什么属性
⼀、表单标签
<form></form>
常⽤属性
Action 跳转到什么页⾯
Method 以什么模式提交
Get
Url有长度限制
IE6.0 url 最⼤长度 2083个字符超过⽆法提交
IE7.0 最⼤长度 2083个字符超过最⼤长度仍然可以提交但是只能提交2083个字符
Opera 9.52
最⼤长度7648个字符超过最⼤长度⽆法提交
所有提交内容会显⽰到地址栏位置很不安全
a标签的跳转⽅式也是get⽅式传递
Post
⼤⼩不受限制安全
Enctype
Multipart/form-data(有⽂件域的时候必须有这个的时候)
Application/x-www-form-urlencoded
⼆、Input标签
属性
1.Name 必须有否则数据⽆法传递
2.type
Text ⽂本框
Submit 提交按钮
Password 密码域
Radio 单选框
如果你认为是统⼀个选项那么他们的name值必须是⼀样的否则就变成单独的单选框了
注意如果是单选框就必须有value属性⽤来传递你要传递的值
Checkbox 复选框
注意:如果是复选框那么你的name值就需要加上⼀个[] ⽤来传递⾄这个东西你加上就好当学php的时候你就知道[]是什么意思了 必须要有value属性⽤来传递你选中了哪个的值
Button 普通按钮
Reset 重置按钮清空表单中的所有内容
Hidden 隐藏域
隐藏域是给程序员来使⽤的⽤来传递内容和想要传递的信息但是不想让⽤户看见的内容都使⽤隐藏域来传递 他必须有name属性和value属性⽤来你传递的是什么信息
Image 图⽚提交按钮
使⽤图⽚提交按钮必须有src属性⽤于添加图⽚路径
File ⽂件域
但是如果你使⽤⽂件域了那么你的form表单标签的属性就要多添加⼀个内容
3.readonly ⽂本区只读
4.Disabled 禁⽤
5.Value 默认值提⽰信息传递值的作⽤
6.Checked 默认选中适⽤的属性有单选框和复选框
三、下拉列表标签
1.<select></select>
常⽤属性:
Name 传递值必须有
Disabled 禁⽌
Size 显⽰⼏个下拉
Multiple 多选默认会显⽰所有但是如果你设置了这个属性那么你的名字属性就要在他的后⾯加上[]
2.下拉项标签
<option></option>
常⽤属性:
Value 提交的值若没有则提交内容
Selected 定义选中项
Disabled 选项禁⽌
四、多⾏⽂本域
<textarea></textarea>
常⽤属性:
Name 传递值必须写
Cols 可见宽度
Rows 可见⾏数
Readonly ⽂本区域只读
Disabled 禁⽌
总结:
<form enctype="multipart/form-data" action="" method="post">
<table>
<tr>
<td><label for="txtname">账号:</label></td>
<td><input type="text" id="txtname" name="login_username" /></td>
</tr>
<tr>
<td><label for="txtpswd">密码:</label></td>
<td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr>
<tr>
<td colspan=2>
<input type="reset" />
<input type="submit" />
</td>
</tr>
</table>
</form>
表单主要⽤于向服务器传输数据;如常见的登录、注册页⾯。那么我们除了要了解表单标签以及表单标签属性外也需要理解怎么传输数据的。传输的⽅式及区别 get post
get⽅式
form表单⾥所填的值,附加在action指定的URL后⾯,做为URL链接⽽传递。
在上⾯的form代码中输⼊如下:
账号:admin
密码:123456
点击提交后:URL变为:
变量提交的样式为:html元素的name属性=提交的值。多个变量,以 & 符号隔开。
post⽅式
form表单⾥所填的值,附加在HTML Headers上。
同上⾯get⽅式⼀样。
账号:admin
密码:123456
点击提交后:URL变为
可看到只是action指定的URL,参数并没有附加在URL后⾯。
通过Fiddler软件,可以查看到HTML Header区域:有个名为WebKitFormBoundary2T7xmZEtMRQeAhNh 的对象
查看【Raw】区域,可看见⾥⾯包含了提交的变量
区别
1数据的查询:⽐如浏览论坛时,URL⼀般包含了分类、页码数、每页记录数等信息。 get ⽅式,能⼀⽬了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息,不⽅便进⾏检验查询条件。
2敏感数据的提交(安全性):对⼀项记录,进⾏更改、添加操作时,⽐如注册⽤户、更改⽤户资料等。get ⽅式附加在URL上,会泄露掉敏感的消息。 post⽅式,能隐藏掉敏感的信息。
3⼤数据⽂本传递:get 虽然⽅便查询,但由于是附加在URL上,各浏览器对URL也有个长度限制。IE :2048字符。Chrome、FF 好像
是 8182字符。post 好像没此限制。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论