Form表单主要是允许用户在表单中输入信息，并最终将这些信息提交服务器的一个元素，重在收集信息方面。由于用户各种各样的信息，所以form可以嵌入的元素就有许多种， 与Form常搭配的有input、Select、TextArea元素等。
Form元素用于生成输入表单，但自己不会生成可视化部分，在使用Form时必须制定action、method和name属性。action指定提交服务器的Url； method指定提交服务器的方法（get或post）；name指定表单的唯一名称，作为参数一起提交到服务器。
- Input元素， input元素是表单控件元素中功能最丰富的，只需要设置不同的type就可以实现不同的功能。
<body>
<!-- action指定表单被提交到的那个服务器地址 method 指定提交的方式-->
<!-- action 和 method为必填项 类似于iOS中AFN请求时 path和请求方法-->
<!-- 表单的enctype属性用于指定表单数据的编码方式-->
<!-- 在form里面定义一个或多个表单控件时,一旦提交该表单,该表单里的表单控件将会转换成请求参数。 每个name属性的表单控件对应一
个请求参数,没有name 属性的表单控件不会生成请求参数-->
<form action="http://www.crazyit.org" method="get">
<!-- input 元素是表单控件元素中功能最丰富的,只需要设置下type就可以展示各种不同的外观-->
单行文本框:<input id="username" name="username" type="text" /><br />
不能编辑的文本框:<input id="username2" name="username" type="text" readonly="readonly" /><br />
密码框:<input id="password" name="password" type="password" /><br/>
隐藏域: <input id="hidden" name="hidden" type="hidden" /><br />
第一组单选框:<br />
<!-- 单选框 每次只能有一个被选中 -->
<input id="color" name="color" type="radio" value="red">
<input id="color2" name="color" type="radio" value="green">
<input id="color3" name="color" type="radio" value="blue">
<br/>
第二组单选框:<br/>
<input id="gender" name="gender" type="radio" value="male">
<input id="gender2" name="gender" type="radio" value="female">
<br/>
两个复选框:<br/>
<!-- 复选框可以多选 -->
<!-- 选中时 才会上传值-->
<input id="website" name="website" type="checkbox" value="leegang.org">
<input id="website2" name="website" type="checkbox" value="crazyit.org">
<br/>
<!-- 文件选择非常简单 -->
文件上传域:<input id="file" name="file" type="file">
<br/>
图像域:<input type="image" src="AVPlayer.png" width="100" height="100" >
<br/>
下面四个是按钮:<br/>
<input id="ok" name="ok" type="submit" value="提交">
<input id="dis" name="dis" type="submit" value="重填">
<input id="cancel" name="cancel" type="reset" value="重填">
<input id="no" name="no" type="button" value="无动作">
</form>
</body>
运行效果图如下，可以看到Input元素非常丰富，只需要设置不同的type就能试下不同外观的控件。
Form--Input.png
- Select元素，实现下拉菜单和列表框
<body>
<form action="http://crazyit.org" method="get">
下面是简单下拉菜单<br/>
<!-- 单选框只会显示一行出来 -->
<select id="skills" name="skills">
<option value="java">Java语言</option>
<option value="C">c语言</option>
<option value="ruby">ruby语言</option>
</select>
<br/>
<br/>
下面是多选的列表框<br/>
<!-- 多选框 会全部展示出来 -->
<select id="books" name="books" multiple="multiple" size="3">
<option value="java">Java语言</option>
<option value="C">c语言</option>
<option value="ruby">ruby语言</option>
</select>
<br/>
下面是允许多选的列表框
<select id="leegang" name="leegang" multiple="multiple" size="6">
<!-- optgroup 是分组 但所有的groupt都还是一个整体。 -->
<optgroup label="疯狂Java体系图书">
<option value="java" label="aaaaa">疯狂Java讲义</option>
<option value="Android" >疯狂Android讲义</option>
<option value="ee" >轻量java ee企业应用实战</option>
</optgroup>
<optgroup label="其他图书">
<option value="Struts">Struts 2.1权威指南</option>
<option value="ror" >ROR敏捷开发最佳实践</option>
</optgroup>
</select>
<br/>
<button type="submit">提交</button>
</form>
</body>
显示效果, 可以看到Select默认是下拉单选菜单，设置multiple属性后，就会将选择全部展示出来。
Form--Select.png
- Textarea元素，用于生成多行文本域，方便用户输入，类似于iOS中的UITextView。
<body>
<!--textArea用于生成多行文本域 -->
<form action="http://www.crazyit.org" method="post">
简单多行文本域:<br/>
<textarea cols="10" rows="2"></textarea>
<br/>
只读多行文本域:<br/>
<textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
</textarea>
<br/>
<button type="submit"><b>提交</b></button>
</form>
</body>
效果图：
Form--TextArea.png
网友评论