HTML 에서 많이 쓰이는 <input> 태그의 타입에는 5가지가 있다.
- text
- checkbox
- radio
- dropdown
- submit
input 태그의 정의는 다음과 같다
type에 text, checkbox는 필요한 타입만 넣어주면 바로 생성할 수 있다.
<input type="타입" name="변수이름" value="값">
그렇다면 input 태그를 통해
사용자의 입력에 따라 반응하는 웹페이지를 만드는 방법에 대해서 알아보도록 하자.
1. 파일생성
webapp 디렉토리에 홈페이지로 쓰일 htmlForm.jsp 파일과 그에 응답할 웹페이지인 response.jsp를 만들었다.
2. 중요 포인트
- text
- 폼 작성(htmlForm.jsp)
이름: <input type="text" name="name">- 반응(response.jsp)
이름: ${param.name}
- checkbox
체크박스는 다른 input과 다르게 여러 개를 선택할 수 있는 도구기 때문에 반응할 때, 리스트로 받아서 처리해야한다.
- 폼 작성
<input type="checkbox" name="select" value="심장 문제"> 불규칙한 맥박- 반응(response.jsp)
증상 목록:
<%
String[] list = request.getParameterValues("select");
for(String str: list){
out.println(str + ", ");
}
%>
- radio
- 폼 작성 : checkbox와 동일
- 반응(response.jsp) : text와 동일
- dropdown
- 폼 작성
원하는 진료과<br>
<select name="diagnosis">
<option>외과</option>
<option>내과</option>
<option>정형외과</option>
<option>이비인후과</option>
<option>정신과</option>
</select>- 반응(response.jsp) : text와 동일
- submit
<input type="submit" value="submit">3. 코드 작성
-htmlForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.net.URLEncoder"%>
<html>
<head>
<meta charset="EUC-KR">
<title>진단표</title>
</head>
<body>
<h1>진단표</h1>
<form action="response.jsp">
이름: <input type="text" name="name">
<br><br>
전화번호: <input type="text" name="phone">
<br><br>
최근 나타난 증상<br>
<input type="checkbox" name="select" value="심장 문제"> 불규칙한 맥박
<input type="checkbox" name="select" value="호흡곤란"> 호흡곤란
<input type="checkbox" name="select" value="근육통"> 근육통<br>
<input type="checkbox" name="select" value="두통"> 두통
<input type="checkbox" name="select" value="어지럼증"> 어지럼증
<br><br>
스트레스 정도<br>
<input type="radio" name="degree" value="문제 없음"> 전혀 없음
<input type="radio" name="degree" value="문제 없음"> 약간 없음
<input type="radio" name="degree" value="문제 없음"> 보통
<input type="radio" name="degree" value="주의 요망"> 약간 있음
<input type="radio" name="degree" value="관리 필요"> 많음
<br><br>
원하는 진료과<br>
<select name="diagnosis">
<option>외과</option>
<option>내과</option>
<option>정형외과</option>
<option>이비인후과</option>
<option>정신과</option>
</select>
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
- reseponse.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="EUC-KR">
<title>진단표</title>
</head>
<body>
<h1>진단표</h1>
이름: ${param.name}
<br><br>
전화번호: ${param.phone}
<br><br>
증상 목록:
<%
String[] list = request.getParameterValues("select");
for(String str: list){
out.println(str + ", ");
}
%>
<br><br>
스트레스 정도: ${param.degree}
<br><br>
원하는 진료과: ${param.diagnosis}
<br><br>
</body>
</html>
4. 실행결과
적을 것을 다 적고 submit 버튼을 누르면 결과가 나온다.
