HTML5 form 요소

HTML form 태그는 사용자로부터 데이터를 입력받아 서버로 전송할 때 사용합니다.

form 태그 속성 및 사용 방법

속성	설명
method	폼 전송 방식을 지정합니다. GET과 POST가 있으며 각기 다른 특성이 있습니다.
name	폼의 이름을 설정합니다. 서버로 제출된 데이터를 참조할 때 사용합니다.
action	폼 데이터를 전송할 서버의 URL 또는 파일 경로를 지정합니다.

method 전송 방식

전송 방식	특징
GET	데이터가 URL에 노출되며 보안에 취약합니다. 전송 용량은 256~4096바이트로 제한됩니다.
POST	URL에 노출되지 않고 보안에 유리합니다. 전송 용량 제한이 없습니다.

주의! <form> 태그 내부에는 다른 <form> 태그를 중첩할 수 없으며, 한 페이지 내에서 동일한 name 속성값을 가진 폼을 중복 사용해서는 안 됩니다.

<fieldset> & <legend>

<fieldset>

<fieldset> 태그는 관련된 입력 요소들을 그룹화할 때 사용합니다. 시각적으로 구분을 제공해 폼의 구성을 명확히 할 수 있습니다.

<legend>

<legend> 태그는 <fieldset> 내에서 그룹의 제목을 정의합니다. <fieldset> 내에 반드시 포함되어야 하며, 폼의 특정 섹션을 설명합니다.

<form>
  <fieldset>
    <legend>Login</legend>
    ID: <input type="text" /> <br>
    Password: <input type="password" />
  </fieldset>

  <br>

  <fieldset>
    <legend>Sign Up</legend>
    Email: <input type="email" /> <br>
    Password: <input type="password" />
  </fieldset>
</form>

<button>

button 태그의 기본 타입은 button이며,
폼 요소 내부에서 기본 타입은 submit입니다. 그리고 폼 전송 버튼으로 작동합니다.