HTML:form表单总结，input，select，option，textarea，label

<form>标签是块级元素。

form标签的标准属性有id,class,style,title,lang,xml:lang.

表单可以包含input元素（包含button,checkbox,file,hidden,image,password,radio,reset,submit,text）、menu、textarea、fieldset、legend和label元素。

1. action属性表示提交表单时向何处发送表单数据（表单数据发送到 action 属性所规定的页面）。（必须）
2. method属性表示表单提交的方式。有get和post两种方式。get与post的区别见www.w3school.com.cn（必须）
3. name属性规定表单的名称。同时name属性提供了一种在脚本中引用表单的方法。通常不用js的时候能够不写该属性。
4. target属性，目标
5. enctype属性规定在发送到服务器以前应该如何对表单进行编码。默认值：application/x-www-form-urlencoded发送前编码全部字符（空格转换成加号，特殊符号转为为ASCII HEX值）；还有另外两个值，multipart/form-data不对字符编码（在使用包含文件上传控件的表单时，必须使用。）；text/plain空格转换为"+"加号，但不对特殊字符编码。

..............................................................................................................................

<input>标签用于搜集用户信息。根据不一样的type类型，输入字段拥有多种形式。行内元素。

1. type属性button,checkbox,file,hidden,image,password,radio,reset,submit,text。
2. value属性规定input元素的值。
   　　  对于不一样的类型，value属性的用法不一样：
   　　  type="button","reset","submit"-定义按钮上显示的文本。
   　　  type="text","password","hidden"-定义输入字段的默认值。
   　　  type="checxbox","radio","image"-定义与输入相关联的值,提交处处理页面的值。
   　　  注释：type="checkbox","radio"中必须设置value的值。
   　　  注释：value属性没法与type="file"一同使用。
3. name属性定义input元素的名称；name属性用于对提交到服务器后的表单数据进行标识，或者在客户端经过JavaScript引用表单数据。注释：只有设置了name属性的表单元素才能在提交表单时传递他们的值。
4. maxlength属性规定输入字段的最大长度，以字符个数计数。maxlength属性与type="text"和type="password"配合使用。（默认255）
5. src属性只能，必须与type="image"配合使用。 规定提交按钮显示的图像的URL。
6. size属性规定输入框（有的说输入字段）的宽度。对于type="text"和type="password"，size定义的是能显示在框内的西文字符数，对于其它类型，size属性定义的是以像素为单位的输入框宽度。size属性推荐使用css来代替。<input style="width:100px" />（默认20）
7. readonly属性规定字段为只读。只读字段是不能修改的。不过，用户仍然可使用 tab 键切换到该字段，还能够选中或拷贝其文本。readonly 属性能够防止用户对值进行修改，直到知足某些条件为止（好比选中了一个复选框）。而后，须要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。用法：<input type="text" readonly="readonly">
8. disabled属性规定应该禁用input元素。被禁用的 input 元素既不可用，也不可点击。能够设置 disabled 属性，直到知足某些其余的条件为止（好比选择了一个复选框等等）。而后，就须要经过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。注释：disabled属性没法与type="hidden"一块儿使用。用法：<input type="text" diasbled="disabled">
9. checked属性规定在页面加载时应该被预先选定的input元素。checked属性与type="checkbox"和type="radio"配合使用，设定加载后显示时的首选input元素。checked属性也能够在页面加在后经过JavaScript代码进行设置。用法：<input type="checkbox" checked="checked">
10. alt属性定义图像的替代文本。若是图像没法显示，会显示替代文本。只能与type="image"配合使用。虽然alt属性不是必需属性，可是在image时，仍然应该设置该属性。若是不使用，可能对文本浏览器或非可视浏览器照成障碍。
11. accept属性规定文件上传来提交的文件的类型。只能与type="file"配合使用，规定上传文件的类型。提示：请避免使用该属性。应该在服务器端验证文件上传。
12. align属性规定图像输入的对其方式。与type="image"配合使用。只用left和right获得全部浏览器的支持。默认left，还有right,top,middle,bottom。推荐使用css替代<input type="image" style="float:left"  /> 

..............................................................................................................................

<input type="text" />定义单行输入字段，默认宽度20个字符（size属性）

1. maxlength属性表示文本输入框中输入内容的最大数量，以字符个数为度量单位（默认255）。（须要限制时必须）
2. value属性用于设置文本框的默认值。（须要限制时必须）
3. size属性表示文本框的宽度,对于type="text"和type="password"，size定义的是能显示在框内的西文字符数，对于其它类型，size属性定义的是以像素为单位的输入框宽度。size属性推荐使用css来代替。<input style="width:100px" />。（须要限制时必须）
4. onclick="this.value=''"事件表示单击文本框，文本框中默认内容清空（通常用于设置默认值时使用）。（须要限制时必须）
5. name属性定义input元素的名称。name的做用是做为与服务器交互数据的HTML元素的服务器端的标识，好比input,select,textarea和button等。咱们在服务器端根据其name经过Request.Params取得元素提交的值。若是用id，服务器是没法得到数据的。若是数据不提交到服务器，能够不用name属性。name的另一个做用是客户端经过JavaScript引用表单数据。注释：只有设置了name属性的表单元素才能在提交表单时传递他们的值。（提交数据到服务器时必须）
6. readonly属性规定字段为只读。只读字段是不能修改的。不过，用户仍然可使用 tab 键切换到该字段，还能够选中或拷贝其文本。readonly 属性能够防止用户对值进行修改，直到知足某些条件为止（好比选中了一个复选框）。而后，须要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。用法：<input type="text" readonly="readonly">或直接readonly。可使用onclick时间来清空默认值。（通常不用）
7. disabled属性规定应该禁用input元素。被禁用的 input 元素既不可用，也不可点击。能够设置 disabled 属性，直到知足某些其余的条件为止（好比选择了一个复选框等等）。而后，就须要经过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。用法：<input type="text" diasbled="disabled">或直接disabled（通常不用）.

1 <form>
2 your name:
3 <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，容许最大字符数为20" /><br>
4 <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改" />
5 </form>

..............................................................................................................................

<input type="password" />定义密码字段。密码字段中的字符会被掩码

 参数与type="text"相相似，有type,name,value,maxlength,size,disabled,readonly属性。

1 <form>
2 your password:
3 <input type="password" name="yourpwd" size="20" maxlength="15" value="123456" />密码长度小于15
4 </form>

 特殊属性disabled与readonly与text的同样。

..............................................................................................................................

<input type="submit" />定义提交按钮。提交按钮用来向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。 

<input type="reset" />定义重置按钮。重置全部内容

属性有type,value,name,size，通常值须要使用type与value属性

value属性表示按钮上显示的文本。

1 <form>
2 your name
3 <input type="text" value="your name" maxlength="30" size="50" onclick="this.value=''" /><br />
4 <input type="submit" value="提交" />
5 &nbsp
6 <input type="reset" value="重置" />
7 </form>

 ..............................................................................................................................

 <input type="button" />定义可点击的按钮，但没有任何的行为。经常使用于在用户点击按钮时启动JavaScript程序。

 标准的window风格按钮，要实现跳转须要写入JavaScript代码。

value属性为按钮上显示的文本

name属性用于客户端JavaScript对数据操做。

1 <form>
2 your button:
3 <input type="button" value="Yes" name="youinfo" onclick="window.open('http://www.baidu.com')" />
4 </form>

..............................................................................................................................

<input type="hidden" />定义隐藏字段，隐藏字段对用户是不可见的。隐藏字段一般会储存一个默认值，他们的值能够经过JavaScript进行修改

 很是须要注意的一个，使用范围很广。一般成为隐藏域：若是有一个很是重要的信息须要提交到下一页，但有没法明示的时候使用。

hidden中value的值最有用。name用来引于JavaScript引用。

1 <form name="form1">
2 your hidden info here:
3 <input type="hidden" name="yourhiddeninfo" value="baidu.com" />
4 </form>
5 <script>
6 alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
7 </script>

alert出：隐藏域的值是baidu.com

..............................................................................................................................

 <input type="checkbox" />定义复选框。容许用户在必定数目中选择一个或多个

属性有name,value,及特定属性checked(必须的)

最重要的是value值，提交到页面的是value值。name值能够不同，但推荐使用同样的。

多条input语句组成多选框。

1 <form name="form1">
2 a:<input type="checkbox" name="checkit" value="a" checked /><br>
3 b:<input type="checkbox" name="checkit" value="b" /><br>
4 c:<input type="checkbox" name="checkit" value="c" /><br>
5 </form>

 ..............................................................................................................................

<input type="radio" />定义单选按钮

属性有name,value,checked.

name属性必须同样，不然不能多选一。提交处处理页的仍是value的值。

1 <form name="form1">
2 a:<input type="radio" name="checkit" value="a" checked /><br>
3 b:<input type="radio" name="checkit" value="b" /><br>
4 c:<input type="radio" name="checkit" value="c" /><br>
5 </form> 

..............................................................................................................................

<input type="image" />定义图像形式的提交按钮。点击图像就会提交表单数据。

属性有，src,alt,align.

src属性图像地址

align属性图像位置，建议使用css控制。

alt，图像替代文本.图像不显示时，依然能够提交。

1 <form name="form1" action="xxx.asp">
2 your Imgsubmit:
3 <input type="image" src="../blog/images/face4.gif" />
4 </form>

..............................................................................................................................

 <input type="file" />定义用于上传文件

 当你在BBS上传图片时，在Email中上传附件时要用的东西。

属性有：name,size,accept(不建议使用)

它用于上传文件。它会在一个文本输入框右边出现一个浏览按钮。

若是<form>标签中只设置method设置值为get或者post，则浏览器仅仅向http服务器提交该文件的名字，而不传递任何关于该文件实体内容。

若 要实现上传文件内容的功能就必须在<form>标签中设置另外一个属性enctype值为multpart/form-data

1 <form action="re.php" mathod="post" enctype="multpart/form-data">
2 your file:
3 <input type="file" name="yourfile" size="30" />
4 </form>

..............................................................................................................................

<select></select> <option></option>

<select>标签用于建立下拉菜单。有disabled,multiple,size,name属性。select标签能够不使用任何属性。

name属性规定select元素的名称。name属性用于对提交到服务器后的表单数据进行标识，或者用于JavaScript对表单引用。

disabled属性表示禁用该下拉菜单。

multiple属性表示能够选择下拉菜单的多个选项。windows系统经过ctrl，mac经过command来实现。此时默认默认浏览器会显示4个选项。

size属性表示显示的下拉菜单可见选项的个数，默认为1。（设为2的时候，谷歌浏览器会显示4，why??）

<option>标签订义下拉菜单中的一个选项。浏览器将<option>做为<select>标签的菜单或是滚动列表中的一个元素显示。option元素位于select元素内部，与select元素配合使用，不然该标签没有意义。

option标签能够不使用任何属性，可是通常会使用value属性，此属性的值为提交处处理页的内容。若是不设置value的值，提交<option></option>之间的内容，之间的内容为显示在浏览器上的内容

disabled属性表示禁用的option选项。其他的option选项仍是能够正常使用。

selected属性，定义默认显示的选项。

1 <select >
2     <option value="河南省">河南省</option>
3     <option value="河北省">河北省</option>
4     <option value="河北省" checked>广东省</option>
5     <option value="河北省" disabled>广西省</option>
6 </select>

..............................................................................................................................

<textarea></textarea>

<textarea> 标签订义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（一般是 Courier）。

能够经过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

属性有cols,rows,disabled,name,readonly

cols规定文本的可见宽度。

rows规定文本的可见高度。

diabled禁用该文本。

name用于表单时提交到服务器的标识，也能够用于客户端JavaScript的引用标识。

readonly表示只读，不能被修改。

..............................................................................................................................

<label></label>

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。若是您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签属性只有一个for 属性，该属性必需要与相关元素的 id 属性相同。

1 <form>
2   <label for="male">Male</label>
3   <input type="radio" name="sex" id="male" value="1" />
4   <br />
5   <label for="female">Female</label>
6   <input type="radio" name="sex" id="female" value="0" />
7 </form>

 单选按钮显示的是label中的Male，鼠标点击Male时便可选中。input标签中须要设置id属性。

..............................................................................................................................