코딩의 시작, TCP School

◀ 이전 다음 ▶

HTML <input> 태그

정의 및 특징

<input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다.

<input> 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용됩니다.

이러한 입력 필드는 <input> 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다.

<input> 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있습니다.

<label> 요소를 사용하면 <input> 요소의 라벨(label)을 정의할 수도 있습니다.

예제

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

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<input>	지원함	지원함	지원함	1.0	1.0	지원함

HTML5에서 변경된 사항

HTML5에서는 <input> 태그의 align 속성을 더 이상 지원하지 않습니다.

또한, 일부 새로운 속성이 추가되었으며, type 속성에도 일부 새로운 속성값이 추가되었습니다.

HTML과 XHTML에서의 차이점

HTML에서는 <input> 태그를 닫지 않지만, XHTML에서는 다음과 같이 반드시 태그를 닫아야만 합니다.

<input />

사용할 수 있는 속성

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

속성명	속성값	설명
accept	파일 확장자 audio/* video/* image/* 미디어 타입	서버로 업로드할 수 있는 파일의 타입을 명시함. (단, <input> 요소의 type 속성값이 “file”인 경우에만 사용할 수 있음)
align	left right top middle bottom	이미지 입력에 대한 정렬 방법을 명시함. (단, <input> 요소의 type 속성값이 “image”인 경우에만 사용할 수 있음) HTML5에서는 더 이상 지원하지 않음.
alt	텍스트	이미지를 위한 대체 텍스트를 명시함. (단, <input> 요소의 type 속성값이 “image”인 경우에만 사용할 수 있음)
autocomplete	on off	<input> 요소에서 자동 완성 기능을 사용할지 여부를 명시함.
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동됨을 명시함.
checked	checked	페이지가 로드될 때 미리 선택될 <input> 요소를 명시함. (단, <input> 요소의 type 속성값이 “checkbox” 또는 “radio”인 경우에만 사용할 수 있음)
dirname	inputname.dir	폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 입력 필드의 텍스트 방향성(text directionality)을 저장할 이름을 명시함. (언제나 이름 뒤에 “.dir”를 추가함)
disabled	disabled	해당 <input> 요소가 비활성화됨을 명시함.
form	form id	해당 <input> 요소가 포함될 하나 이상의 <form> 요소를 명시함.
formaction	URL	폼 데이터(form data)가 서버로 제출될 때 입력 데이터를 처리할 파일의 URL을 명시함. (단, <input> 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 있음)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시함. (단, <input> 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 있음)
formmethod	get post	폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시함. (단, <input> 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 있음)
formnovalidate	formnovalidate	폼 데이터(form data)가 서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시함. (단, <input> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)
formtarget	_blank _self _parent _top 프레임 이름	폼 데이터(form data)가 서버로 제출된 후 받는 응답(response) 데이터를 어디에 표시할 지를 명시함. (단, <input> 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 있음)
height	픽셀	<input> 요소의 높이를 픽셀 단위(in pixels)로 명시함. (단, <input> 요소의 type 속성값이 “image”인 경우에만 사용할 수 있음)
list	datalist id	<input> 요소에서 사용하기 위해 미리 정의해 놓은 옵션들을 포함하고 있는 <datalist> 요소를 명시함.
max	숫자 날짜	<input> 요소의 최댓값을 명시함.
maxlength	숫자	<input> 요소에서 허용되는 최대 문자수를 명시함.
min	숫자 날짜	<input> 요소의 최솟값을 명시함.
multiple	multiple	<input> 요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시함.
name	텍스트	<input> 요소의 이름을 명시함.
pattern	정규 표현식	폼 제출 시 <input> 요소의 값을 검사할 때 사용되는 정규 표현식(regular expression)을 명시함.
placeholder	텍스트	<input> 요소에 입력될 값에 대한 짧은 힌트를 명시함.
readonly	readonly	<input> 요소의 입력 필드가 읽기 전용임을 명시함.
required	required	폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시함.
size	숫자	<input> 요소의 너비를 문자수(in characters) 단위로 명시함.
src	URL	제출 버튼(submit button)으로 사용될 이미지의 URL을 명시함. (단, <input> 요소의 type 속성값이 “image”인 경우에만 사용할 수 있음)
step	숫자	<input> 요소에 입력할 수 있는 숫자들 사이의 간격을 명시함.
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	<input> 요소가 나타낼 타입을 명시함.
value	텍스트	<input> 요소의 초깃값(value)을 명시함.
width	픽셀	<input> 요소의 너비를 픽셀 단위(in pixels)로 명시함. (단, <input> 요소의 type 속성값이 “image”인 경우에만 사용할 수 있음)

DOM 인터페이스

interface HTMLInputElement : HTMLElement {

attribute DOMString accept;

attribute DOMString alt;

attribute DOMString autocomplete;

attribute boolean autofocus;

attribute boolean defaultChecked;

attribute boolean checked;

attribute DOMString dirName;

attribute boolean disabled;

readonly attribute HTMLFormElement? form;

readonly attribute FileList? files;

attribute DOMString formAction;

attribute DOMString formEnctype;

attribute DOMString formMethod;

attribute boolean formNoValidate;

attribute DOMString formTarget;

attribute unsigned long height;

attribute boolean indeterminate;

readonly attribute HTMLElement? list;

attribute DOMString max;

attribute long maxLength;

attribute DOMString min;

attribute long minLength;

attribute boolean multiple;

attribute DOMString name;

attribute DOMString pattern;

attribute DOMString placeholder;

attribute boolean readOnly;

attribute boolean _required;

attribute unsigned long size;

attribute DOMString src;

attribute DOMString step;

attribute DOMString type;

attribute DOMString defaultValue;

[TreatNullAs=EmptyString] attribute DOMString value;

attribute object? valueAsDate;

attribute unrestricted double valueAsNumber;

attribute unsigned long width;

void stepUp(optional long n = 1);

void stepDown(optional long n = 1);

readonly attribute boolean willValidate;

readonly attribute ValidityState validity;

readonly attribute DOMString validationMessage;

boolean checkValidity();

boolean reportValidity();

void setCustomValidity(DOMString error);

[SameObject] readonly attribute NodeList labels;

void select();

attribute unsigned long? selectionStart;

attribute unsigned long? selectionEnd;

attribute DOMString? selectionDirection;

void setRangeText(DOMString replacement);

void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");

void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);

};

연관 페이지

HTML Form 수업 ⇒

HTML Input 요소의 속성 수업 ⇒

HTML5 Input 요소 수업 ⇒

HTML5 Input 요소의 타입 수업 ⇒

HTML5 Input 요소의 속성 수업 ⇒

CSS Form 요소 수업 ⇒

연습문제