..

Search

type

type

<input> 태그의 type 속성


HTML <input> 태그 ⇒


정의 및 특징

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

 

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


문법

<input type="속성값">


속성값

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

속성값   설명

button

 

클릭할 수 있는 버튼을 정의함.

checkbox

 

체크박스(checkbox)를 정의함.

color

html5

색을 선택할 수 있는 입력 필드(color picker)를 정의함.

date

html5

날짜를 선택할 수 있는 입력 필드를 정의함. (year, month, day)

datetime-local

html5

날짜와 시간을 선택할 수 있는 입력 필드를 정의함. (year, month, day, hour, minute)

email

html5

이메일 주소를 입력할 수 있는 입력 필드를 정의함.

file

 

업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의함.

hidden

 

사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함.

image

 

제출 버튼(submit button)으로 사용될 이미지를 정의함.

month

html5

날짜를 선택할 수 있는 입력 필드를 정의함. (year, month)

number

html5

숫자를 입력할 수 있는 입력 필드를 정의함.

password

 

비밀번호를 입력할 수 있는 입력 필드를 정의함.

radio

 

라디오 버튼(radio button)을 정의함.

range

html5

슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의함.

reset

 

리셋 버튼(reset button)을 정의함.

search

html5

검색어를 입력할 수 있는 텍스트 필드를 정의함.

submit

 

제출 버튼(submit button)을 정의함.

tel

html5

전화번호를 입력할 수 있는 입력 필드를 정의함.

text

 

type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의함.

time

html5

시간을 선택할 수 있는 입력 필드를 정의함. (hour, minute)

url

html5

URL 주소를 입력할 수 있는 입력 필드를 정의함.

week

html5

날짜를 선택할 수 있는 입력 필드를 정의함. (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>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

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

HTML5에서 변경된 사항

HTML5에서는 <input> 요소에 다음과 같은 type 속성값들이 새롭게 추가되었습니다.

- color, date, datetime-local, email, month, number, range, search, tel, time, url, week


연습문제