4-1 form과 input 요소

 

웹 폼의 예시)

 

웹 폼의 구성)

 

 

입력 요소를 담는 form 요소

: 사용자로부터 다양한 현태의 데이터를 입력받는 데 필요한 요소("폼 요소")들을 담는 컨테이너

-> 폼 요소 : input, textarea, select, datalist, output, fieldset, label 등

*폼 요소는 form 요소 내에서 사용해야 함

 

-> 브라우저 화면에서는 아무것도 표시되지 않음

<form action="URL" method="전송방식" ...>

</form>

 

 

-속성

-> action="URL" : 폼 데이터를 전달받아 처리할 서버 응용프로그램의 주소

-> method="전송방식" : 폼데이터를 서버로 전송하는 방식

*속성값(전송방식) : get, post

 

-> name(폼 이름), accept-charset(문자 인코딩 방식), autocomplete(자동완성 기능의 사용 여부), enctype(method="post"일 때 데이터 인코딩 방식), novalidate(데이터의 유효성 검사하지 않음), target(서버로부터 전달받은 처리 결과를 보여줄 창)

 

 

입력)

// action : 사용자가 입력한 정보를 보낼 주소

// post : 사용자가 입력한 정보를 어떤 방식으로 보낼 것인지 지정

 

출력)

 

 

 

form 요소의 method 속성값의 비교

	method="get"	method="post"
전송 형태	*기본값. 폼 데이터가 이름과 값의 쌍 형태로 URL에 포함되어 전송 * "URL?name=value&name=value&..."	* HTTP Request 몸체 속에 포함시켜 전송
데이터 길이	*최대 2048글자(4096바이트)	*제약 없음
보안	*보안이 중요하지 않은 데이터(ex : 검색어) 전달에 사용 * '이전 페이지' 버튼을 통한 이동이 가능	*보안이 필요한 정보(ex : 로그인 정보, 회원 정보) 등의 전송에 사용 * '이전 페이지' 버튼을 누르면 데이터를 다시 보내야 한다는 경고 메시지가 표시

 

 

 

 

다양한 입력 타입을 지정하는 input 요소

: 다양한 유형의 데이터를 입력 받을 수 있는 타입 지정

<input type="입력 타입" 속성="값" ... >

-> 종료태그 없이 사용

-> type 속성의 값으로 다양한 유형의 입력 타입을 표현

 

 

 

input 요소의 type 속성값의 종류

 

출력)

 

 

 

input 요소의 속성

-> type 속성의 값에 따라 사용 가능한 속성이 달라짐.