Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 URL 입력 타입(input type="url") 사용하는 방법

URL 입력 타입이란?

HTML에서는 <input type="url">을 사용하여 URL 입력 필드를 만들 수 있습니다. 이 입력 타입을 활용하면 사용자가 웹사이트 주소를 손쉽게 입력할 수 있도록 폼을 구성할 수 있으며, 모바일 환경에서는 전용 키보드가 자동으로 표시되어 입력 편의성도 높아집니다.

브라우저 자동 유효성 검사

일부 브라우저에서는 입력된 URL의 유효성을 자동으로 검사합니다. 예를 들어, URL을 입력할 때 ".com"과 같은 도메인 확장자를 누락하면 폼이 제출되지 않고 "올바른 URL을 입력해 주세요"와 같은 오류 메시지가 표시됩니다.

이러한 기본 유효성 검사 덕분에 별도의 JavaScript 코드를 작성하지 않아도 잘못된 형식의 URL 입력을 사전에 차단할 수 있다는 장점이 있습니다.

예제

다음 코드를 실행하면 HTML에서 URL 입력 타입을 사용하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input URL</title>
    </head>

    <body>
        <form action = "" method = "get">
            Details:<br><br>
            Student Name<br><input type="name" name="sname"><br>
            Student Website<br> <input type="url" name="website"><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

코드 설명

  • <form>: GET 방식으로 데이터를 전송하는 폼을 정의합니다.
  • type="name": 학생 이름을 입력받는 텍스트 필드입니다.
  • type="url": 학생 웹사이트 주소를 입력받는 URL 전용 필드로, 형식이 올바르지 않으면 제출이 차단됩니다.
  • type="submit": 폼을 제출하는 버튼입니다.

활용 팁

placeholder, required 같은 속성을 함께 사용하면 더욱 직관적인 URL 입력 필드를 만들 수 있습니다. 예를 들어 <input type="url" name="website" placeholder="https://example.com" required>처럼 작성하면 입력 형식 안내와 필수 입력 설정을 동시에 처리할 수 있습니다.