HTML <form> 태그


예시

두 개의 입력 필드와 하나의 제출 버튼이 있는 HTML 양식:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.


정의 및 사용

태그 는 <form>사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.

<form>요소는 다음 양식 요소 중 하나 이상을 포함할 수 있습니다 .


브라우저 지원

Element
<form> Yes Yes Yes Yes Yes

속성

Attribute Value Description
accept-charset character_set Specifies the character encodings that are to be used for the form submission
action URL Specifies where to send the form-data when a form is submitted
autocomplete on
off
Specifies whether a form should have autocomplete on or off
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method get
post
Specifies the HTTP method to use when sending form-data
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not be validated when submitted
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search
Specifies the relationship between a linked resource and the current document
target _blank
_self
_parent
_top
Specifies where to display the response that is received after submitting the form

전역 속성

<form>태그는 HTML의 전역 속성도 지원 합니다 .


이벤트 속성

<form>태그는 HTML의 이벤트 속성 도 지원합니다 .



더 많은 예

예시

체크박스가 있는 HTML 양식:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

예시

라디오 버튼이 있는 HTML 양식:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

관련 페이지

HTML 자습서: HTML 양식 및 입력

HTML DOM 참조: 양식 개체

CSS 튜토리얼: 양식 스타일 지정


기본 CSS 설정

대부분의 브라우저는 <form>다음 기본값으로 요소를 표시합니다.

예시

form {
  display: block;
  margin-top: 0em;
}