20. HTML5 에서 추가된 폼 양식

Index

18. 터치 이벤트

19. jQuery Mobile 폼 양식

20. HTML5 에서 추가된 폼 양식

21. range 양식, slider

22. select 양식

 

 

HTML5에서는 number, email, url, tel 같은 새로운 입력 양식이 추가되었다. jQuery Mobile에서도 새로 추가된 양식을 사용할 수 있다.

 

 

number 양식

 

<div data-role="fieldcontain">

    <label for="age">Number :</label>

    <input id="age" type="number" name="age" min="1" max="100" value="30" />

</div>

 

number 양식은 숫자를 입력받는 경우 사용한다. min 속성은 입력받을 수 있는 최소값, max 속성은 입력받을 수 있는 최대값이다.

모바일 장치에서 number 양식이 선택되면 숫자를 입력할 수 있는 숫자 키보드가 나타난다.

 

 

email 양식

 

<div data-role="fieldcontain">

    <label for="email">Email :</label>

    <input id="email" type="email" name="email" value="" />

</div>

 

모바일 장치에서 email 양식이 선택되면 이메일 주소를 입력할 수 있는 영문 키보드가 나타난다.

 

 

url 양식

 

<div data-role="fieldcontain">

    <label for="url">Url :</label>

    <input id="url" type="url" name="url" value="" />

</div>

 

모바일 장치에서 url 양식이 선택되면 url을 입력할 수 있는 영문 키보드가 나타난다.

 

 

tel

 

<div data-role="fieldcontain">

    <label for="tel">Tel :</label>

    <input id="tel" type="tel" name="tel" value="" />

</div>

 

모바일 장치에서 tel 양식이 선택되면 전화번호를 입력할 수 있는 숫자 키보드가 나타난다.