[9주 3일차] 폼 태그

Chapter 06. 폼 태그

 

 

1. 폼 처리의 개요

 

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

 

 

 

 

폼을 구성하는 태그의 종류

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

 

 

 

 

 

 

2. form 태그의 기능과 사용법

 

폼 태그는 사용자가 다양한 정보를 입력하고 서로 전달할 때 사용하는 태그이다.

단독으로 쓰이지 않고 다양한 정보를 입력할 수 있따.

폼 태그는 속성을 이용해 데이터를 전송할 때 어디로 보낼지, 어떤 방식으로 보낼지 설정할 수 있다.

또한, 폼 태그의 모든 속성은 필수가 아니라 선택적으로 사용한다.

 

 

 

폼 태그의 속성

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

 

 

 

폼을 전송하기 위한 HTTP 방식인 method 속성(웹 브라우저에서 웹 서버로 정보를 전송하는 방법)은 두가지가 있다.

 

1. GET 방식

폼 데이터를 URL 끝에 붙여서 전송

웹 브라우저의 주소 표시 줄에 그대로 나타난다.

앞의 주소와 구분하기 위해 물음표를 사용해 URL 뒤에 name=value와 같은 형식으로 요청 파라미터를 붙여 구분한다.

여러개의 파라미터를 전송할 경우는 &를 사용한다.

 

데이터가 외부에 노출되어 보안에 취약

지정된 리소스에서 데이터를 요청할 때 읽을때 사용한다.

→ 보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽는 경우 사용

 

 

2. POST 방식

내부적으로 전송한다.

웹 브라우저의 주소 표시 줄에 구분자가 나타나지 않는다.

보안성이 더 뛰어나다.

 

개인정보를 보호애햐할 때 사용

지정된 리소스에서 데이터를 처리할 때 쓰고 수정하고 삭제할 때 사용한다.

→ 보안이 필요한 경우 사용

 

 

 

구분	GET 방식	POST 방식
전송 형태	이름과 값의 형태로 URL에 포함되어 전송	HTTP 헤더 속에 감춰서 전송
전송량	제한적	제한 없음
속도	빠름	느림
보안	없음	있음

 

 

 

 

 

 

 

3. input 태그의 기능과 사용법

 

input 태그는 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그이다.

input 태그는 종료 태그 없이 단독으로 사용할 수 있다.

 

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

 

 

 

input 태그의 기본 속성

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

 

 

 

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

 

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

 

 

 

 

HTML5의 추가된 속성

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

 

 

 

 

 

 

 

 

4. select 태그의 기능과 사용법

 

select 태그는 여러개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그이다.

시작 태그와 종료태그 두가지가 있다.

리스트 박스에 여러 항목을 추가 삽입하기 위해서는 option 태그를 포함하고 있어야 한다.

 

 

<select 속성1="값1" [속성2="값2"....]>
	<option 속성1="값" [속성1]> 항목1 </opriont>
    <option 속성2="값" [속성2]> 항목2 </option>
    ...(생략)...
</select>

 

 

 

select 태그의 속성

속성	속성 값	설명
name	텍스트	목록 상자의 이름을 설정한다.
size	숫자	한번에 표시할 항목의 개수를 설정한다.

*multiple도 있으나 대신 checkbox를 사용한다.

 

 

 

option 태그의 속성

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

 

 

 

 

 

 

5. textarea 태그의 기능과 사용법

 

textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 태그이다.

높이를 지정하기 위한 cols와 rows 속성을 설정해야한다.

 

<textarea cols="너비 값" rows="높이 값">
...(생략)...
</textarea>

 

 

 

 

textarea 태그의 속성

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

 

 

 

 

 

 

6. 폼 데이터 처리하기

 

사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 서버가 이를 

 

 

 

6-1. 요청 파라미터의 값 받기

 

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

 

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

 

위와 같은 코드는 

만약 체크 박스를 선택한 이유 on 이 선택하지 않은 경우 null이 전송된다.

 

 

 

6-2. 요펑 파라미터의 전체 값 받기

 

 

폼 데이터의 일괄 처리 메소드

메소드	형식	설명
getParameterNames()	java.util.Enumeration	모든 입력 양식의 요청 파라미터 이름을 순서에 관련 없이 형태로 전달받는다.
hasMoreElements()		Enumactain(열거형) 요소가 있으면 true 없으면fasle
nextEmlemr		Enumeeriona(열거형) 요소를 반환한다.