HTML5 input 엘리먼트와 새로운 type

HTML5 input 엘리먼트와 새로운 type

html5에서 많은 타입이생겼다 기존에 있던것은 생략하고 새로생긴것을 살펴보자. 명확성이 강조 되었다고 보면 된다.오페라 프라우저에서 대부분 지원한다.

결과를 당장보려면 여기로 http://sianasiatiger.cafe24.com/study/5_html_input.html

<p><label>찾아보기:<input type="search"  /></label></p>
<p><label>천화번호:<input type="tel"  placeholder="02)123-4567" /></label></p>
<p><label>주소:<input type="url" /></label></p>
<p><label>이메일:<input type="email" multiple /></label></p>

위의것은 간단한예 대부분우리가 기존에 입력하던 텍스트 타입이 명확하게 분류되었다.search는 찾아볼떄 tel은 전화번호 입력으로 특정한 입력 방식은 없지만  placeholder로  입력값 힌트를 준다. 위의 예는 xx)xxx-xxxx방식으로 입력하라고 예를들어주고있다.url은 경로주소 입력 email은 이메일로 multiple입력으로 콤마로 여러개 입력가능하게 해준다.

년,월,날짜,시간

date의 경우 달력이 나온다! 오페라에서 확인가능. step속성은 달력중 날짜인데.. 4를 입력시 4의배수만 지정할수있다. 출력에서 선택될 수도 있고, 2010-07-15 이형태로 입력도 가능하다. month역시 마찬가지 단지 날짜를 정하지 않는다. time의 경우는 12:34:56:123 형식이다.시분초 1/1000 여기서step속성은 초를이야기한다.

<p><label>년월날짜:<input type="date" step="4" /></label></p>
<p><label>년월:<input type="month" step="2" /></label></p>

step속성의 차이

시간에서 디폴트값은 60이다. 아래 예와같이 step값에따라 소수점자리 까지 입력가능하다.

<p><label>시간:<input type="time"  step="60" /></label></p>
<p><label>시분초:<input type="time"  step="1" /></label></p>
<p><label>시분초.소수:<input type="time"  step="0.1" /></label></p>

위의 그림은 오페라에서의 실행 결과 이다

그외

<p><label>UTC일자:<input type="datetime"  /></label></p>
<p><label>지역별:<input type="datetime-local"  /></label></p>
<p><label>주:<input type="week" step="1" /></label></p>

<p><label>숫자:<input type="number"step="1"  /></label></p>
<p><label>범위임력 스크롤:<input type="range"  />크롬사파리오페라</label><

<p><label>색깔:<input type="color"  /></label></p> 

<p><label>파일:<input type="file" /> 파폭크롬오페라</label></p>

datetime : UTC 방법으로 일자를 표시한다. week : 한주를 입력할떄

range : 스크롤로 범위를보여준다.

file:입력할파일을 열게한다.