HTML <input> 태그

정의 및 특징

・<input> 태그는

　사용자로부터 입력을 받을 수 있는

　입력 필드(input filed)를 정의할 때 사용한다

 

・<input> 요소는 사용자가 데이터를

　입력할 수 있는 입력 필드를 선언하기 위해

　<form> 요소 내부에서 사용된다

　이러한 입력 필드는 <input> 요소의

　type 속성값을 달리함으로써

　여러 가지 모양으로 나타낼 수 있다

 

・<input> 요소는 빈 태그(empty tag)이며

　속성만을 포함한다

　<label> 요소를 사용하면

　<input> 요소의 라벨(label)을 정의할 수도 있다

 

・HTML과 XHTML에서의 차이점

　HTML에서는 <input> 태그를 닫지 않지만

　XHTML에서는 다음과 같이 반드시 태그를 닫아야만 한다

<input />

 

 

지원하는 브라우저

지원함	지원함	지원함	1.0	1.0	지원함

 

속성

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

 

예제

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

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기