정의 및 사용 방법

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

텍스트 입력처럼 보이지만,
동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 / 및 . 문자와 같은 URL 입력을 보조하기 위한 키 및 www. 또는 .com과 같은 도메인 이름에서 일반적으로 발견되는 문자열의 빠른 입력을 위한 키와 같은 URL 입력에 도움이 되는 키패드를 지원합니다.

기본 예제

HTML 
<label for="user-url">홈페이지 주소</label>
<input type="url" id="user-url">
브라우저에서 실제 표시된 모습

기본 유효성 검사

<input type="url">은 <form> 태그 내에서 사용하면 기본적으로 브라우저에서 유효성 검사가 진행됩니다.
이는 HTML5의 기본 기능으로, 사용자가 올바른 형식의 URL을 입력했는지 자동으로 확인해 줍니다.

HTML 
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

HTML5의 <input type="url"> 속성은 URL의 유효성을 검사하는데 기본적인 형식을 확인하지만, 매우 정밀하거나 모든 가능한 URL 형식을 완벽하게 검사하지는 않습니다. 브라우저에 따라 차이가 있기는 하지만 기본적인 유효성 검사에서는 http://이나 https:// 등의 프로콜을 포함하는지 확인합니다. 하지만, 입력 필드에 값을 입력하지 않거나 홈페이지 주소 형식에서 도메인을 포함하지 않아도 유효성 검사를 통과할 수도 있습니다.

유효성 검사를 더 엄격히 하려면 <input type="url">에 URL 형식 검사를 정밀하게 설정하는 pattern 속성(주의: 이 속성의 값으로는 URL 형식에서 도메인을 포함하는지 여부에 대한 유효성 검사를 완벽히 처리하는데에는 한계가 있습니다.)과, 값을 필수로 입력하게 설정하는 required 속성을 추가하는 것입니다.

다음의 예제에서는 pattern 속성의 값으로 http://이나 https:// 등의 프로콜을 포함하는지 여부를 명시적으로 지정하고, 값을 필수로 입력하게 설정하는 required 속성을 추가한 것을 보여줍니다.

일러두기
아래에서 다루는 URL 형식 검사는 단순 샘플 예제입니다. 정확성과 확장성 면에서 제한이 있을 수 있으므로, 정확성이나 확장성을 보장하거나 보증할 수 없습니다. 따라서, 예제를 신뢰하기 전에 스스로의 판단에 따라 오류, 버그, 취약점이 없는지 신중하게 테스트하고 검토해야 합니다.

HTML 
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" required pattern="https?://.+">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

이렇게 하면 URL 입력 필드에 대해 좀 더 정밀한 유효성 검사를 수행할 수 있습니다.

기본 유효성 검사 내장 기능 제거하기

HTML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <form> 태그 내에 novalidate 속성을 추가하는 것입니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form novalidate>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url">
    <button type="submit">제출</button>
</form>

이렇게 하면 기본으로 내장되어 있는 유효성 검사 기능을 제거할 수 있습니다.

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

관련 속성 사용하기

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

placeholder 속성

placeholder 속성은 값이 설정되지 않은 경우 텍스트 입력 컨트롤에 표시되는 텍스트를 지정합니다. 이것을 '플레이스홀더 텍스트'라고 합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

HTML 
<label for="user-url">홈페이지 주소</label>
<input type="url" id="user-url" placeholder="https://example.com">
브라우저에서 실제 표시된 모습 유효성 검사가 진행되는지 실제로 테스트 해보세요!

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

컨트롤의 텍스트 값을 검사할 때 제약 조건 유효성 검사를 통과하기 위해 입력 값이 일치해야 하는 정규 표현식(regular expression)을 지정합니다.

URL 형식은 일정한 형식이 존재합니다. 예를 들어 https://example.com/app1/index.html와 같은 형식을 말합니다.

  • https://을 '프로토콜'(또는 '스키마', 또는 '스킴')이라고 합니다.
  • example.com을 '호스트'(또는 '도메인')이라고 합니다.
  • /app1/index.html을 '파일 경로'라고 합니다.

이러한 형식을 정규 표현식(regular expression)으로 지정할 수 있습니다. 정규 표현식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.

하지만, URL 형식에서 도메인의 실제 존재 여부를 확인하는 것은 정규 표현식만으로는 불가능합니다.

HTML5의 pattern 속성은 정규 표현식을 사용하여 입력값의 형식을 검사하도록 설계되었습니다. 그러나 도메인의 존재 여부는 단순히 형식 검사로 판단하기 어려운 논리적 조건에 속합니다.

이는 자바스크립트 또는 서버 측 스크립트를 사용하여 수행할 수 있습니다.

HTML5의 pattern 속성으로는 다음의 예제와 같은 입력값의 형식을 정규 표현식을 통해 검사할 수 있습니다.

HTTP 또는 HTTPS로 시작하는 URL 검사

http:// 또는 https://로 시작하는 URL 형식을 확인합니다.

HTML 
<input type="url" pattern="https?://.*" placeholder="https://example.com">
특정 도메인 검사 (예: example.com)

http:// 또는 https://로 시작하고, example.com 도메인을 포함한 URL 형식을 확인합니다.

HTML 
<input type="url" pattern="https?://(www\.)?example\.com/.*" placeholder="https://example.com">
최상위 도메인 검사 (예: .com, .net)

http:// 또는 https://로 시작하고, .com 또는 .net으로 끝나는 URL 형식을 확인합니다.

HTML 
<input type="url" pattern="https?://.*\.(com|net)" placeholder="https://example.com">

이렇게 pattern 속성으로 지정한 정규 표현식(regular expression) 패턴과 일치하면 유효성 검사를 통과하고, 그렇지 않으면 유효성 검사를 통과하지 못하게 됩니다.

정규 표현식에 대한 가이드는 MDN - 정규 표현식을 참조하세요.

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

HTML 
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무것도 입력하지 않고 '제출'버튼을 클릭해보세요!

value 속성

기본값을 설정합니다.
이 값은 사용자가 아무런 입력을 하지 않을 때 처음 표시되는 url을 지정합니다.

HTML 
<input type="url" value="https:///example.com">
브라우저에서 실제 표시된 모습

disabled 속성

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

HTML 
<input type="url" value="https:///example.com" disabled>
브라우저에서 실제 표시된 모습 입력이나 값을 바꾸려 해도 아무런 작동을 하지 않습니다.

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

readonly 속성

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

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

HTML 
<input type="url" value="https:///example.com" readonly>
브라우저에서 실제 표시된 모습

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

maxlength 속성

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

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

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

HTML 
<!-- maxlength="10"으로 최대 10자 입력 제한 -->
<input type="url" maxlength="10" placeholder="최대 10자 이내">
브라우저에서 실제 표시된 모습

minlength 속성

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

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

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

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

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

HTML 
<form>
    <label for="url">URL</label>
    
    <!-- minlength="10"으로 최소 10자 입력 요구 -->
    <input type="url" id="url" minlength="10" placeholder="최소 10자 이상 입력..." required>
    <button type="submit">제출</button>
</form>
실제 적용된 모습 실습 가이드: minlength 작동 확인
  • 오류 확인: 입력 필드에 입력이 없거나 10글자만 입력한 후, [제출] 버튼을 클릭해 보세요. 브라우저가 최소 입력 조건(10글자) 미달 오류 메시지를 표시하는 것을 확인합니다.
  • 성공 확인: 필드에 10글자 이상 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

접근성 고려 사항

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

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

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

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

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<input type="url" placeholder="홈페이지 주소">
브라우저에서 실제 표시된 모습
HTML 
<label for="user-url">홈페이지 주소</label>
<input type="url" id="user-url" placeholder="https://example.com">
브라우저에서 실제 표시된 모습

브라우저 호환성

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

명세서

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

참고문헌

같이 보기