[form] HTML - <input type="tel"> 태그 - 전화번호 입력 (= 인풋텔타입/텔타입인풋/텔인풋 요소)

1. <input type="tel"> 예제 - 전화번호 입력
2. <input type="tel"> 정의
3. <input type="tel"> 구문

<input type="tel"> 예제 - 전화번호 입력

 

<form action="/action_page.php">

  <label for="phone">전화번호:</label><br><br>

  <input type="tel" id="phone" name="phone" placeholder="예: 010-123-4567" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" required><br><br>

  <small>하이픈(-) 넣어 입력하세요.</small><br><br>

  <input type="submit">

</form>

 

결과값예: 010-123-1234

<input type="tel"> 정의

 

전화번호 입력 가능한 INPUT 요소.

 

---

 

1. 

• 입력 가능한 패턴 지정은 pattern 속성 이용해 정규표현식 이용.
• 브라우저가 type="tel" 지원 않을 시, type="text"로 자동전환.
• <label> 태그 이용 시, 웹접근성 향상됨.

 

2. cf. 전화링크 경우, 아래 2가지 모두 가능하나, 하이픈 있는 게 더 좋음.

• <a href="tel:010-123-4567">010-123-4567</a>
• <a href="tel:0212345678">010-12-4567</a>

 

3.

IE10 이상 주요 최신브라우저 모두 지원.

 

4. MDN <input type="tel"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

 

<input type="tel"> 구문

 

<input type="tel">