[html5] input 객체의 type별 형태 (tel 모바일 숫자 Kepad로 변경)

html5의 input의 타입별로 유용하게 쓰일 때가 많습니다.

type="tel"과 같은 경우, 휴대폰에서 숫자 기보드만 입력이 가능하게 변경이 되어서 너무 유용하게 쓰이죠.

type="tel"의 번호 키보드형태

 

 

HTML5의 type내용들

<p>type="button" value="button" <input type="button" value="button"></p>
<p>type="checkbox" <input type="checkbox"></p>
<p>type="color" <input type="color"></p>
<p>type="date" <input type="date"></p>
<p>type="datetime-local" <input type="datetime-local"></p>
<p>type="email" <input type="email"></p>
<p>type="file" <input type="file"></p>
<p>type="hidden" <input type="hidden"></p>
<p>type="image" <input type="image"></p>
<p>type="month" <input type="month"></p>
<p>type="number" <input type="number"></p>
<p>type="password" <input type="password"></p>
<p>type="radio" <input type="radio"></p>
<p>type="range" <input type="range"></p>
<p>type="reset" <input type="reset"></p>
<p>type="search" <input type="search"></p>
<p>type="submit" <input type="submit"></p>
<p>type="tel" <input type="tel"></p>
<p>type="text" <input type="text"></p>
<p>type="time" <input type="time"></p>
<p>type="url" <input type="url"></p>
<p>type="week" <input type="week"></p>

브라우저별로 약간 차이가 있습니다만,

자주 사용되는 email, date, tel과 같은 경우 요즘 나오는 모든 브라우저에 지원됩니다.

잘 사용하면 유용하게 사용이 가능합니다.

 

저의 경우, type="tel"의 경우 너무 좋은 유용해서 자주 사용합니다.

html5의  input type별 모양