HTML에서는 <input type="tel">을 사용하여 전화번호 입력 필드를 만들 수 있습니다. 이 입력 유형을 활용하면 회원가입 폼이나 문의 양식 등에서 사용자가 전화번호를 손쉽게 입력할 수 있습니다.
참고 − tel 입력 유형에 대한 브라우저 지원 범위는 브라우저마다 다를 수 있습니다. 특히 구형 브라우저에서는 일부 기능이 제한될 수 있으므로, 실제 서비스에 적용하기 전 주요 브라우저에서 충분히 테스트해 보는 것이 좋습니다.
tel 입력 유형의 장점
모바일 기기에서 tel 입력 필드를 선택하면 일반 키보드 대신 숫자 키패드가 자동으로 나타나 입력 편의성이 크게 향상됩니다. 또한 tel 유형은 입력값의 형식을 자체적으로 검증하지 않기 때문에, pattern 속성과 함께 사용하면 하이픈 포함 여부 등 원하는 전화번호 형식을 지정할 수 있다는 점도 기억해 두세요.
예제
아래 코드를 실행하면 tel 입력 유형을 사용해 사용자가 전화번호 형식으로 값을 입력하도록 만드는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML input tel</title>
</head>
<body>
<form action = "" method = "get">
학생 정보:<br><br>
학생 이름<br><input type = "name" name = "sname"><br>
학생 전화번호<br> <input type = "tel" name = "telephone"><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>