模拟表单提交
Html代码
1 <div id="heard">
2 <!--头部 注册界面-->
3 <form action="first.jsp" method="post">
4 <div class="heard">
5 免费注册
6 </div>
7 <!--主体部分-->
8 <div class="main">
9 <p>
10 <span>用户名：</span><input class="text" type="text" name="userName" placeholder="请输入需要注册的用户名">
11 </p>
12 <p>
13 <span>密码：</span><input class="text" type="password" name="userPass" placeholder="请输入密码">
14 </p>
15 <p>
16 <span>手机号：</span><input class="text" type="number" name="userNum" placeholder="请输入手机号">
17 </p>
18 <p>
19 <span>性别：</span>
20 <input type="radio" value="男" name="sex">男
21
22 <input type="radio" value="女" name="sex">女
23 </p>
24 <p>
25 <span>爱好：</span>
26 <input type="checkbox" name="hobby" value="篮球">篮球
27 <input type="checkbox" name="hobby" value="足球">足球
28 <input type="checkbox" name="hobby" value="rap">rap
29 <input type="checkbox" name="hobby" value="hipHop">HipHop
30 </p>
31 <p>
32 <span>邀请码：</span><input class="text" type="text" name="code" placeholder="选填">
33 </p>
34 <div style="text-align: center;margin-top: 10px">
35 <input class="submit" type="submit" value="提交" name="submit">
36 <input class="reset" type="reset" value="重置" name="reset">
37 </div>
38 </div>
39 </form>
40 </div>
CSS代码
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6
7 #heard{
8 margin: 10px auto;
9 width: 422px;
10 height: 442px;
11 border: 2px royalblue solid;
12 border-radius:1%;
13 }
14 .heard{
15 line-height: 44px;
16 font-size:20px;
17 text-align:center;
18 color:red;
19 border-bottom:1px solid grey ;
20 }
21 .main{
22 padding: 20px;
23 }
24 .text{
25 width: 270px;
26 height:35px;
27 margin-bottom: 20px;
28 border-radius: 3px;
29 border: 1px solid #ddd
30 }
31 span{
32 display:inline-block;
33 width:70px;
34 margin-bottom: 20px;
35 font-family: "Adobe 黑体 Std R";
36 }
37 .submit{
38 width: 140px;
39 height: 30px;
40 border: 1px seagreen solid;
41 border-radius: 2px;
42 font-weight: 500;
43 }
44 .submit:hover{
45 /*background-color: seagreen;*/
46 font-style: oblique;
47 font-weight: bolder;
48 background: linear-gradient(to right, red, orange, yellow, green, blue, violet);
49 }
50 .reset{
51 width: 60px;
52 height: 25px;
53 border:0;
54 border-radius: 2px;
55 font-weight: 500;
56 background-color:greenyellow;
57 }
58 </style>
JSP代码
1 <body>
2 <% request.setCharacterEncoding("UTF-8");%>
3 <P>用户名：<%String username = request.getParameter("userName"); %>
4 <%=username %><P/>
5 <p>密码：<%String userpass= request.getParameter("userPass"); %>
6 <%=userpass %></p>
7 <p>手机号：<%String usernum= request.getParameter("userNum"); %>
8 <%=usernum %></p>
9 <p>性别：<%String SEX= request.getParameter("sex"); %>
10 <%=SEX %></p>
11 <p>爱好：<%String hobby= request.getParameter("hobby"); %>
12 <%=hobby %></p>
13 <p>邀请码：<%String code= request.getParameter("code"); %>
14 <%=code %></p>
15 </body>
效果展示：
提交结果：
