- 作为收集和渲染但最终也是为收集客户端数据的表单
虽然html不作为jsp规范的一部分，但是确实jsp重要的一部分，先抛弃html语法细则，只记录后端必须应该会的HTML元素，即表单。上面的标题已经很明确了，表单是为收集用户用户的浏览器脚本元素，也应用于渲染响应数据并最终让客户端修改更新（还是收集数据），下面将以代码形式记录下所有的浏览器将其作为请求体的标签元素，方便在合适的场景选用合适的标签设计页面，几个标签元素被我分为两类：value标签属性为请求参数的一类（即input标签）和标签体为请求参数的一类。
并在后面的笔记中总结两个基本问题：如何有选择地提交表单中的部分数据或同一页面中一个表单全部和另一个表单的部分数据如何发送给服务器（当然一般页面设计的合理这种情况会避免的）；当jsp接受到数据模型后，如何让数据渲染多选框。这两个问题会设计到js的相关概念。放到该分类是为了说明在web中的必用，该篇笔记会同时放到另一个分类。
1 <!DOCTYPE html> 2 <!-- 两个问题：一是让多选单选下拉展示响应的对应项；二是让同页面不同表单中的数据复用 --> 3 <!-- 总结：intput类型有radio text submit reset checkbox其值都是value属性而非标签体；而textarea select其值都是标签体内容 --> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>一个作为提交参数的表单</title> 8 </head> 9 <body><!-- 一个各种类型的输入表单和提交，关注各种表单如何提交 ，这里只是作为入参，而不是展示数据--> 10 <h1>My Guest Book</h1> 11 <p>please let me know what youi think of my</p> 12 <form method="post" action="run"> 13 <p> <!-- 所有类型输入框都是在value属性中展示数据?或填入数据，不需要js渲染，限定活值 --> 14 你的名字？<input type="text" name="name" size="25"/> 15 你的e-mail<input type="text" name="emall" size="25"/> 16 </p> 17 18 <p> 19 请检查所有支付：<br> <!-- 最经典的复选框，name相同 ，值不相同,需要js渲染，多个死值--> 20 <input type="checkbox" name="likeit" checked="checked" value="00"/>我真的喜欢你网站<br/> 21 <input type="checkbox" name="likeit" checked="checked" value="11"/>是我见过的最好的站点</br> 22 <input type="checkbox" name="likeit" checked="checked" value="22"/>是吗</br> 23 <input type="checkbox" name="likeit" checked="checked" value="33"/>那是多久呢</br> 24 <input type="checkbox" name="likeit" checked="checked" value="44"/>那才叫</br> 25 </p> 26 27 28 <p> 29 选择最喜欢的一件事物<br/> <!-- 最经典的单选框，name相同value不同，浏览器只让多选一，一个死值 --> 30 <input type="radio" name="lovebest" value="me" checked="checked"/>我自己</br> 31 <input type="radio" name="lovebest" value="cat">我家的猫</br> 32 </p> 33 34 <p> 35 <select size="1" name="potentail"> <!-- 下拉框，也是选其一，name相同值不同，值不同，它的标签体是值--> 36 <option selected="selected">确定一下</option> 37 <option >十万</option> 38 <option >百万</option> 39 <option >今天不了</option> 40 </select> 41 </p> 42 <!-- 文本框 --> 43 <textarea name="comments" rows="4" cools="55" >文本框中的内容也是标签体</textarea></br> 44 <input type="submit" value="提交" /> 45 <input type="reset" value="重置" /> 46 47 </form> 48 </body> 49 </html>
- 各个输入控件的详解
- 复选框
显示为一个小方框+对勾，用户可以点击选中或取消。每个复选框都必须在其name属性中指定名称。要使表单经浏览器解析后默认被选中，可在标签中包含checked属性，如 下：
<input type="checkbox" name="baby" checked="checked" />Baby Grand Piano <br /> //该选项在浏览器上显示为选中项，提交后控制台可以看到该参数值：baby=on(默认)
<input type="checkbox" name="mini" />Mini Piano Stool
还可以作为多个相同名和不同值的形式：
<input type="checkbox" name="pet" value="dog"> dog<br />
<input type="checkbox" name="pet" value="cat">cat<br />
<input type="checkbox" name="pet" value="iguana"> iguana //指定value属性后该值将取代on作为请求参数发送，并且以key-value的形式发送多个参数
2.单选按钮
单选框每次只选择一个，显示为靶心圆，只要使用type="radio",每个单选按钮放在一个<input/>标签中，但同一组单选按钮的名称都相同：
<input type="radio" name="card" value="v" checked="checked" /> Visa<br /> //该选框将作为默认选中的项，同名框只允许一个被选中
<input type="radio" name="card" value="m" /> MasterCard
3.下拉列表
滚动列表和下拉列表都由<select>标签创建，可将该标签与<option>标签一起使用，如下面的例子所示：
<select name="extras" size="3" multiple="multiple">
<option selected="selected">Electric windows</option>
<option>AM/FM Radio</option>
<option>Turbocharger</option>
</select>
标签<select>和<select>之间除<option>标签和</option>标签外，不应包含其他标签。
与文本输入元素不同的是，这里的size属性决定选择列表可同时显示多少项，比如有些页面可以规划空间，若size=1则只显示一条，其他的靠用户滚动。
multiple属性让用户同时选择多项，selected属性指定默认被选中的值。发送数据时，值为标签体内容。
如：extras=Electric windows
extras=Turbocharger
4.文本区域
<input type="text">只能输入一行文本，如果用户输入多行，可使用<textarea></textarea>,如下例:
<textarea name="comments" rows="4" cols="20">我想给亲爱的站长留言，希望你看到回复我！</textarea>
rows属性就是行数，cols为列数，列数大概是字符个数。发送参数为标签体内容，当然渲染的也是标签体。
5.重置按钮
很多时候页面中的输入框很多，而用户又反悔的情况下，需要一个重置按钮：
<input type="reset" value="擦除数据" /> //type属性为reset即可
6.提交按钮
同一个form标签内的控件收集的数据一并发送给服务器，所有这些或标签体或value属性值将作为请求体一部分被发送。
<input type="submit" value="点击新增"> //type=submit 即可，此value不被发送