url

정의 및 사용

url type은 html4에서는 그저 텍스트 필드로 사용되던 것을 세분화한 것으로 url 주소를 입력하기 위해 사용되며, 값을 입력한 후 자동적으로 값이 유효한지 검사가 된다. 값을 입력한 후 자동적으로 값이 유효한지 검사가 된다. 예를 들어 파이어폭스 브라우저에서는 유효하지 않은 메일주소를 적으면 빨간색 테두리가 생기며, 오페라 브라우저에서는 전송 버튼을 누르면 이메일 주소를 입력하라는 경고창이 나타난다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함Chrome 지원Firefox 지원Opera 지원Safari 지원안함

파이어폭스 4.0 이상, 오페라 9.0 이상, 크롬 10.0 이상 에서만 현재 지원한다. email type 뿐만 아니라 속성도 지원되는 브라우저와 미지원되는 브라우저가 구분된다.

구문

속성 값 설명
설명
name ..
disabled 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.
form [NEW]
autocomplete [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.
autofocus [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.
list [NEW]
maxlength ..
pattern [NEW]
readonly ..
required [NEW] 필수입력필드 체크 속성- 서버로 폼을 전송하기 전에 필수 내용들이 모두 채워졌는지를 검사한다.
size ..
placeholder [NEW] 힌트 표시하기 속성 – 적당한 예시 내용을 표시하고 있다가 사용자가 입력을 하면 사라진다. 만약 autofocus 속성을 사용하였다면 placeholder 의 내용은 보여지지 않는다.
value 기본값

예제

버그 및 이슈

  • html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.
  • 기본적으로 type 속성만 있을때는 잘못된 형식의 url을 적었을 때만 경고창이 나타나지만, required 속성을 함께 적어주면 빈칸으로 폼 전송을 하면 필수입력 사항이라는 경고창도 함께 나타난다.

iPhone Safari 브라우저에서의 input type

iPhone의 Safari 브라우저는 html5의 input type url 을 스크린 키보드가 자동 인식하여, url 폼을 입력할 때 자동으로 키보드가 /, .com 같은 기호로 바뀌며 .com 버튼을 오래 누르고 있으면 .org, .co.kr 등의 버튼들이 나타나서 편리하게 사용할 수 있다.

목록 으로

댓글