HTML - 폼 태그는 무엇인가?

회원가입이나 일반 게시판에 글을 작성하기 위해 사용되는 양식을 폼 태그라 부릅니다.

물론 폼태그만으로 회원가입이나 게시판을 만들 수 있는 것은 아닙니다. 사용자가 양식에 맞게 작성할 수 있도록 해주는 것일 뿐 입력사항에 대한 처리는 PHP 같은 언어를 사용해서 자료를 입력해야 합니다.

HTML 문서에서 사용자가 입력한 사항을 서버로 전달해 주는 과정까지가 바로 폼 태그의 역할입니다.

<form method="post" action="test.php"> 폼 태그에 들어갈 입력양식 </form>

method 속성

method 는 입력된 내용을 어떠한 방식으로 전달할 것인지를 결정하는 속성으로 get 이나 post 중 하나를 사용할 수 있습니다.

값	설 명
GET	사용자가 입력양식에 맞게 작성한 값들이 url 에 붙어 전달되며, action 에 지정한 파일로 그 값들을 넘겨주게 됩니다.
POST	보통 전달할 값들이 많은 경우에 사용되며 브라우저에 전송된 값이 노출되지 않아 많이 이용하는 방식입니다.

action 속성

action 속성은 입력 값들을 어디로 전달할지를 결정합니다. 즉 action=test.php 라고 하면 입력 값이 test.php 로 전달되어 집니다.

enctype 속성

인코딩 유형을 설정합니다.

속 성	설 명
application/x-www-form-urlencoded	모든 문자를 인코딩함. 기본값
multipart/form-data	인코딩 안함. 파일 업로드시 사용됨.
text/plain	공백은 + 기호로 변환하지만, 특수문자는 인코딩 안함.

novalidate 속성

novalidate 속성은 폼 제출시 유효성 검사를 무효화 시키고자 할 때 유용합니다.

유효성 검사를 해야 하는 폼에서 폼 요소를 전송시킬 때 필드의 값들의 입력 여부를 검증하지 않고, 전송시킬 수 있습니다.

아래 예제에서 required 속성은 필수 항목으로 지정하였는데, novalidate 를 전체에 지정했기 때문에 필수항목을 지정한 모든 필드를 무효화시켜 버립니다.

<form action="form.php" method="post" novalidate>
  E-mail: <input type="email" name="email" required />
  Password: <input type="password" name="pass" required/>
  <input type="submit" name="전송" value="전송"/>
</form>

name 속성

폼의 이름을 지정합니다.

한 문서에 여러 개의 폼 태그가 있으면 폼을 구분하기 위해 사용되며, CSS 로 폼을 꾸밀 수 있습니다.

target 속성

action 속성에 지정한 파일을 현재 창에 열지 다른 곳에 열지를 결정합니다.

autocomplete 속성

autocomplete 은 자동완성 기능을 on 또는 off 할 때 사용합니다. 브라우저는 가끔 이전에 입력했던 값을 기억하고 있는데, 이것을 금지해야 할 때 이용합니다.

값이 off 이면 자동완성 기능을 끔니다.

<form action="form.php" method="post" autocomplete="off">
  E-mail: <input type="email" name="email"/>
  Password: <input type="password" name="pass"/>
  <input type="submit" name="전송" value="전송"/>
</form>