[HTML]13_form 태그

Frontend/HTML

[HTML]13_form 태그

sukii 2023. 12. 26. 10:35

🤔form 태그

웹프로그램을 요청하여 사용자로부터 입력받은 값을 전달하기 위한 태그

=> 하위태그로 반드시 사용자로부터 값을 입력받기 위한 입력태그와 웹프로그램을 요청하기 위한 Submit Event를 발생하는 태그를 반드시 작성
*제출 이벤트(Submit Event) : form 태그를 사용하여 웹프로그램을 요청하기 위한 이벤트

🔶action 속성 : form 태그를 사용하여 요청할 웹프로그램의 URL 주소를 속성값으로 설정
=> action 속성을 생략한 경우 현재 실행중인 웹프로그램의 URL 주소를 속성값으로 사용

🔶 method 속성 : 웹프로그램을 요청하는 요청방식(GET 또는 POST)을 속성값으로 설정
=> method 속성을 생략한 경우 GET 방식으로 웹프로그램 요청
=> 웹프로그램을 요청하는 방식에 따라 사용자 입력값을 전달하는 방법이 상이

🔸GET : 사용자 입력값을 URL 주소의 질의문자열(QueryString)으로 전달
=> 보안을 필요로 하지 않는 소량의 값을 전달할 때 사용하는 요청방식

=> URL은 최대 전달할 수 있는 크기가 2KB

=> 예를 들어, 게시글의 글번호를 전달할 때 쿼리스트링으로 전달(보안이 필요 없으니까)

*form태그를 쓸 때는 거의 POST 방식을 씀

🔸 POST : 사용자 입력값을 리퀘스트 메세지의 몸체부(Entity Body)에 저장하여 전달
=> 보안을 필요로 하는 값을 전달하거나 대량의 값을 전달하기 위한 요청 방식

*리퀘스트 메세지(Request Message) : 클라이언트가 서버에 접속하여 웹자원(Web Context)을 요청한 경우 클라이언트의 정보를 담아 웹자원에게 전달하기 위한 객체
=> 머릿부(Header)와 몸체부(Entity Body)로 구성되어 있으며 GET 방식으로 웹자원을 요청한 경우 리퀘스트 메세지의 몸체부는 미사용

🔶 enctype 속성 : application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 속성값으로 설정
=> 리퀘스트 메세지의 몸체부에 사용자 입력값을 저장한 파일의 형태를 표현
=> enctype 속성을 생략한 경우 application/x-www-form-urlencoded를 기본 속성값으로 사용
🔸 application/x-www-form-urlencoded : 사용자 입력값을 인코딩 처리된 문자 데이타의 파일로 전달 (영어, 한글 다 가능)
🔸 multipart/form-data : 사용자 입력값을 원시 데이타의 파일로 전달 - 파일을 입력받아 전달할 때 사용

🔸 text/plain : 사용자 입력값을 인코딩 처리하지 않은 문자 데이타의 파일로 전달

13_form.html 파일 코드👩‍💻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form 태그</h1>
	<hr>	
	<form action="/web/html/13_action.html" method="post" enctype="application/x-www-form-urlencoded">
		<!-- 입력태그 : 사용자로부터 값을 입력받기 위한 태그 - input 태그, textarea 태그, select 태그 등 -->	
		<p>아이디 : <input type="text" name="id"><br></p>
		<p>비밀번호 : <input type="password" name="passwd"><br></p>
		
		<!-- 제출 이벤트(Submit Event)를 발생하는 태그 : input 태그, button 태그 등 -->
		<!-- => 제출 이벤트가 발생되면 form 태그가 동작되어 action 속성값으로 설정된 URL 주소의
		웹프로그램을 요청하며 입력태그에 입력된 값을 웹프로그램에게 전달 -->
		<!-- => 웹프로그램의 실행결과(HTML 문서)를 응답받아 출력 - 페이지 새로 고침 -->
		<!-- => 클라이언트 브라우저 주소창에는 요청 URL 주소로 변경 -->
		
		<!-- button 태그 : 버튼을 출력하는 태그 -->
		<!-- type 속성 : button, submit, reset 중 하나를 속성값으로 설정 -->
		<!-- => 속성값을 [submit]으로 설정한 경우 버튼을 클릭하면 제출 이벤트 발생 --> 
		<button type="submit">로그인</button> 
	</form>
</body>
</html>

13_form.html 파일(위 코드) 실행 결과⬇️

13_action.html 파일 코드 👩‍💻

form 태그를 사용하여 요청할 웹프로그램의 URL 주소로 쓸 13_action이라는 html 문서 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>form 태그</h1>
	<hr>
	<p>form 태그를 사용하여 요청한 웹프로그램 - 사용자 입력값을 전달받아 처리 가능</p>
	
	<!-- a 태그를 사용하여 클릭 이벤트가 발생되면 웹프로그램을 GET 방식으로 요청하여 HTML 문서를
	응답받아 출력 처리  -->
	<!-- => href 속성에 요청할 웹프로그램의 URL 주소를 속성값으로 설정 -->
	<!-- => a 태그를 사용하여 웹프로그램을 요청할 경우 값을 전달하기 위해 질의문자열을 작성하여 전달 가능 -->
	<!-- URL 주소는 영문자, 숫자, 일부 특수문자로만 작성 가능  -->
	<!-- => 질의문자열을 작성할 경우 영문자, 숫자, 일부 특수문자를 제외한 문자는 정상적인 문자값으로 전달 불가능 -->
	<!-- => 영문자, 숫자, 일부 특수문자를 제외한 문자가 포함된 문자값은 부호화 처리하면 정상적인
	 전달 가능 - Java 또는 JavaScript -->	 
	<!-- <p><a href="/web/html/13_form.html?name=홍길동">[로그인 페이지 이동]</a></p> -->
	<p><a href="/web/html/13_form.html?name=HongGilDong">[로그인 페이지 이동]</a></p>
</body>
</html>

13_action .html 파일(위 코드) 실행 결과⬇️