코딩의 시작, TCP School

◀ 이전 다음 ▶

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>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<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	on off	<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시함.
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함. (단, <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음)
method	get post	폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함.
name	텍스트	<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 요소 수업 ⇒

연습문제