[JSP] 폼(form) 태그

폼(form)

사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식.

전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여줌.

폼은 사용자와 웹 애플리케이션이 상호 작용하는 중요한 기술 중 하나.

 

폼을 구성하는 태그 종류

태그	설명
form	폼을 정의하는 태그로 최상위 태그
input	사용자가 입력할 수 있는 태그
select	항목을 선택할 수 있는 태그
textarea	여러 줄을 입력할 수 있는 태그

 

 

form 태그

// 기본 형식

<form 속성1 = "값1" [속성2="값2"...]>
	// 다양한 입력 양식 태그 (<inpunt>, <select>, <textarea>)
</form>

 

form 태그의 속성

속성	설명
action	폼 데이터를 받아 처리하는 웹 페이지의 URL을 설정
method	폼 데이터가 전송되는 HTTP 방식을 설정
name	폼을 식별하기 위한 이름을 설정
target	폼 처리 결과의 응답을 실행할 프레임을 설정
enctype	폼을 전송하는 콘텐츠 MME 유형을 설정
accept-charset	폼 전송에 사용할 문자 인코딩을 설정

form 태그의 method 속성은 웹 브라우저에서 웹 서버로 정보를 전송하는 방법으로는 GET방식과 POST 방식이 있음.

---

input 태그

사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그이며 input 태그는 종료 태그 없이 단독으로 사용할 수 있음.

// 기본 형식

<input 속성1 = "값1" [속성2="값2"...]>

 

input 태그의 기본 속성

속성	속성 값	설명
type	text	기본값으로 한 줄의 텍스트를 입력할 때 사용한다.
	radio	라디오 버튼으로 열거된 것 중 하나만 선택할 때 사용한다.
	checkbox	체크 박스로 열거된 것 중 다중 선텍을 할 때 사용한다.
	password	암호를 입력할 때 사용한다.
	hidden	보이지 않게 숨겨서 값을 전송할 때 사용한다.
	file	파일 업로드를 위한 파일을 선택할 때 사용한다.
	button	버튼 모양을 출력할 때 사용한다.
	reset	폼에 입력된 값을 모두 초기화할 때 사용한다.
	submit	폼에 입력된 값을 모두 서버에 전송할 때 사용한다.
name	텍스트	입력 양식을 식별하는 이름을 설정한다.
value	텍스트	입력 양식의 초깃값을 설정한다.

 

input 태그의 기본 속성 외에 사용되는 속성

속성	속성 값	설명
readonly		입력 양식을 읽기 전용으로 설정한다.
maxlength	숫자	입력 양식의 최대 입력 글자 수를 설정한다. type="text"인 경우에만 사용한다.
size	숫자	입력 양식의 너비를 설정한다. type="text"인 경우에만 사용한다.
disabled		해당 입력 양식을 비활성화로 설정한다. 모든 폼 구성 태그에 사용한다.
checked		기본값을 선택할 때 설정한다. type="checkbox" 또는 type="radio"일 경우에만 사용한다.

 

HTML5의 추가된 속성

속성	속성 값	설명
required		입력 양식을 필수 태그로 설정한다. 필수 태그를 입력하지 않고 <submit>버튼을 누르면 오류 메시지가 웹 브라우저에 출력된다.
autofocus		웹 페이지가 로딩되자마자 해당 입력 양식의 포커스를 설정한다.
placeholder	텍스트	입력 양식의 힌트를 설정한다.
pattern	regexp	정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용한다.

---

select 태그

여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그이며, 시작 태그와 종료 태그가 있으며, 리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option태그를 포함해야 함.

// 기본 형식

<select 속성1 = "값1" [속성2 = "값2" ...]>
	<option 속성1 = "값" [속성1]> 항목1 </option>
	<option 속성2 = "값" [속성2]> 항목2 </option>
	...
</select>

 

select 태그의 속성

속성	속성 값	설명
name	텍스트	목록 상자의 이름을 설정
size	숫자	한 번에 표시할 항목의 개수를 설정
multiple		다중 선택이 가능하도록 하며, ctrl을 눌러 목록 상자의 항목을 다중 선택.

 

option 태그의 속성

속성	속성 값	설명
value	텍스트	항목의 값을 설정
selected		해당 항목을 초깃값으로 선택
disabled		항목을 비활성화

 

<optgroup> 태그

이 태그로 항목을 그룹으로 만들 수 있음.

label 속성을 사용하여 그룹으로 만들 이름을 설정하며, optgroup 태그 하위에 option 태그를 포함해야 함.

// optgroup 태그 사용 예

<p> <select name="city">
		<optgroup label = "서울특별시">
			<option value = "seocho-gu">서초구</option>
			<option value = "gangnam-gu">강남구</option>
			<option value = "songpa-gu">송파구</option>
		</optgroup>
		<optgroup label = "경기도">
			<option value = "seongnam-si">성남시</option>
			<option value = "suwon-si">수원시</option>
			<option value = "yongin-si">용인시</option>
		</optgroup>
		</select>

---

textarea 태그

여러 줄의 텍스트를 입력할 수 있는 태그이며, 기본적으로 textarea 태그의 너비와 높이를 지정하기 위해 cols와 rows 속성을 설정하고, 닫는 태그가 있음.

textarea는 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력됨.

// 기본 형식

<textarea cols="너비 값" rows="높이 값">
...
</textarea>

 

textarea 태그의 속성

속성	속성 값	설명
name	텍스트	이름을 설정
cols	숫자	입력할 텍스트 영역의 너비( 열 크기)를 설정
rows	숫자	입력할 텍스트 영역의 높이 ( 행 크기)를 설정
wrap	off	줄 바꿈을 설정. wrap=”off” : 줄 바꿈을 하지 않고 문장을 입력할 때 수평 스크롤바가 생기고 옆으로 계속 문장이 입력된다.
wrap	soft	wrap=”soft” : 엔터를 누르지 않아도 텍스트라인 끝에서 자동으로 행이 바뀐다.
wrap	hard	wrap=”hard” : soft상태와 비슷하며 실제 내용을 서버에 전송할 때 캐리지 리턴 문자를 전달 한다.

---

폼 데이터 처리

JSP에서 가장 많이 사용하는 기능 중 하나는 사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 서버가 이를 처리하는 것. 폼 데이터를 처리함으로써 표현문이나 스클립틀릿 태그에 request 내장 객체를 이용하여 폼 페이지에서 전달된 값을 얻을 수 있음.

 

요청 파라미터의 값 받기

request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter( )메소드를 이용하여 요청 파라미터의 값을 얻을 수 있음.

// 기본 형식

String 변수=request.getParameter("요청 파라미터 이름");

 

요청 파라미터의 전체 값 받기

getParameter( )메소드를 이용하면 폼 페이지가 서버로 보낸 요청 파라미터 값을 얻을 수 있음. 하지만 입력 데이터가 다수이거나 입력 양식이 다양하면 이를 전송받기 위해 최악의 경우 입력 양식에 맞춰 전달받는 데이터의 수만큼 request 내장 객체의 getParameter( )메소드를 설정해야 함.

이때, 같은 일괄 처리 메소드를 이용하면 웹 브라우저에서 서버로 전송되는 요청 파라미터를 설정하지 않아도 모든 값을 전달 받을 수 있고, 또한 텍스트 박스, 라디오 버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한 번에 폼 데이터를 전달 받을 수 있음.

 

 

메소드	형식	설명
getParameterNames( )	java.util.Enumeration	모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration(열거형) 형태로 전달 받는다.
hasMoreElements( )	boolean	Enumeration(열거형) 요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환.
nextElement ( )	E (Enumeration 객체를 생성 할 때의 타입)	Enumeration(열거형) 요소를 반환한다.