분류 html

HTML5 Input Types

컨텐츠 정보

  • 조회 379 (작성일 )

본문

  • Search Fields
type = "search"입력은 검색 필드 용으로 사용됩니다. 기능적으로는 기본 텍스트 필드와 매우 비슷하지만 전용 유형을 사용하면 브라우저가 다른 스타일을 적용 할 수 있습니다.
이것은 사용자의 운영 체제가 검색 필드에 대해 설정된 스타일을 가지고 있는 경우에 특히 유용합니다. 브라우저가 일치 시킬 웹 페이지의 검색 필드 스타일을 지정할 수 있기 때문입니다.
  • Telephone Number Fields
type = "tel"입력은 전화 번호를 입력하는 데 사용됩니다. 국제적으로 전화 번호는 기술 및 현지화의 이유로 다양한 형식을 많이 사용합니다. 이로 인해 전화 입력은 전화 번호 형식의 유효성 검사를 시도하지 않습니다.
태그의 pattern 속성 또는 setCustomValidity() JavaScript 메소드와 같은 관련 유효성 검사 도구를 사용하여 필요한 경우 형식을 적용 할 수 있습니다.
  • URL Fields
type = "url"필드는 URL 캡처에 사용될 수 있습니다. 예를 들어 사용자에게 비즈니스 디렉토리에 대한 웹사이트 주소를 입력하도록 요청할 때 이를 사용할 수 있습니다.
  • Email Fields
가장 새로운 옵션 중 가장 일반적으로 사용되는 옵션 중 하나는 이메일 주소에 대해 type = "email"입니다. 가상 키보드를 사용하는 장치는 전화 번호 및 URL과 마찬가지로 키를 사용자 지정 (@ 단추와 같은 항목 포함)하고 연락처 데이터베이스에서 자동 채우기를 사용하도록 설정합니다. 
전자 메일 주소는 종종 매우 간단한 형식을 따르는 것처럼 보일 수 있지만 변형을 통해 실제로는 매우 복잡해집니다. 전자 메일 주소의 유효성을 검사하려는 순진한 시도로 인해 주소가 유효하지 않은 것으로 표시될 수 있으므로 형식을 확인하기 위해 브라우저의 보다 정교하고 검증 된 유효성 검사 방법을 사용하는 것이 좋습니다.
  • Number Fields
type = "number"필드는 숫자 값을 위해 설계되었으며, min, max 및 step의 형태로 매우 유용한 속성이 있습니다. 숫자 필드의 유효한 값은 min 및 max 속성으로 지정된 최소값과 최대 값 사이의 부동 소수점 숫자 여야합니다.
  • Range Fields
덜 분명한 다른 유형 인 type = "range"는 사용자가 정확한 값을 신경 쓰지 않는 type = "number"의 대안으로 생각할 수 있습니다.
범위 필드는 숫자 필드와 동일한 최소, 최대 및 계단 속성을 사용하며 자주 사용하며 브라우저는 이를 거의 보편적으로 그래픽 슬라이더로 표시합니다.
  • Color Fields
type = "color"필드는 RGB 색상을 #aabbcc와 같은 16 진수 표기법으로 캡처하는 디자인입니다. HTML 사양은 브라우저가 일종의 사용자 친화적인 색상 선택기를 제공해야 한다는 의도로 이를 "색상 관리"라고 부릅니다.
일부 브라우저는 이것을 제공합니다. 특히 Chrome과 Firefox는 작은 색상 견본을 통해 시스템 색상 선택기에 대한 액세스를 제공합니다.
  • Date Fields
HTML5에서는 날짜와 시간의 입력을 만들기 위해 다양한 유형 값을 도입했습니다.
여기에는 date, time, datetime-local, month 및 week가 포함됩니다.
 
Input TypesHTML5