..

Search

<form>

HTML <form> 태그


정의 및 특징

<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.

 

<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다.

- <button>

- <fieldset>

- <input>

- <label>

- <option>

- <optgroup>

- <select>

- <textarea>


예제
<form action="/examples/media/action_target.php">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<form> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <form> 요소에 autocomplete 속성과 novalidate 속성이 새롭게 추가되었고, accept 속성은 더 이상 지원되지 않도록 변경되었습니다.


HTML과 XHTML에서의 차이점

XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

accept

 

파일 타입

서버로 업로드할 수 있는 파일 타입을 콤마(,)로 구분된 리스트로 명시함.

HTML5에서는 더 이상 지원하지 않음.

accept-charset

 

문자셋

폼 데이터(form data)가 서버로 제출될 때 사용되는 문자 인코딩(character encoding) 방식을 명시함.

action

 

URL

폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.

autocomplete

html5

on

off

<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시함.

enctype

 

application/x-www-form-urlencoded

multipart/form-data

text/plain

폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함.

(단, <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음)

method

 

get

post

폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함.

name

html5

텍스트

<form> 요소의 이름을 명시함.

novalidate

 

novalidate

폼 데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시함.

target

 

_blank

_self

_parent

_top

폼 데이터를 서버로 제출한 후 받는 응답이 열릴 위치를 명시함.


CSS 기본값

form {

  display: block;

  margin-top: 0em;

}


DOM 인터페이스

[OverrideBuiltins]

interface HTMLFormElement : HTMLElement {

  attribute DOMString acceptCharset;

  attribute DOMString action;

  attribute DOMString autocomplete;

  attribute DOMString enctype;

  attribute DOMString encoding;

  attribute DOMString method;

  attribute DOMString name;

  attribute boolean noValidate;

  attribute DOMString target;

 

  [SameObject] readonly attribute HTMLFormControlsCollection elements;

  readonly attribute unsigned long length;

  getter Element (unsigned long index);

  getter (RadioNodeList or Element) (DOMString name);

 

  void submit();

  void reset();

  boolean checkValidity();

  boolean reportValidity();

};


연관 페이지

HTML Form 요소 수업 ⇒


연습문제