코딩의 시작, TCP School

◀ 이전 다음 ▶

<input> 태그의 type 속성

HTML <input> 태그 ⇒

정의 및 특징

<input> 태그의 type 속성은 <input> 요소가 나타낼 타입을 명시합니다.

type 속성의 기본값은 “text”이며, <input> 요소의 필수 속성은 아니지만 항상 명시하는 것이 좋습니다.

문법

속성값

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

속성값		설명
button		클릭할 수 있는 버튼을 정의함.
checkbox		체크박스(checkbox)를 정의함.
color		색을 선택할 수 있는 입력 필드(color picker)를 정의함.
date		날짜를 선택할 수 있는 입력 필드를 정의함. (year, month, day)
datetime-local		날짜와 시간을 선택할 수 있는 입력 필드를 정의함. (year, month, day, hour, minute)
email		이메일 주소를 입력할 수 있는 입력 필드를 정의함.
file		업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의함.
hidden		사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함.
image		제출 버튼(submit button)으로 사용될 이미지를 정의함.
month		날짜를 선택할 수 있는 입력 필드를 정의함. (year, month)
number		숫자를 입력할 수 있는 입력 필드를 정의함.
password		비밀번호를 입력할 수 있는 입력 필드를 정의함.
radio		라디오 버튼(radio button)을 정의함.
range		슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의함.
reset		리셋 버튼(reset button)을 정의함.
search		검색어를 입력할 수 있는 텍스트 필드를 정의함.
submit		제출 버튼(submit button)을 정의함.
tel		전화번호를 입력할 수 있는 입력 필드를 정의함.
text		type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의함.
time		시간을 선택할 수 있는 입력 필드를 정의함. (hour, minute)
url		URL 주소를 입력할 수 있는 입력 필드를 정의함.
week		날짜를 선택할 수 있는 입력 필드를 정의함. (year, week)

예제

<form action="/examples/media/action_target.php" method="get">
    이름 : <input type="text" name="st_name"><br>
    이메일 : <input type="email" name="st_email"><br>
    학년 : <input type="range" name="grade" min="1" max="4"><br>
    <input type="submit">
</form>

코딩연습 ▶

지원하는 브라우저 및 버전

속성명
button	1.0	지원함	지원함	1.0	1.0	지원함
checkbox	지원함	지원함	지원함	지원함	지원함	지원함
color	20.0	14.0	지원하지 않음	29.0	10.0	12.0
date	20.0	12.0	지원하지 않음	57.0	지원하지 않음	11.0
datetime-local	20.0	12.0	지원하지 않음	지원하지 않음	지원하지 않음	11.0
email	5.0	지원함	10.0	지원함	지원함	11.0
file	1.0	지원함	지원함	1.0	1.0	11.0
hidden	1.0	지원함	지원함	1.0	1.0	2.0
image	지원함	지원함	지원함	지원함	지원함	지원함
month	20.0	12.0	지원하지 않음	지원하지 않음	지원하지 않음	11.0
number	지원함	지원함	10.0	지원함	지원함	지원함
password	1.0	지원함	2.0	1.0	1.0	2.0
radio	지원함	지원함	지원함	지원함	지원함	지원함
range	4.0	12.0	10.0	23.0	3.1	11.0
reset	1.0	지원함	지원함	1.0	1.0	지원함
search	5.0	12.0	10.0	4.0	5.0	10.6
submit	1.0	지원함	지원함	1.0	1.0	지원함
tel	지원함	지원함	10.0	지원함	지원함	11.0
text	1.0	지원함	지원함	1.0	1.0	지원함
time	20.0	12.0	지원하지 않음	57.0	지원하지 않음	10.0
url	1.0	지원함	10.0	지원함	지원함	11.0
week	20.0	12.0	지원하지 않음	지원하지 않음	지원하지 않음	11.0