본문으로 건너뛰기
실습하기

<form> 태그

<form> 태그는 웹페이지에서 사용자 입력을 수집하기 위한 방법으로, 다양한 형태의 입력 필드(텍스트, 라디오 버튼, 체크박스, 버튼 등)를 포함할 수 있습니다.


주요 속성​

  • action: 사용자가 폼을 제출할 때 데이터를 보낼 URL을 지정합니다.

  • method: 폼 데이터를 서버로 보내는 방법을 지정합니다. 주로 "GET" 또는 "POST" 방식이 사용됩니다.

    • GET: URL에 폼 데이터를 추가하여 서버에 전송합니다. 주로 검색 쿼리나 간단한 데이터 전송에 사용됩니다.

    • POST: HTTP 본문에 폼 데이터를 포함하여 서버에 전송합니다. 민감한 데이터나 대량의 데이터를 전송할 때 사용됩니다.

  • enctype: 폼 데이터가 서버로 제출될 때 어떻게 인코딩될지 지정합니다. 주로 "multipart/form-data"가 파일 업로드에 사용됩니다.

  • autocomplete: 사용자가 폼 필드를 작성할 때 자동 완성 기능을 사용할지 여부를 지정합니다.


사용 예시​

템플릿 사용 예시
<form id="form">
  <input
    id="input-name"
    class="contact-input"
    type="text"
    name="name"
    placeholder="NAME"
  />
  <input
    id="input-email"
    class="contact-input"
    type="email"
    name="email"
    placeholder="EMAIL"
  />
  <textarea
    id="input-message"
    class="contact-textarea"
    name="message"
    placeholder="MESSAGE"
  ></textarea>
  <button id="send-button" class="border-highlight" type="submit">
    <span>SEND EMAIL</span>
  </button>
</form>

POST 방식으로 데이터 전송
<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />

  <input type="submit" value="Submit" />
</form>

특징:​

  1. <form> 태그 내부에는 다양한 입력 요소(<input>, <textarea>, <select>, <button> 등)를 포함할 수 있습니다.

  2. 폼의 데이터는 사용자가 "submit" 버튼을 클릭할 때 지정된 "action" URL로 전송됩니다.

  3. <form>은 또한 JavaScript를 통해 프로그래밍 방식으로 제출될 수 있습니다.

  4. 웹 페이지에서 사용자의 입력을 안전하게 수집하려면 HTTPS와 같은 안전한 프로토콜을 사용하는 것이 좋습니다.