form(表单)主要用于采集和提交用户输入的信息，是页面与web服务器交互过程中 最重要的信息来源。
掌握表单(form)有以下几个要点：
重要form属性
form常用控件
form提交方式
§重要form属性action {url}：规定表单提交时向何处发送数据。
enctype ：规定在发送表单数据之前如何对表单数据进行编码。（值如下）
application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）。
　    multipart/form-data ：不对字符编码。 注：使用包含文件上传控件的表单时，必须使用该值。
method：指定表单以何种方法发送。
 get ：from表单里所填的值，附加在action指定的url后面，做为url链接而传递。（可以在地址栏看见表单的提交信息）
 post ：from表单里所填的值，附加在html headers上。（不可以在地址栏看见表单的提交信息）
§form常用控件标记：
标记为input元素定义标注，它的for 属性应当与相关元素的id属性相同。绑定后单击该文字，鼠标将聚焦到绑定的表单控件上。
　建议：每一个表单元素的文字描述都使用标记 ！（两标签之间的内容即为对绑定的表单控件的文字描述）
　注意：每个表单元素应当分配 name 属性 和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)
name 属性：用来将数据提交到服务器；
id 属性：用来在客户端做相应的操作；如：标签的绑定、css 选择器的使用等。
文本输入框:  
1)、input type=text 单行文本框 
label for= account>账号：label>input type=text name=account id=account value=账户 maxlength=20>
2)、textarea 多行文本框
label for=comment>评论：label>textarea name=comment id=comment cols=30 rows=15 maxlength=100>textarea>
说明: maxlength 规定文本区域的最大字符数；如果在 中输入字符时，换行也算一个字符。
密码输入框：
定义密码字段。（字符会被遮盖）
label for= password>密码：label>input type=password name=password id=password value=密码>
单选框：
设置单选按钮 以及获取选中的单选按钮的值
form name=myform action=url method=post>p>性别：　input type=radio name=sex id=male value=male>label for=male>malelabel>　input type=radio name=sex id=female value=female>label for=female>femalelabel>p>input type=button value=获取选中项 onclick=getvalue(); />form>
//获取选中的单选值script language=javascript>function getvalue(){ //获取表单的所有提交信息（根据表单的name属性） var myform = document.forms[myform]; //sex是单选按钮的name属性值 var radiochoices = myform.sex; //遍历整个单选项表 for(i=0;iradiochoices.length;i++) if(radiochoices[i].checked) break; //发现了被选中项,退出 alert(选中的选项是：+radiochoices[i].value);}script>
注意：
1）、在客户端，javascript 对表单及表单元素的操作，更常用其name 属性而不是id属性。因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！
2）、保证同一组单选按钮的name 属性值相同。
复选框：
复选框的“全选”、“全不选”、“反选”功能 以及 所选复选框值的获得功能
form name=myform action=url method=post>input type=checkbox name=hoboy id=music>label for=music>musiclabel>input type=checkbox name=hoboy id=swim>label for=swim>swimlabel>input type=checkbox name=hoboy id=dance>label for=dance>dancelabel>input type=button value=全选 onclick=selectboxs(1); />input type=button value=全不选 onclick=selectboxs(0); />input type=button value=反选 onclick=selectboxs(-1); />input type=submit value=提交 onclick=submit(); />form>script language=javascript>//全选，全部选，反选function selectboxs(value){ var myform = document.forms[myform]; //hoboy 为所有复选框的name属性值 var checkboxchoices = myform.hoboy; for(var i=0;icheckboxchoices.length;i++) //遍历每一个选项 if(value 0)//反选 checkboxchoices[i].checked = !checkboxchoices[i].checked; else //value为1是则全选,为0时则全不选 checkboxchoices[i].checked = value;} function getselect(){ var myform = document.forms[myform]; var checkboxchoices = myform.hoboy;//创建数组放checkbox选中的值 var arraycheckbox = new array(); for(var i=0;icheckboxchoices.length;i++){ if(checkboxchoices[i].checked) arraycheckbox.push(checkboxchoices[i].value); } alert(arraycheckbox);}script>
注意：保证同一组复选框按钮的name 属性值相同。
下拉框：
下拉框的重要属性：
multiple 属性:用于设置下拉表框的类型（多选还是单选）
type 属性：js根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为：select-multiple（多选） 或 select-one（单选）
下拉列表框默认只能选中一项，若要设置为可以多选，则设置 即可。
size属性：定义可见选项的数目。size=3,即下拉框内可以显示三个可选选项。
form name=myform action=url method=post>p>简单的选择列表p>select id=myselect name=myselect multiple=multiple size=3> option value=apples>applesoption> option value=bananas>bananasoption> option value=cherries>cherriesoption> option value=oranges>orangesoption> select>br>input type=button onclick=getselectvalue('myselect') value=查看选项 />form>
script language=javascript> //获取选中的下拉列表值 function getselectvalue(myselect){ var myform = document.forms[myform]; var select = myform.elements[myselect]; //判断是单选还是多选 if(select.type == selece-one){ var onechoice = select.selectedindex;//获取选中项 alert(单选 + select.options[onechoice].value);//获取选中项的值 } else{ var multichoices = new array(); //遍历整个下拉菜单 for(var i=0;iselect.options.length;i++) if(select.options[i].selected) multichoices.push(select.options[i].value); alert(多选 + multichoices); } }script>
提示：
在不同操作系统中，选择多个选项的差异：
对于 windows：按住 ctrl 按钮来选择多个选项对于 mac：按住 command 按钮来选择多个选项由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。
§form提交方式表单的提交方式由method属性的取值决定，所以form提交方式有以下两种：
 get 方式：
表单数据将会追加action指定的url后面，做为url链接而传递（以查询字符串的形式提交到服务端）。
变量提交的样式为：html元素的name属性=提交的值。多个变量，在url链接后面以 & 符号隔开。
post方式：
表单数据将附加在请求体（html headers）上被发送出去，并不附加在url链接后面。
建议：表单通常还是以post方式提交比较好，这样可以不破坏url，况且url还有长度限制。
get 与 post 的区别：
1）、get是从服务器上获取数据；post是向服务器传送数据
2）、数据的查询：比如浏览论坛或博客时，url一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息； post 因为隐藏掉了这些信息，不方便进行查询。
3）、数据安全性：对一项记录，进行更改、添加操作时，get 方式附加在url上，会泄露数据；post 方式，能隐藏数据，保证数据的安全性。
4）、数据传输量：get 虽然方便查询，但由于是附加在url上，使得其传送的数据量较小，不能大于2kb；post传送的数据量较大，一般被默认为不受限制。
资源链接推荐 ：更多代码详解，请转到代码仓库：https://github.com/tina-xy/html
推荐 ： fish li 博主的 ---- 细说form(表单)  
http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html