HTML之表单

一.表单的定义：<form action='' method=''></form>用于向服务器传输数据
1.action:表单处理服务器
2.method:表单的提交方式.一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET

a. post:如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
b.get:另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

二.表单的用法：
1.表单中可以包含input元素(input元素可以脱离标签独立存在)，如：

<form action="form_action.asp" method="get">  <input type="" value="" name="" />想显示在页面上的值</form>

input元素的属性：
A.type(表单的类型)，其值有：
a.输入类：
text：文本输入框
passsword：密码输入框
b.选择类：
radio：单选框
checkbox：多选框

其中，在实现单选时一定要注意单选的特性（只能选择其一，不得同时选择多个。而往往直接用type=“radio”实现的单选框都没有只选其一的特性。此时解决方案如下：）
方法一：用<label>标签对input进行标注，如：

<label for="male">Male</label>        <input type="radio" name="sex" id="male" />        <br />        <label for="female">Female</label>        <input type="radio" name="sex" id="female" />

或者写为：

<label><input name="sex" type="radio" id="male"  />男</label><label><input name="sex" type="radio" id="female" />女</label>//其中，name和id不能省

方法二：（用统一的name值标明单选框之间属于同一类型，此时就能实现单选）

<input name="sex" type="radio"/>男<input name="sex" type="radio"/>女

c.按钮类：
button：按钮（按钮也可以通过<button>标签直接实现）
reset：重置
submit：提交
image：图片
d.特殊类：
file：上传
注：以前在整理这一条属性的时候显然都没有亲子试过！！所以当别人用出来的时候居然还懵逼了！！下面重新学习一下这个用法：

<input type="file">

效果：

hidden：隐藏
B.value：input的值（input标签外的内容是显示在页面上的内容，而其真正的值是value的内容）
C.name：类似前端的id，同时前端可以用来js取值和分组
D.checked：多用于单选和多选，代表表单有无被选中的状态，若被选中，则元素.checked=true，反之为false。可以利用这一点作为判断条件来实现进一步的操作；或者直接操作该属性也可以完成一些页面刷新时的初始化默认操作，如：

<input type="checkbox" name="" checked/>//页面在刷新时默认多选框被勾选或写为：<input type="checkbox" name="" checked="checked"/>

E.disabled/ readonly：属性规定应该禁用 input 元素，如：

<input type="checkbox" name="" disabled/>//此时表示禁用多选框

F.placeholder属性：在页面刷新时，会自动显示palceholder的值。用作输入框内的提示

G.cursor属性：设置鼠标移入时的样式

2.表单中还可以包含select元素：<select value="" ...>元素配合<option>标签实现下拉框的效果。
例如：

<select>    <option>请选择您所在的城市</option>    <option>北京</option>    <option>上海</option>    <option>深圳</option>    <option>重庆</option>    <option>西安</option></select>

注：显示在页面上的内容并不是select的value值，其标签内value属性中的值才是；当页面刷新时，下拉框内默认显示多选框中的第一个内容

3.表单中还可以包含textarea元素：是一个可任意拖动改变大小的文本输入框，例如：

<textarea></textarea>

注：可以通过设置属性resize的值为none的方法来禁止文本域拖拽改变大小