我的第一个JSP——动态web

佚名 6年前 (2019-05-07) 随笔 2148人围观抢沙发百度已收录

模拟表单提交

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                 &nbsp;
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代码

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 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>