HTML 表单小识

< form > 标签用于创建供用户输入的 HTML 表单。用于收集用户信息，向服务器提交数据，如：登录、注册等场景。在网页开发、设计中无法避免与其打交道。

(一)form基础属性

<form action="www.qq.com" target="_blank"  method="post">
 <input type="submit" value="提交">
 <form/>

通过一个简单的引用我们能看出form的基础属性

1、　　action：

提交地址、动作，与input标签中typy标签的submit属性相关联。 ，提交地址是action的地址

2、 method=“post” 是传输的一个方式

get是明文传输，效果高但是安全性比较低
post是密文传输，效果低但是安全性高

两种方式的区别：

get方法：提交数据可以再URL中看见，
　　　　（1）当使用get方式向后台发送数据时，会把所有的请求数据拼接成k=value的形式连到一起，组装到URL上，其本质上是URL的拼接，把所有的参数拼接到一起，组成新的URL。

（2）URL长度有限制，如果数据量很大的时候，浏览器的地址栏是有限制的，如果过长会自动截断，所以采用get方式，传输到后台的数据是不完整的。所以传递的参数数据就有限制

（3）由于数据可以看见，所以不安全

（4）网页默认的请求是get
post方法：

（1） 请求的URL地址不会发生任何变化。但发送的请求数据会通过浏览器传输给后台。将form data 保存在http的请求体
　　　　　　　（2） 没有长度限制
　　　　　　　　（3） post的安全性比较高，URL更加干净。get方式会把数据显示出来，造成数据泄露。
　　　　　　　　（4）往往在开发中用于提交数据form表单提交post
　　　　　　　（5）文件上传 method = post enctype=multipart/form-data

3、 target 在何处打开action

比如 ：（1）target= “_self” ：通过self不难看出意思是在原本窗口打开。
（2）target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
（3）target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
（4）target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。
如果网页没有框架，则target="_self"和target="_parent" 和target="_top"三种方式的显示方式几乎相同。

(二)input标签：输入框

1、name：指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义
　　
一个实例应用，比如：

<form action="www.qq.com" target="_blank"  method="post">
<input type="radio"/>男
<input type="radio"/>n女
 <form/>

单选框的两个框都可以被点亮，但如下代码中添加了name属性后就可以并避免了，只能传输一个给name，如此实现了单选。

<form action="www.qq.com" target="_blank"  method="post">
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
 <form/>

2、value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。
3、readonly：只读模式，设置后无法修改输入框的内容
4、　disabled：禁用状态　
5、placeholder：占位内容，通常用于提示：

<form action="www.qq.com" target="_blank"  method="post">
<input type="text" name="zhanghao " placeholder="输入账号" disabled="disabled"/> 
 <form/>

6、type：用来改变input样式
(1)input type="file"文本提交(上传文件时表单的编码方式一定是 matipart/form_date。且提交方式必须是method)
(2)input type="e-mail"邮箱
(3)input type="hidden"隐藏域，不给用户看，直接提交给服务器
(4)input type="reset"重置
(5)input type=“text” ：文本框
(6)input type=“password”：密码
(7)input type=“submit”：提交框
(8)input type=“checkboxt”：多选框
(9)input type=“radio”：单选框

(三)select：下拉菜单

		<select>
		<option>中国</option>
		<option>美国</option>
		<option>俄罗斯</option>
		<option>新加坡</option>
		</select>      
        下拉菜单

(四)textarea：文本域。

说明：可以输入多行文本

属性：cols：列数(宽度)
　　　　rows：行数(高度)

注意：不要在标签书写任何多余的内容 文本域：

		<textarea cols="10" rows="5">
	</textarea >

		cols：每行中的字符数
		rows：显示的行数