속성값

속성값 설명
tel 전화번호 입력란 작성
email 메일주소 입력란 작성
url URL 입력란 작성

상세내용

type속성에 따라 전화번호/메일 주소/URL 입력란을 출력할수 있습니다. 각각 환경에 의존합니다만, 입력란에 따라서 검증기능도 실현할수 있습니다.

  • 메일 주소 입력란 에서는 바른 메일주소를 입력하였는지를 체크합니다.(Opera 만)
  • URL입력란 에서는 바른 URL인지를 체크합니다.(Firefox/Chrome/Opera만)

가각 입력란의 디자인은 type속성의 값이 text 일떄와는 다릅니다.

iPhone/iPad에서는 type속성이 tel/email/url의 경우에는 입력시에 각각 값의 입력치에 적합한 키보드를 규정하여 표시합니다.

서식

<input type="tel">
<input type="email">
<input type="url">

서포트 브라우저

속성명
tel X X X O X
email 5.0 10.0 4.0 5.0 10.1
url O 10.0 O O 10.1

샘플

소스코드

<form id="myform" name="myform" 
style="background-color: #f1f1f1; border: 1px solid #d4d4d4;" action="">
<p>전화번호 : <input type="tel" name="tel"></p>
<p>메일주소 : <input type="mail" name="mail"></p>
<p>url : <input type="url" name="url"></p>
<p><input type="submit" value="송신"></p>
</form>

실행결과

전화번호 :

메일주소 :

url :

HTML5개발-레퍼런스

프로그래밍 메인