<form> 태그는 사용자가 입력한 데이터를 받아 사용자와 상호 작용 할 수 있도록 하는 텍스트 박스 이외에 다양한 입력 양식을 제공해 준다.
⊙ 암호를 입력받기 위한 암호 입력 상자
암호 입력과 같이 입력한 문자 대신 특수 문자가 출력되도록 하려면 입력상자를 만들 때 type 속성 값을 password로 지정한다.
<input type="password" name="pwd">HTML5에는 입력 양식에 대해 설명을 덧붙이기 위한 <label> 태그가 있는데 <label> 태그의 for 속성에 입력 양식의 id값을 매칭하면 두 태그는 서로 연결되어 라벨을 클릭하면 입력 양식을 클릭한 것과 동일한 효과를 얻는다.
<label for="userpwd"> 암 호 : </label>
<input type="password" name="pwd" id="userpwd"><br>
암호 입력 상자 예제 JSP 코드이다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form method="get" action="LoginServlet">
<label for="userid"> 아이디 : </label>
<input type="text" name="id" id="userid"><br>
<label for="userpwd"> 암 호 : </label>
<input type="password" name="pwd" id="userpwd"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
암호 입력 상자 예제 Servlet 코드이다.
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;
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.println("당신이 입력한 정보입니다.<br>");
out.println("아이디 : ");
out.println(id);
out.println("<br> 비밀번호 : ");
out.println(pwd);
out.println("<br><a href='javascript:history.go(-1)'>다시</a>");
out.print("</body></html>");
out.close();
}
}
⊙ 여러 줄 입력할 수 있는 글상자
<textarea> 태그는 여러 줄에 걸펴 글자들을 입력할 수 있는 입력 양식이다.
| 속성 | 설명 |
| rows | 텍스트 영역의 높이를 지정한다. 행수를 지정 |
| cols | 텍스트 영역의 너비를 지정한다. 한 줄에 입력할 수 있는 글자 수 지정 |
| name | 텍스트 영역이 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입력된 데이터인지를 구분할 수 있다. |
⊙ 배타적 선택을 하는 라디오 버튼
라디오 버튼은 여러 가지 항목 중에서 하나를 선택해야 할 경우 사용된다. 라디오 버튼은 배타적 선택을 하는데 배타적 선택이 가능하려면 목적이 동일한 라디오 버튼들을 그룹으로 구성하여야 한다. type 속성에 radio를 지정한다.
<input type="radio" name="chk_mail"> 목적이 동일한 라디오 버튼을 동일한 그룹으로 구성하려면 name 속성이 같아야 한다.
글 상자와 라디오 버튼 예제 JSP 코드이다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form method="get" action="RadioServlet">
<label for="gender"> 성별 : </label>
<input type="radio" id="gender" name="gender" value="남자" checked> 남자
<input type="radio" id="gender" name="gender" value="여자"> 여자 <br><br>
<label for="chk_mail"> 메일 정보 수신 여부 : </label>
<input type="radio" id="chk_mail" name="chk_mail" value="yes" checked> 수신
<input type="radio" id="chk_mail" name="chk_mail" value="no"> 거 부 <br><br>
<label for="content"> 간단한 가입 인사를 적어주세요^o^ </label>
<textarea id="content" name="content" rows="3" cols="35"></textarea> <br>
<input type="submit" value="전송">
</form>
</body>
</html>
글 상자와 라디오 버튼 예제 Servlet 코드이다.
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;
@WebServlet("/RadioServlet")
public class RadioServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String gender = request.getParameter("gender");
String chk_mail = request.getParameter("chk_mail");
String content = request.getParameter("content");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.println("당신이 입력한 정보입니다.<hr>");
out.println("성별 : <b>");
out.println(gender);
out.println("</b><br> 메일 정보 수신 여부 : <b>");
out.println(chk_mail);
out.println("</b><br> 가입 인사 : <b><pre>");
out.println(content);
out.println("</b></pre><a href='javascript:history.go(-1)'>다시</a>");
out.print("</body></html>");
out.close();
}
}
⊙ 체크 박스와 request의 getParameterValues()
체크 박스는 사용자가 선택하기 편하도록 여러 개의 항목을 나열하여 이중에서 원하는 항목을 선택할 수 있도록 하는것.
<input type="checkbox">동일한 이름의 체크 박스가 여러 개 있는 HTML 문서에서 여러 개의 항목을 선택한 후 서블릿 파일로 전송하면 쿼리 스트링에 동일한 이름으로 여러 개의 값들이 여러 차례 전송되는 것을 확인할 수 있다. 이럴 경우 배열 형태로 값이 전송되기 때문에 요청(request) 객체의 파라미터 관련 메소드 중에서 getParameterValues()를 사용한다.
getParameterValues() : 지정한 이름을 가진 파라미터의 모든 값을 배열 형태로 얻어오기 떄문에 동일한 이름으로 여러 번 값이 전송되어도 이를 처리할 수 있는 메소드
체크 박스 예제 JSP 코드이다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>악세사리</h2>
관심항목을 선택하세요.<hr>
<form method="get" action="CheckboxServlet">
<input type="checkbox" name="item" value="신발"> 신발
<input type="checkbox" name="item" value="가방"> 가방
<input type="checkbox" name="item" value="벨트"> 벨트<br>
<input type="checkbox" name="item" value="모자"> 모자
<input type="checkbox" name="item" value="시계"> 시계
<input type="checkbox" name="item" value="쥬얼리"> 쥬얼리<br>
<input type="submit" value="전송">
</form>
</body>
</html>
체크 박스 예제 Servlet 코드이다.
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;
@WebServlet("/CheckboxServlet")
public class CheckboxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<html><body>");
String items[] = request.getParameterValues("item");
if (items == null)
{
out.print("선택한 항목이 없습니다.");
}
else
{
out.println("당신이 선택한 항목입니다.<hr>");
for (String item : items)
{
out.print(item + " ");
}
}
out.println("<br><a href='javascript:history.go(-1)'>다시</a>");
out.print("</body></html>");
out.close();
}
}
⊙ 목록 상자
여러 항목 중 한 개를 선택하기 위한 콤보 박스, 여러 개를 선택할 수 있도록 하는 리스트 박스는 모두 <select> 태그로 size 속성 값만 달리 주어서 만들고 항목은 <option> 태그를 <select> 태그 내부에 추가해서 만든다.
size에 값을 지정하지 않거나 1을 지정하면 콤보 상자가 만들어 진다.
<label for="job">직업</label>
<select id="job" name="job" size="1">
<option value="">선택하세요</option>
<option value="학생">학생</option>
<option value="프로그래머">프로그래머</option>
<option value="기자">기자</option>
<option value="공무원">공무원</option>
<option value="교수">교수</option>
<option value="군인">군인</option>
<option value="경찰">경찰</option>
<option value="교육">교육</option>
</select>
<select> 태그에 size 속성에 2 이상의 값을 지정하면 리스트 박스가 만들어 진다. size 속성 값은 한 번에 보여줄 항목의 개수이고 multiple 속성을 추가하면 한꺼번에 여러 개의 항목을 선택할 수 있다.
<label for="interest" style="float: left;">관심분야</label>
<select id="interest" name="interest" size='5' multiple="multiple">
<option value="JSP">JSP</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="PYTHON">PYTHON</option>
<option value="JAVA">JAVA</option>
</select>'JSP' 카테고리의 다른 글
| [JSP&Servlet] 서블릿과 JSP의 관계 (1) | 2020.10.07 |
|---|---|
| [JSP&Servlet] JSP와 HTML의 동작 차이 (0) | 2020.10.07 |
| [JSP&Servlet] 서블릿의 응답, 요청 한글 처리 (0) | 2020.10.01 |
| [JSP&Servlet] 서블릿의 데이터 통신, 쿼리 스트링 (0) | 2020.10.01 |
| [JSP&Servlet] 서블릿의 동작 원리, 서블릿의 라이프 사이클 (0) | 2020.10.01 |