HTML5의 URL 입력 유형이란?
HTML5에서 url 입력 유형은 오직 URL 값만 허용하는 전용 입력 필드입니다. 웹사이트 주소를 입력받아야 하는 폼 필드에 사용되며, 사용자가 단순 텍스트를 입력하려 하면 브라우저가 자동으로 유효성을 검사하여 https://www.qries.com 또는 https://qries.com 형태의 올바른 URL 주소만 제출할 수 있도록 강제합니다.
주요 특징
- URL 형식이 아닌 값을 입력하면 폼 제출 시 자동으로 유효성 검사 오류가 발생합니다.
- 모바일 기기에서는 URL 입력에 최적화된 가상 키보드가 표시되어 입력 편의성이 향상됩니다.
- 별도의 JavaScript 코드 없이도 기본적인 입력 검증이 가능합니다.
기본 사용 예제
다음은 url 입력 유형을 활용한 간단한 HTML5 폼 예제입니다.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter URL : <input type = "url" name = "newinput" />
<input type = "submit" value = "submit" />
</form>
</body>
</html>활용 시 참고 사항
url 입력 유형의 유효성 검사는 브라우저마다 동작 방식이 조금씩 다를 수 있습니다. 또한 클라이언트 측 검증은 어디까지나 사용자 편의를 위한 기능이므로, 보안과 데이터 무결성을 위해서는 서버 측에서도 반드시 URL 유효성을 한 번 더 확인하는 것이 좋습니다.