- JSP 컨테이너(톰캣): JSP 페이지를 실행하고 관리하는 서버측 컴포넌트 JSP 페이지를 컴파일하고 실행 할 수 있는 Servlet 클래스로 변환시킨다. 이후 컴파일된 Servlet 클래스를 실행하여 동적 HTML 페이지를 생성 시키는 일을 한다.
폼 처리 개요
- 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식
- 과정
- 클라이언트에서 폼 정보 입력
- 폼 정보 웹 서버로 전송
- 웹 서버에서 JSP 컨테이너로 데이터 전송
- JSP 컨테이너에서 폼 데이터 처리 후 웹 서버로 전송
- 웹 서버에서 응답 웹 페이지와 응답 데이터를 클라이언트에게 전송
- 클라이언트 웹 페이지로 출력
폼을 구성하는 태그 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 폼 예제</title>
</head>
<body>
<form action="submit.html" method="post" name="formName">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password"><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age"><br>
<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthday"><br>
<label for="gender">성별:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label><br>
<label for="hobby">취미:</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">독서</label>
<input type="checkbox" id="hobby2" name="hobby" value="sports">
<label for="hobby2">스포츠</label>
<input type="checkbox" id="hobby3" name="hobby" value="traveling">
<label for="hobby3">여행</label><br>
<label for="car">자동차:</label>
<select id="car" name="car">
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="audi">Audi</option>
</select><br>
<select name="c">
<optgroup label="아시아">
<option value="kr">대한민국</option>
<option value="tw">대만</option>
</optgroup>
<optgroup label="유럽">
<option value="ge">독일</option>
<option value="fr">프랑스</option>
</optgroup>
</select>
<br>
<label for="comment">한줄평:</label><br>
<textarea id="comment" name="comment" rows="5" cols="30"></textarea><br>
<button type="submit">제출</button>
</form>
</body>
</html>
- form: 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 공간을 제공해주는 최상위 태그
- input: 사용자가 입력한 데이터를 서버로 전송하기 위해 사용하는 가장 기본적인 태그 type을 통해 여러 종류의 입력 필드 생성 가능
- type = “text”: 일반 텍스트
- type = “password”: 비밀번호
- type = “email”: 이메일
- type = “number”: 숫자
- type = “date”: 날짜
- select: 셀렉트 드롭다운 콤보박스를 생성하기 위해 사용
- textarea: 여러 줄의 일반 텍스트 입력 필드를 생성하기 위해 사용
- radio: 여러 개의 옵션 중에서 하나만 선택할 수 있는 라디오 버튼을 생성하기 위해 사용
- checkbox: 여러 개의 옵션 중에서 여러 개를 선택할 수 있는 체크박스를 생성하기 위해 사용
폼을 구성하는 속성
- action: 폼 데이터를 받아 처리하는 웹 페이지의 URL 설정
- method: 폼 데이터가 전송되는 HTTP 방식 설정(인테페이스 지정)
- POST: HTTP body에 데이터를 담아 전송 (등록)
- PUT: 전송한 데이터를 서버에서 수정 (수정)
- DELETE: 전송한 데이터 서버에서 삭제 (삭제)
- GET: URL의 쿼리스트링에 담아 전송 (받기)
- name: 폼 식별을 위한 이름 설정
- target: 폼 처리 결과 응답을 실행할 프레임 설정
- enctype: 폼 전송 콘텐츠 MIME 유형 설정
- accept-charset: 폼 전송에 사용할 문자 인코딩 설정