HTML <input type=”tel”> – 올바른 이해와 사용 방법

정의 및 사용 방법

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

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

기본 예제

자동 유효성 검사 미지원

<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"> 자체는 전화번호 형식을 검증하지 않지만, 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 속성은 값이 설정되지 않은 경우 텍스트 입력 컨트롤에 표시되는 텍스트를 지정합니다. 이것을 '플레이스홀더 텍스트'라고 합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

플레이스홀더 텍스트의 스타일은 CSS placeholder 텍스트에 스타일 적용하기를 참조하세요.

`required` 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 값을 입력해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`pattern` 속성

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

`value` 속성

value 속성은 초깃값을 설정합니다.
이 값은 페이지 로드 시 요소에 표시될 전화번호를 지정합니다.

`disabled` 속성

해당 요소를 비활성시키려면 disabled 속성을 사용하세요. 비활성화된 요소는 입력이나 값을 바꾸려 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다. 또한 폼 제출 시 값이 전송되지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

`readonly` 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다. 폼 제출 시 해당 값이 전송됩니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

`maxlength` 속성

maxlength 속성은 사용자가 입력할 수 있는 최대 문자 수(Maximum length)를 제한합니다. 해당 요소에 maxlength 속성이 지정되면, 사용자가 허용된 문자 수를 초과하여 입력하는 것을 방지할 수 있습니다.

속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
잘못된 값이 지정되면, 최대 문자 수 제한이 적용되지 않습니다.
최대 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 minlength 속성이 설정되어 있다면, maxlength 속성 값은 반드시 그 값보다 크거나 같아야 합니다.

`minlength` 속성

minlength 속성은 사용자가 입력해야 하는 최소 문자 수(Minimum length)를 지정합니다. 해당 요소에 minlength 속성이 지정되면, 사용자는 지정된 최소 문자 수 이상을 입력해야 합니다.

참고하세요!
minlength 속성은 최소로 입력해야 하는 값만을 체크합니다. 만약, 사용자가 해당 요소에 아무것도 입력하지 않으면 빈 값은 허용됩니다. 빈 값도 허용하지 않으려면 required 속성을 함께 사용하세요.

부연설명
required 속성은 해당 입력 필드를 필수로 조건에 맞게 입력해야만 양식이 제출되게 합니다.

속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
잘못된 값이 지정되면, 입력해야 하는 최소 문자 수 지정이 적용되지 않습니다.
최소 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

알아두세요!
해당 요소에 유효한 maxlength 속성이 설정되어 있다면, minlength 속성 값은 반드시 그 값보다 작거나 같아야 합니다.

HTML

<form>
    <label for="tel">전화번호</label>
    
    <!-- minlength="2"으로 최소 2자 입력 요구 -->
    <input type="tel" id="tel" minlength="2" placeholder="최소 2자 이상 입력..." required>
    <button type="submit">제출</button>
</form>

실제 적용된 모습 실습 가이드: minlength 작동 확인

오류 확인: 입력 필드에 입력이 없거나 1글자만 입력한 후, [제출] 버튼을 클릭해 보세요. 브라우저가 최소 입력 조건(2글자) 미달 오류 메시지를 표시하는 것을 확인합니다.
성공 확인: 필드에 2글자 이상 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

`name` 속성

name 속성은 해당 요소의 이름을 나타냅니다.
name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

`size` 속성

size 속성은 해당 요소의 문자 수를 기준으로 하는 너비를 지정합니다.

size 속성으로 지정하는 값은 입력 필드의 문자 수를 기준으로 하는 시각적 너비를 지정합니다. 따라서, 설정된 글자 크기(font-size)에 따라 실제로 표시되는 너비가 달라질 수 있습니다.

size 속성의 값은 0보다 큰 정수로 지정합니다.
만약 size 속성이 지정되지 않거나 유효하지 않은 값이 설정된 경우, 대부분의 브라우저에서는 기본값으로 20을 사용합니다.

size 속성은 입력 필드의 시각적 너비만을 설정하며, 폼 제출 시 입력하는 글자 수 제한에 대한 유효성 검사에는 영향을 미치지 않습니다.

HTML

<p>
    <label>
        size 속성 없음
        <input type="tel">
    </label>
</p>
<p>
    <label>
        짧은 입력
        <input type="tel" size="5">
    </label>
</p>
<p>
    <label>
        긴 입력
        <input type="tel" size="50">
    </label>
</p>

만약, size 속성이 지정된 요소에 CSS로 너비를 지정한다면 CSS가 우선적으로 적용됩니다.

접근성 고려 사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.

컨트롤의 레이블(이름표)은 <label> 요소를 사용해야 합니다.
<label>의 텍스트는 시각적으로나 프그램적으로 해당 컨트롤과 연결됩니다. 시각장애인을 위한 스크린 리더는 기본적으로 placeholder 속성의 텍스트를 읽지 않지만, <label>의 텍스트는 읽어줍니다.

또한, <label> 요소는 포인팅 장치 사용자의 사용자 경험을 개선합니다. 사용자가 <label>을 클릭, 터치 또는 탭하면 포커스가 레이블의 연결된 해당 컨트롤로 이동합니다.

자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

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

명세서

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

참고문헌

MDN - <input type="tel">

정의 및 사용 방법

기본 예제

자동 유효성 검사 미지원

패턴 검증 가능

설명

관련 속성 사용하기

placeholder 속성

required 속성

pattern 속성

value 속성

disabled 속성

readonly 속성

maxlength 속성

minlength 속성

name 속성

size 속성

접근성 고려 사항

브라우저 호환성

명세서

참고문헌

같이 보기

`placeholder` 속성

`required` 속성

`pattern` 속성

`value` 속성

`disabled` 속성

`readonly` 속성

`maxlength` 속성

`minlength` 속성

`name` 속성

`size` 속성