JSP中的必用的HTML元素_表单

  • 作为收集和渲染但最终也是为收集客户端数据的表单

  虽然html不作为jsp规范的一部分,但是确实jsp重要的一部分,先抛弃html语法细则,只记录后端必须应该会的HTML元素,即表单。上面的标题已经很明确了,表单是为收集用户  用户的浏览器脚本元素,也应用于渲染响应数据并最终让客户端修改更新(还是收集数据),下面将以代码形式记录下所有的浏览器将其作为请求体的标签元素,方便在合适的场  景选用合适的标签设计页面,几个标签元素被我分为两类:value标签属性为请求参数的一类(即input标签)和标签体为请求参数的一类。

  并在后面的笔记中总结两个基本问题:如何有选择地提交表单中的部分数据或同一页面中一个表单全部和另一个表单的部分数据如何发送给服务器;当jsp接受到数据模型后,如何  让数据渲染多选框。

 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>
View Code

  

猜你喜欢

转载自www.cnblogs.com/10000miles/p/9325885.html