<input type="tel">

<input> 태그의 type="tel"은 한 줄 전화번호 입력 필드를 나타냅니다.
이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 전화번호를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다.

텍스트 입력처럼 보이지만,
동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 전화번호 입력이 가능한 가상 키보드를 표시합니다. 여기에는 숫자 0~9, # 문자 및 *문자와 같은 전화번호 입력에 도움이 되는 키패드를 지원합니다. 특히, 모바일 환경에서의 사용성을 높이고, 사용자에게 전화번호 입력 필드임을 명확하게 알려줌으로써 사용자 경험을 개선할 수 있습니다.

HTML 
<label for="user-tel">전화번호</label>
<input type="tel" id="tel">
브라우저에서 실제 표시된 모습

자동 유효성 검사 미지원

<input type="tel">은 <form> 태그 내에서 사용하더라도, 브라우저가 기본적으로 전화번호 형식에 대한 유효성 검사를 진행하지 않습니다. 이는 전화번호 형식이 국가마다 다양하기 때문에, 브라우저에서 입력 값을 특정 형식으로 자동 검사하지 않도록 설계되었기 때문입니다.

HTML 
<form>
    <label for="phone">전화번호:</label>
    <input
        type="tel"
        id="phone"
        placeholder="예: 010-1234-5678"
        required>
    <button type="submit">제출</button>
</form>

아래 예제에서 <input type="tel">은 기본적으로 전화번호 형식의 자동 검사를 하지 않으며, 사용자가 숫자 외의 값을 입력하더라도 브라우저는 이를 막지 않습니다.

브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

만약 특정 형식의 검증을 원한다면, pattern 속성을 추가해야 합니다.

패턴 검증 가능

<input type="tel"> 자체는 전화번호 형식을 검증하지 않지만, HTML5에서 pattern 속성을 추가하여 특정 형식의 전화번호를 요구할 수 있습니다. 예를 들어, 한국 전화번호 형식을 요구하는 경우에는 다음과 같이 패턴을 설정할 수 있습니다.

HTML 
<form>
    <label for="phone">전화번호:</label>
    <input
        type="tel"
        id="phone"
        pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}"
        placeholder="예: 010-1234-5678"
        required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

설명

pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}": 이 정규식 패턴은 한국 전화번호 형식을 제한합니다.

  • 앞자리 2~3자리(010, 02 등)
  • 중간 3~4자리(123, 1234 등)
  • 마지막 4자리(5678)

관련 속성 사용하기

<input type="tel">의 관련된 속성에 대해 알아보겠습니다.

placeholder 속성

placeholder 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

HTML 
<label for="phone">전화번호:</label>
<input type="tel" id="phone" placeholder="예: 010-1234-5678">
브라우저에서 실제 표시된 모습

required 속성

양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="phone">전화번호:</label>
    <input type="tel" id="phone" required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무것도 입력하지 않고 '제출'버튼을 클릭해보세요!

pattern 속성

입력 값을 검사할 때 사용되는 정규 표현식(regular expression)을 지정합니다.

HTML 
<input type="tel" pattern="정규 표현식(regular expression)을 지정">

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<input type="tel" placeholder="전화번호">
브라우저에서 실제 표시된 모습

브라우저 호환성

input type 속성의 tel 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="tel"> 3 12 1 4
placeholder 3 12 4 4
pattern 4 12 4 5
required 4 12 4 5

명세서

input type 속성의 tel 값에 대한 명세서 사양
명세서 사양
<input type="tel"> HTML Standard
#telephone-state-(type=tel)

참고문헌

같이 보기