input type attribute

 

tel

:

<input type="tel" requierd>

name :

disabled : 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.

form : [NEW]

autocomplete : [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.

autofocus : [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.

list : [NEW]

maxlength :

pattern : [NEW]

readonly :

required : [NEW] 필수입력필드 체크 속성- 서버로 폼을 전송하기 전에 필수 내용들이 모두 채워졌는지를 검사한다.

size :

placeholder : [NEW] 힌트 표시하기 속성 – 적당한 예시 내용을 표시하고 있다가 사용자가 입력을 하면 사라진다. 만약 autofocus 속성을 사용하였다면 placeholder 의 내용은 보여지지 않는다.

value : 기본값

 

*html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.

 

 

search

:사이트 검색이나 구글 검색같은 검색 필드에 사용되며, 일반 텍스트 필드처럼 동작한다. 필드에 글자를 입력하면 자동으로 “x” 버튼이 오른쪽에 나타난다.

 

현재 파이어폭스 4.0 이상, 오페라 11.0 이상, 크롬 10.0 이상 에서만 지원한다.

<input type="search" id="" name="">

 

사용 예)

<form action="" method="">
  SEARCH : <input type="search" name="user_search"
  autocomplete=on" />
  <input type="submit" value="확인" />
</form>

 

*현재 애플 공식사이트(http://www.apple.com) 메인 검색바에 html5의 search type이 적용되어 있어 텍스트를 입력하면 오른쪽에 “x”버튼이 자동으로 생성되는 것을 쉽게 확인해볼 수 있다.

 

 

url

:html4에서는 그저 텍스트 필드로 사용되던 것을 세분화한 것으로 url 주소를 입력하기 위해 사용되며, 값을 입력한 후 자동적으로 값이 유효한지 검사가 된다. 예를 들어 파이어폭스 브라우저에서는 유효하지 않은 메일주소를 적으면 빨간색 테두리가 생기며, 오페라 브라우저에서는 전송 버튼을 누르면 이메일 주소를 입력하라는 경고창이 나타난다.

 

파이어폭스 4.0 이상, 오페라 9.0 이상, 크롬 10.0 이상 에서만 현재 지원한다. email type 뿐만 아니라 속성도 지원되는 브라우저와 미지원되는 브라우저가 구분된다.

<input type="url" placeholder="http://example.com" requierd>

 

사용 예)

<form action="" method="">
  URL : <input type="url" name="user_url"
  placeholder="http://example.com" requierd="" />
  <input type="submit" value="확인" />
</form>

 

*기본적으로 type 속성만 있을때는 잘못된 형식의 url을 적었을 때만 경고창이 나타나지만, required 속성을 함께 적어주면 빈칸으로 폼 전송을 하면 필수입력 사항이라는 경고창도 함께 나타난다.

 

*iphone Safari 브라우저에서의 input type

iPhone의 Safari 브라우저는 html5의 input type url 을 스크린 키보드가 자동 인식하여, url 폼을 입력할 때 자동으로 키보드가 /, .com 같은 기호로 바뀌며 .com 버튼을 오래 누르고 있으면 .org, .co.kr 등의 버튼들이 나타나서 편리하게 사용할 수 있다.

 

 

email

:html4에서는 텍스트 필드로 사용되던 것을 세분화한 것으로 e-mail 주소를 입력하기 위해 사용되며, 값을 입력한 후 자동적으로 값이 유효한지 검사가 된다.

 

<input type="email" placeholder="ex@domain.com" requierd>

 

사용 예)

<form action="" method="">
  E-mail : <input type="email" name="user_email"
  placeholder="ex@domain.com" requierd="" />
  <input type="submit" value="확인" />
</form>

 

*iphone safari 브라우저에서의 input type

iPhone의 Safari 브라우저는 html5의 input type email 을 스크린 키보드가 자동 인식하여, email 폼을 입력할 때 자동으로 키보드가 @, .com 같은 기호로 바뀐다.

 

 

datetime

:시간(time), 날짜(date), 월(month), 년도(year)를 선택하기 위한 새로운 html5 input type 이다. 이 때 시간은 UTC(Universal Time Coordinated, 협정시계시, 국제적인 표준시)기준이다.

 

현재 오페라 9.0 이상(달력/시간 폼 지원), 크롬 10.0 이상(달력/시간 폼 미지원)에서만 지원한다.

<input type="datetime" name="user_datetime">

 

사용 예)

<form action="" method="">
   DATE and TIME : <input type="datetime" name="user_datetime" />
   <input type="submit" value="확인" />
</form>

 

*Chrome : 아직 달력과 시간 선택 폼을 지원하지 않아 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 날짜와 시간을 입력할 경우 협정 시계시 표준 규격에 맞게 yyyy-mm-ddT00:00Z 형식으로 적어야 한다.

*Opera : 현재 자동으로 달력 선택창과 시간 폼을 지원하는 유일한 브라우저이며, 폼을 클릭하고 날짜를 선택하면 된다. 그리고 시간 폼 뒤에 자동으로 UTC글자가 나타난다

 

 

date

:날짜(date), 월(month), 년도(year)를 선택하기 위한 새로운 html5 input type 이다.

 

현재(2013.03.04) 오페라 12.0 이상(달력 팝업창 지원), 크롬 25.0 이상(달력 팝업창 지원), 사파리 5.1.7 이상(달력 팝업창 미지원)에서 지원한다.

<input type="date" name="user_date">

 

사용 예)

<form action="" method="">
   DATE : <input type="date" name="user_date" />
   <input type="submit" value="확인" />
</form>

 

*Chrome : 달력 팝업 창을 지원하며, 직접 폼에 날짜를 입력할 경우 yyyy-mm-dd 형식으로 적어야 한다.

*Opera : 달력 팝업 창을 지원하며, input 폼을 클릭하면 자동으로 창이 뜬다.

*Safari : 달력 팝업 창은 아직 지원하지 않지만 date 폼에서 오늘 날짜가 자동 입력되며 화살표로 변경 가능하다.

 

 

month

:월(month)과 년도(year)를 선택하기 위한 새로운 html5 input type 이다.

 

현재 오페라 9.0 이상(달력 폼 지원), 크롬 10.0 이상(달력 폼 미지원)에서만 지원한다.

<input type="month" name="user_month">

 

사용 예)

<form action="" method="">
   MONTH : <input type="month" name="user_month" />
   <input type="submit" value="확인" />
</form>

 

 

week

:주(week)와 년도(year)를 선택하기 위한 새로운 html5 input type 이다.

 

현재 오페라 9.0 이상(달력 폼 지원), 크롬 10.0 이상(달력 폼 미지원)에서만 지원한다.

<input type="week" name="user_week">

 

사용 예)

<form action="" method="">
   WEEK : <input type="week" name="user_week" />
   <input type="submit" value="확인" />
</form>

 

*Chrome : 아직 달력선택 폼을 지원하지 않아 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 날짜를 입력할 경우 yyyy-W00 형식으로 적어야 한다.

*Opera : 현재 자동으로 달력 창을 지원하는 유일한 브라우저이며, input 폼을 클릭하면 자동으로 달력이 떠서 “주”를 선택하면 된다. week type 달력은 해당 년도에서 각 주가 몇 째주에 해당하는지 숫자로 표시되어서 나타난다.

 

 

time

:시간(hour)과 분(minute)을 선택하기 위한 새로운 html5 input type 이다

 

현재 오페라 9.0 이상(달력 폼 지원), 크롬 10.0 이상(달력 폼 미지원)에서만 지원한다.

<input type="time" name="user_time">

 

사용 예)

<form action="" method="">
   TIME : <input type="time" name="user_time" />
   <input type="submit" value="확인" />
</form>

 

*Chrome : 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 시간을 입력할 경우 hh:mm 형식으로 적어야 한다.

*Opera : 시간 폼에서 시간과 분 사이에 구분점을 기본으로 표시해준다. 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 시간을 입력할 경우 hh:mm 형식으로 적어야 한다.

 

 

datetime-local

:시간(time), 날짜(date), 월(month), 년도(year)를 선택하기 위한 새로운 html5 input type 이다. 이 때 시간은 현지(local) 시간 기준이다.

 

현재 오페라 9.0 이상(달력/시간 폼 지원), 크롬 10.0 이상(달력/시간 폼 미지원)에서만 지원한다.

<input type="datetime-local" name="user_datetime-local">

 

사용 예)

<form action="" method="">
   DATE and TIME : <input type="datetime-local"
   name="user_datetime-local" />
   <input type="submit" value="확인" />
</form>

 

*Chrome : 아직 달력과 시간 선택 폼을 지원하지 않아 바로 input 창에 텍스트를 입력할 수 있으며, 잘못된 형식을 적을 경우 유효하지 않음을 알려준다. 직접 폼에 날짜와 시간을 입력할 경우 현지 시간 표준 규격에 맞게 yyyy-mm-ddT00:00 형식으로 적어야 한다.

*Opera : 현재 자동으로 달력 선택창과 시간 폼을 지원하는 유일한 브라우저이며, 폼을 클릭하고 날짜를 선택하면 된다.

 

 

number

:숫자 형식을 입력하기 위해 사용되며, 아래 속성들을 이용하여 폼에 사용가능한 숫자의 범위를 제한할 수 있다. 숫자 필드는 직접 값을 입력해도 되며, 스핀박스(위 아래 화살표 버튼)를 눌러 숫자를 선택할 수도 있다. 숫자 필드에서 주어진 속성에 따른 숫자 허용 범위를 넘어서서 입력할 경우 잘못된 값이라고 경고창이 자동으로 띄워진다.

 

현재 오페라 9.0 이상, 크롬 7.0 이상 에서만 지원한다.

<input type="number" min="1" max="10">

 

사용 예)

<form action="" method="">
  Number : <input type="number" name="user_number" min="-10" max="10"
  step="2" value="0">
  <input type="submit" value="확인" />
</form>

 

*기본적으로 type 속성만 있을때는 잘못된 형식의 숫자를 적었을 때만 경고창이 나타나지만, required 속성을 함께 적어주면 빈칸으로 폼 전송을 하면 필수입력 사항이라는 경고창도 함께 나타난다.

*오페라 브라우저에서는 숫자가 오른쪽 정렬이며 스핀박스가 폼 바깥에 위치하지만, 크롬 브라우저에서는 숫자가 왼쪽정렬이며 스핀박스가 폼 안에 위치한다.

 

*iphone Safari 브라우저에서의 input type

iPhone의 Safari 브라우저는 html5의 input type number 을 스크린 키보드가 자동 인식하여, 숫자를 입력할 때 자동으로 키보드가 숫자로 바뀐다.

 

 

range

:number type과 같은 기능이며, 직접 숫자를 입력하는 대신 슬라이드 막대로 숫자를 조절하는 것이다. range type을 사용하면 브라우저에 조절 가능한 슬라이드 막대가 바로 나타난다.

 

현재 오페라 9.0 이상, 크롬 10.0 이상에서만 지원한다.

<input type="range" name="user_range" min="" max="">

 

사용 예)

<form action="" method="">
   RANGE: <input type="range" name="user_range" id="user_range"
   max="10" min="1" value="1" step="2"/>
   <input type="submit" value="확인" />
</form>

 

 

color

:색상선택을 포함해야 하는 input type을 사용할 때 유용하게 쓸 수 있으며, 색상 선택기(color picker)에서 색상을 선택할 수 있다. 사용자가 색상을 선택하면 #00aaff 같은 색상의 16진수 값을 반환한다.

 

오페라 11.0 이상에서만 지원한다.

<input type="color" name="user_color">

 

사용 예)

<form action="" method="">
   COLOR: <input type="color" name="user_color" />
   <input type="submit" value="확인" />
</form>

 

 

출처 : http://htmlcss.kr/html5/input-type-attribute/