HTML - ✨form 태그

yeong ·2022년 11월 9일

form 태그 : 웹프로그램을 요청하고 사용자로부터 입력받은 값을 전달하기 위한 태그
하위태그로 입력태그와 form 태그를 실행하기 위해 이벤트(Submit Event)를 발생시키는 태그를 반드시 작성

action 속성 : form 태그로 요청할 웹프로그램(Servlet)의 URL 주소를 속성값으로 설정

method 속성 : 웹프로그램의 요청방식(GET - 기본 또는 POST)을 속성값으로 설정
웹프로그램 요청방식에 따라 사용자 입력값을 전달하는 방식이 다름
GET : 사용자 입력값을 URL 주소의 질의문자열(QueryString)으로 전달
특징 :보안이 필요 없는 소량의 값을 전달할 때 사용하는 요청방식
POST : 사용자 입력값을 리퀘스트 메세지(Request Message)의 몸체부(Body)에 저장하여 전달
보안이 필요한 값 또는 대량의 값을 전달할 때 사용하는 요청방식

리퀘스트 메세지 : 웹프로그램 요청시 클라이언트의 정보를 저장하여 전달하기 위한 메세지(객체)
머릿부(Header)와 몸체부(Body)로 구성되며 GET 방식으로 요청할 경우 몸체부는 항상 비어있는 상태

enctype 속성 : 사용자 입력값을 전달하기 위한 파일형식(MimeType)을 속성값으로 설정
application/x-www-form-urlencoded(기본) : 사용자 입력값을 인코딩 처리된 문자 데이타로 전달하기 위한 속성값
multipart/form-data : 사용자 입력값을 원시 데이타로 전달하기 위한 속성값 - 파일을 전달할 경우 사용

	<form action="19_action.html" method="post" enctype="application/x-www-form-urlencoded">
		<!-- 입력태그 : 사용자로부터 값을 입력받기 위한 태그 - input, textarea, select 등 -->
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="password" name="passwd"><br>
		
		<!-- 제출 이벤트(Submit Event)를 발생시키는 태그 - input, button 등 -->
		<!-- => 제출 이벤트(Submit Event)에 의해 form 태그가 동작되어 브라우저의 주소창이 action 
		속성값으로 설정된 URL 주소로 변경되어 웹프로그램을 요청하며 입력태그에 입력된 입력값을 전달 -->
		<!-- button 태그의 type 속성값을 [submit]으로 설정하면 버튼을 클릭한 경우 제출 이벤트 발생 -->
		<button type="submit">로그인</button>
	</form>

0개의 댓글