界面1
界面2
實現代碼
index.html
<!DOCTYPE html>
<html>
<head>
<title>一個船新版本</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!--style在這裏相當於給選定元素的全局設置樣式-->
<style type="text/css">
div.container{
margin: auto;
border: blue dotted;
}
label{
margin-left: 3px;
}
label:hover{
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center">用戶註冊</h1><hr>
<form class="form-inline" action="register">
<!-- action屬性規定當提交表單時，向何處發送表單數據，不需要加斜槓，對應Servlet中下面語句
@WebServlet(name = "register", urlPatterns = {"/register"}) -->
用 戶：<input type="text" name="username" value="Linn" class="form-control"><br><br>
密 碼：<input type="password" name="password" value="123456" class="form-control"><br><br>
性 別：<label for="m">男</label> <input type="radio" name="sex" id="m" checked>
<label for="f">女</label> <input type="radio" name="sex" id="f"><br><br>
國 籍：<select name="country" class="form-control">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="Korea">韓國</option>
<option value="Japan">日本</option>
</select><br><br>
愛 好：<br><br> <input name="hobbys" id="h1" type="checkbox" checked value="乒乓球（input標籤中value記錄返回值）"> <label for="h1">乒乓球</label>
<br> <input name="hobbys" id="h2" type="checkbox" value="羽毛球（input標籤中value記錄返回值）"><label for="h2">羽毛球</label><br><br>
<input style="margin-left: 80px" type="submit" value="提交" class="btn btn-sm btn-success">
</form>
</div>
</body>
</html>
register.java
package com.myexercise01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Linn
*/
@WebServlet(name = "register", urlPatterns = {"/register"})
public class register extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
res.setHeader("content-type", "text/html;charset=utf-8");
PrintWriter out=res.getWriter();
out.println("<h1>註冊信息</h1>");
out.println("<br>賬戶："+req.getParameter("username")); //這裏要注意是獲取input和select標籤中的name屬性值
out.println("<br>密碼："+req.getParameter("password"));
out.println("<br>性別："+req.getParameter("sex"));
out.println("<br>國籍："+req.getParameter("country"));
out.println("<br>愛好：");
//調用getParameterValues()方法根據參數名獲取參數的多個值，以字符串數組返回多個值
String[] hobbys=req.getParameterValues("hobbys");
for(String x:hobbys){
out.print("<br> "+x);
}
out.println("<br>客戶端優先接受的MIME類型："+req.getHeader("accept"));
out.println("<br>客戶端優先接受的語言："+req.getHeader("accept-language"));
out.println("<br>客戶端的瀏覽器信息："+req.getHeader("user-agent"));
}
}