用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

form标签演示

2014-08-04 作者: jun举报

[html]代码库

<!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>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...