<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
< html > |
< head > |
< title >form标签演示</ title > |
</ head > |
< body > |
<!-- |
|
form标签主要用于和后台进行数据的交互。 |
input用于接受用户输入的数据个 |
Input标签中的有type属性主要用于设置输入项的具体的类型 |
text:代表文本框 |
password:输入的密码框 |
|
当真正要把数据使用form表单提交到服务端的时候,需要在form表单中书写响应的属性: |
action:这个属性主要用于告诉form表单把数据提交到什么地方去。 |
method:它给是的用什么方式把数据提交的服务端 |
提交方式本有7种,现在最常用的只有2种,get和post |
如果在form标签中不书写method属性值,默认是get方式在提交数据 |
|
|
get和post提交的区别: |
1、提交数据的位置不同: |
get方式把数据会放在地址显示出来一起提交 |
post方式会把数据放在请求的正文中 |
2、敏感信息的保护: |
get会把敏感信息暴漏出来的 |
post看不见敏感信息 |
3、提交的数据大小不同: |
get提交的数据量非常的小。 |
post提交的数据量没有严格限制。 |
|
当需要把数据提交到服务端,在form表单中的其他子标签中所有的标签必须定义name属性, |
只有通过这个name属性才能把数据提交到服务端 |
|
|
|
|
|
post提交数据的形式: |
POST / HTTP/1.1 |
Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, */* |
Accept-Language: zh-cn |
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30) |
Content-Type: application/x-www-form-urlencoded |
Accept-Encoding: gzip, deflate |
Host: 192.168.1.250:9090 |
Content-Length: 266 |
Connection: Keep-Alive |
Cache-Control: no-cache |
|
user=123&pwd=123&repwd=123&hobby=java&hobby=html&hobby=css&sex=nan&country=US&desc=%09++%09%09%09%C7%EB%D4%DA%D5%E2%C0%EF%CA%E4%C8%EB%B8%F6%C8%CB%B5%C4%C3%E8%CA%F6%D0%C5%CF%A2%0D%0A%09++%09%09&hidden=%D5%E2%C0%EF%B5%C4%D6%B5%B2%BB%BB%E1%D4%DA%D2%B3%C3%E6%CF%D4%CA%BE |
|
|
get方式提交的数据: |
|
GET /?user=123&pwd=123&repwd=123&hobby=java&hobby=js&sex=nan&country=---%D1%A1%D4%F1%B9%FA%BC%D2---&desc=%09++%09%09%09%C7%EB%D4%DA%D5%E2%C0%EF%CA%E4%C8%EB%B8%F6%C8%CB%B5%C4%C3%E8%CA%F6%D0%C5%CF%A2%0D%0A%09++%09%09&hidden=%D5%E2%C0%EF%B5%C4%D6%B5%B2%BB%BB%E1%D4%DA%D2%B3%C3%E6%CF%D4%CA%BE HTTP/1.1 |
Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, */* |
Accept-Language: zh-cn |
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30) |
Accept-Encoding: gzip, deflate |
Host: 192.168.1.250:9090 |
Connection: Keep-Alive |
|
|
--> |
< form action = "http://192.168.1.250:9090" method = "get" > |
用户名称:< input type = "text" name = "user" />< br /> |
用户密码:< input type = "password" name = "pwd" />< br /> |
确认密码:< input type = "password" name = "repwd" />< br /> |
|
<!-- 兴趣爱好需要把它们的name属性定义成一样的,表示它们一组数据 --> |
兴趣爱好:< input type = "checkbox" name = "hobby" value = "java" />Java |
< input type = "checkbox" name = "hobby" value = "html" />Html |
< input type = "checkbox" name = "hobby" value = "css" />CSS |
< input type = "checkbox" name = "hobby" value = "js" />JavaScript< br /> |
|
<!-- 在选择男女的时候,一定要把男女也定在一组中,不然会出现男女同时被选择 --> |
选择性别:< input type = "radio" name = "sex" value = "nan" checked = "checked" />男 |
< input type = "radio" name = "sex" value = "nv" checked = "checked" />女< br /> |
|
上传靓照:< input type = "file" />< br /> |
|
选择国家: |
< select name = "country" > <!-- 下拉框 --> |
< option >---选择国家---</ option > |
< option value = "CN" >中国</ option > |
< option value = "US" >美国</ option > |
< option value = "EN" >英国</ option > |
</ select >< br /> |
个人描述: |
< textarea rows = "4" cols = "30" name = "desc" > |
请在这里输入个人的描述信息 |
</ textarea >< br /> |
隐藏区域: |
< input type = "hidden" name = "hidden" value = "这里的值不会在页面显示" />< br /> |
|
< input type = "button" value = "按钮" />< br /> |
< input type = "submit" value = "提交" /> |
< input type = "reset" value = "重置" /> |
|
|
|
</ form > |
|
</ body > |
</ html > |