form

설명
사용자 데이터를 서버로 전송하는 폼.
Primary
Primary
content category
interactive
flow
예시actionmethodenctype (encryption)target

예시

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>
notion image

action

form이 제출될 백엔드 URL을 지정해야함
설정하지 않거나 “” 빈 문자열로 설정한다면 현재 URL로 보냄.

method

  • post
    • 데이터가 body에 담겨서 보내짐.
  • get (default)
    • URL 뒤에 ? 구분자로 파라미터를 붙여서 보냄.
  • dialog
    • 폼이 <dialog> 안에 있다면 dialog를 닫으면서 submit event를 발생시킨다.

enctype (encryption)

  • application/x-www-form-urlencoded : default
  • multipart/form-data
    • input type=file인 값을 포함하는 form의 경우 이렇게 설정
  • text/plain : 디버깅 목적이므로 프로덕트에선 쓰지 말자

target

  • _self (default), _blank, _parent, _top, _unfencedTop