HTML表单

1.简易表单
姓名:
密码： 
	
<form name="login_form" action="login.php" method="get">
	<div><!-- 第一行 -->
		<span>姓名:</span>
		<input type="text" name="user_name"/>							
	</div>
	<div><!-- 第二行 -->
		<span>密码：</span>
		<input type="password" name="pass_word"/>
	</div>
	<div><!-- 第三行 -->
		<input type="submit" value="提交"/>
		<input type="reset" value="清空"/>							
	</div>
</form>
form标签即为表单，其中form标签常用的属性有action、method、name，name即表单名称，action是表单提交的处理程序（url路径），method是表单提交方式，分为post和get两种。
2.POST与GET
get请求:从指定的资源请求数据，用于获取数据，一般用于搜索排序和筛选之类的操作。 post请求:向指定的资源提交要被处理的数据，用于将数据发送给服务器，一般用于修改和写入数据。 get请求和post请求本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET与POST的区别 （1）post请求更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中，get请求的是静态资源，则会缓存，如果是数据，则不会缓存） （2）post请求发送的数据更大（get请求有url长度限制，http协议本身不限制，请求长度限制是由浏览器和web服务器决定和设置） （3）post请求能发送更多的数据类型（get请求只能发送ASCII字符） （4）传参方式不同（get请求参数通过url传递，post请求放在request body中传递） （5）get请求产生一个TCP数据包；post请求产生两个TCP数据包（get请求，浏览器会把http header和data一并发送出去，服务器响应200返回数据；post请求，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 返回数据）
3.各种表单控件
文本：
密码：
单选： 单选1 单选2
多选： 选项1 选项2 选项3 选项4
日期：
时间：
数字输入：
颜色选择：
下拉选择：
多行文本： 
		
<form name="login_form" action="login.php" method="get">
	<div>
		<span>文本：</span>
		<input type="text" name="user_name" placeholder="请输入用户名">
	</div>				
	<div>
		<span>密码：</span>
		<input type="password" name="pass_word" placeholder="请输入密码">	
	</div>
	<div>
		<span>单选：</span>
		<input type="radio" name="radio_test" value="1">单选1
		<input type="radio" name="radio_test" value="2" checked="checked">单选2				
	</div>
	<div>
		<span>多选：</span>
		<input type="checkbox" name="interest" value="1"/>选项1
		<input type="checkbox" name="interest" value="2"/>选项2
		<input type="checkbox" name="interest" value="3"/>选项3
		<input type="checkbox" name="interest" value="4" checked="checked"/>选项4				
	</div>
	<div>
		<span>日期：</span>
		<input type="date" name="birthday">			
	</div>
	<div>
		<span>时间：</span>
		<input type="time" name="time">				
	</div>			
	<div>
		<span>数字输入：</span>
		<input type="number" name="number_input" value="5" min="-1" max="9">
	</div>
	<div>
		<span>颜色选择：</span>
		<input type="color" name="color_select" value="#FFFFFF">	
	</div>
	<div>
		<span>下拉选择：</span>
		<select name="select_test" id="select_1">
			<option value="1">选项1</option>
			<option value="2">选项2</option>
			<option value="3" selected="selected">选项3</option>
			<option value="4">选项4</option>
			<option value="5">选项5</option>
		</select>				
	</div>	
	<div>
		<span>多行文本：</span>
		<textarea name="textarea1" id="ta1" cols="20" rows="3"></textarea>	
	</div>
	<div>
		<input type="submit" value="提交">
		<input type="reset" value="重置">				
	</div>	
	<input type="hidden" name="test_id" value="1234567">	
</form>
其中有一些是html5新增的控件