HTML 태그 - form

<form> </form>

• 사용자 입력을 위한 HTML 양식을 만드는 데 사용된다.
• 사용자 입력을 수집하는 데 사용된다.
• 사용자 입력은 대부분 처리를 위해 서버로 전송된다.
• 서버로 넘기는 영역까지가 form의 역할
• form은 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소에 대한 컨테이너이다.

<form>
.
form elements
.
</form>

 

<form> 태그의 속성

action 

• 양식이 제출될 때 수행할 작업을 정의한다.
• 일반적으로 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송된다.(back-end 영역)

전송처리 관련 기술 : php, asp, jsp 등

 

예> 제출할 때 양식 데이터를 "action_page.php"(임의로 지정)로 보낸다.

<form action="/action_page.php">
.
form elements<!--사용자에게 입력 받은 정보내용-->
.
</form>

 

method

• 양식 데이터를 제출할 때 사용할 HTTP 전송방법을 지정
• 양식 데이터는 URL 변수( with method="get") 또는 HTTP 포스트 트랜잭션( with method="post")으로 보낼 수 있다.
• 양식 데이터를 제출할 때 기본 HTTP 방법은 GET이다.(기본값) 

 

 

1. get : 기본값, 주소란에 노출하여 전송하는 방식, 일반적으로 많이 사용

• 양식 데이터를 이름/값 쌍으로 URL에 추가한다. 
• GET을 사용하여 민감한 데이터를 보내지 말기! (제출된 양식 데이터는 URL에서 볼 수 있다!)
• URL의 길이는 제한되어 있다(2048자).
• 사용자가 결과를 북마크하려는 양식 제출에 유용하다.
• GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합하다.

 

예) <form action="/action_page.php" method="get">

 

 

 

2. post : 주소란에 노출되지 않게 전송하는 방식 

페이지를 숨겨야 하는 경우(암호, 비밀번호, 개인정보)나 많은 양의 데이터를 보내야 할 경우 사용한다.

• HTTP 요청 본문 내부에 양식 데이터를 추가한다(제출된 양식 데이터는 URL에 표시되지 않음).
• POST는 크기 제한이 없으며 많은 양의 데이터를 보내는 데 사용할 수 있다.
• POST를 사용한 양식 제출은 북마크 할 수 없다.
• 데이터에 민감하거나 개인 정보가 포함된 경우 항상 POST 사용하기!

 

예) <form action="/action_page.php" method="post">

 

 

autocomplete

양식의 자동 완성 기능을 켜거나 끄는 것을 지정한다.

자동 완성이 켜져 있으면 브라우저는 사용자가 이전에 입력한 값을 기반으로 값을 자동으로 완성한다.

 

예) <form action="/action_page.php" autocomplete="on">

 

 

novalidate

양식 데이터(입력)가 제출될 때 유효성을 검사하지 않도록 지정한다.

 

예)  <form action="/action_page.php" novalidate>