HTML5 양식 : 입력 유형 (1 부) - SitePoint-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML5 양식 : 입력 유형 (1 부) - SitePoint

Christopher Nolan

Feb 18, 2025 am 08:28 AM

HTML5 양식 입력 유형에 대한 자세한 설명 및 모범 사례

코어 포인트 HTML5 Forms: Input Types (Part 1) - SitePoint

html5 양식은 이메일, 검색, 날짜, 시간, 번호, 범위, 색상 등과 같은 새로운 입력 유형을 소개합니다. 이러한 유형은 데이터 유형과 더 일치하는 사용자 인터페이스 요소 및 기본 데이터 검증 기능을 제공합니다. 이전 브라우저에서도 이러한 새로운 입력 유형은 기본적으로 표준 텍스트 필드로 나타나는 것을 제외하고는 제대로 작동합니다. 검색 입력 유형 ()은 사용자에게 직관적 인 검색 사이트 프롬프트를 제공하는 검색 필드를 제공합니다. 일반적으로 내장 명확한 버튼이 제공되며 브라우저 또는 운영 체제의 검색 상자와 일치하도록 스타일링 할 수 있습니다. 전자 메일 입력 유형 ()은 하나 이상의 이메일 주소를 지정하는 데 사용됩니다. 여러 쉼표로 구분 된 이메일 주소에 대한 부울

속성을 지원합니다. 터치 패드 장치는 일반적 으로이 필드에 초점이 맞출 때 전자 메일 입력에 최적화 된 키보드를 표시하며 일부 브라우저는 유효하지 않은 이메일 입력에 대한 오류 메시지를 제공합니다.

URL 입력 유형 ()은 정상 텍스트 필드로 표시되는 전자 메일 입력 유형과 유사한 네트워크 주소를 지정하는 데 사용되지만 터치 스크린의 네트워크 주소 입력에 최적화 된 키보드를 제공합니다. 최신 브라우저는이 입력 유형을 사용하여 URL의 일반 프로토콜 형식을 확인합니다.

(다음은 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 공동 저술 한 책 "실제 세계를위한 html5 & css3, Real World, 2nd Edition"이라는 책에서 발췌 한 것입니다.이 책은 전 세계 상점에서 구입할 수 있습니다. 여기에서 찾을 수 있습니다 당신은 이미 type="search" 요소의

속성에 익숙 할 수 있습니다. 이 속성은 사용자에게 어떤 형태의 양식 입력을 제시 할 것인지 결정합니다. 이 속성이 생략되거나 새로운 입력 유형 및 기존 브라우저의 경우 브라우저가 유형을 이해하지 못하면 입력이

로 유지됩니다. 이것이 여전히 오래된 브라우저를 지원하더라도 HTML5 양식이 오늘날에도 여전히 작동하게합니다. 이메일 또는 검색과 같은 새 입력 유형을 사용하는 경우 이전 브라우저는 표준 텍스트 필드 만 사용자에게만 표시합니다. type="email" 당사의 등록 양식은 현재 친숙한 10 가지 입력 유형 중 4 가지를 사용합니다 : Checkbox, Text, Password 및 Submit. 다음은 html5 전에 사용할 수있는 모든 유형의 목록입니다. multiple

버튼

checkbox type="url" 파일 숨겨진

이미지

비밀번호 라디오 재설정

제출

텍스트 input html5 사양은 UI 요소를 제공하는 9 가지 새로운 입력 유형과 더 데이터 유형 호환 인 기본 데이터 검증 기능을 제공합니다.

검색
url
날짜
번호
색상

html5.1 및 Whatwg HTML Living Standard에는 4 개의 추가 날짜 입력 유형이 포함되어 있으며 그 중 3 개는 현대식 브라우저에서 잘 지원됩니다.

dateTime-local 달

주 dateTime (브라우저가 지원하지 않음)

각각의 새로운 유형과 사용 방법에 대해 자세히 알아 보겠습니다.

검색 (검색) 검색 입력 유형 ()은 검색 필드를 제공합니다. 하나 이상의 검색어를 입력하기위한 단일 라인 텍스트 입력 컨트롤입니다. 사양을 지적합니다

텍스트 상태와 검색 상태의 차이는 주로 스타일입니다. 검색 필드가 일반 텍스트 필드와 다른 플랫폼에서 검색 상태는 모양이 플랫폼의 검색 필드와 일치하지 않고 등장 할 수 있습니다. 일반 텍스트 필드.

많은 브라우저 스타일 검색 입력 입력은 브라우저 또는 운영 체제의 검색 상자로 일관된 방식으로 입력을 입력합니다. 현재 Chrome, Safari, Opera 및 IE는 그림 4.5와 같이 텍스트를 입력 한 후 × 아이콘을 제공하기 위해 마우스를 클릭하여 입력을 청소하는 기능을 추가했습니다. 날짜/시간 입력 유형은 크롬 및 오페라에서도 지우실 수 있습니다.

<.> 그림 4.5 검색 입력 유형의 스타일은 운영 체제의 검색 필드와 유사합니다. Apple 장치의 경우 Chrome, Safari 및 Opera의 검색 필드에는 기본적으로 모서리가 둥글게되어 장치의 검색 필드 모양과 일치합니다. 동적 키보드가있는 터치 패드에서 "GO"버튼은 장치에 따라 검색 아이콘 또는 "검색"이라는 단어로 나타납니다. 비표준

특성을 포함하면 Chrome 및 Opera는 양식 필드에 돋보기/찾기 아이콘을 표시합니다.

검색 필드를 만들기 위해 여전히 사용할 수 있지만 새 검색 유형은 사용자에게 사이트를 검색하고 사용자가 익숙해 지도록 인터페이스를 제공하는 위치를 직관적으로 자극 할 수 있습니다. 검색 필드는 없지만 사용 방법의 예는 다음과 같습니다.

모든 새로운 입력 유형과 마찬가지로 검색은 지원되지 않는 브라우저에서 일반 텍스트 상자로 나타나므로 적절한 경우 사용하지 않을 이유가 없습니다.

이메일 주소 (이메일 주소) 전자 메일 유형 ()은 하나 이상의 이메일 주소를 지정하는 데 사용됩니다. 부울

속성을 지원하여 여러 쉼표로 구분 된 (선택 공간) 이메일 주소를 허용합니다. 등록자의 이메일 주소에

를 사용하도록 양식을 변경합시다 :

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

입력 유형을 텍스트에서 이메일로 변경하면 사용자 인터페이스에서 눈에 띄는 변경이 없음을 알 수 있습니다. 그러나 무대 뒤에는 차이가 있습니다.

터치 패드 장치를 사용하는 경우이 변경 사항이 분명해집니다. 전자 메일 필드에 중점을두면 크롬을 실행하는 iPad 또는 Android 전화와 같은 대부분의 터치 패드 장치는 @ 기호, 기간 및 공간 버튼을 포함하여 이메일 입력에 최적화 된 키보드를 표시하지만 쉼표는 그림 4.6과 같이 표시됩니다.

<.> 그림 4.6. 이메일 입력 유형은 iOS 장치에서 사용자 정의 키보드를 제공합니다. Firefox, Chrome, Opera 및 Internet Explorer 10은 유효하지 않은 이메일 입력에 대한 오류 메시지를 제공합니다. 하나 이상의 이메일 주소로 인식되지 않는 양식을 제출하려고하면 브라우저가 무엇이 잘못되었는지 알려줍니다. 기본 오류 메시지는 그림 4.7에 나와 있습니다.

<.> 그림 4.7. 참고 : 사용자 정의 확인 메시지가 브라우저에서 제공 한 기본 오류 메시지가 마음에 들지 않습니까? 자신의 메시지를 설정하려면 HTML5 Forms: Input Types (Part 1) - SitePoint 를 사용하십시오. 제공하려는 오류 메시지 인 하나의 매개 변수 만 허용합니다. 사용자 정의 유효성 검사 메시지를 설정하면 값이 유효한 값이되면 폼 제출을 활성화하려면 유효성 값이 빈 문자열 (False value)으로 설정해야합니다.

불행히도, 메시지의 내용을 변경할 수는 있지만 적어도 한동안 당신은 여전히 그 모양에 의해 제한됩니다.

url URL Input ()은 네트워크 주소를 지정하는 데 사용됩니다. 이메일과 마찬가지로 일반 텍스트 필드로 나타납니다. 많은 터치 스크린에서 표시된 화면 키보드는 전방 슬래시 (/) 및 ".com"바로 가기를 통해 네트워크 주소 입력에 최적화됩니다. URL 입력 유형을 사용하려면 등록 양식을 업데이트하겠습니다.

url의 검증

Internet Explorer 10으로 시작하는 모든 최신 브라우저는 URL 입력 유형을 지원하며 값이 프로토콜로 시작되지 않으면 입력이 유효하지 않은 것으로보고됩니다. q : //가 실제 프로토콜이 아니더라도 .xyz는 실제 최상위 도메인이 아니더라도 q : //example.xyz는 URL의 일반 프로토콜 형식 만 검증합니다. 입력 된 값이보다 구체적인 형식에 맞게 원하는 경우, 태그 (또는 자리 표시 자)에 정보를 제공하여 사용자에게 알리고

속성을 사용하여 앞에서 언급 한 바와 같이 정확성을 보장하십시오. HTML5 Forms: Input Types (Part 1) - SitePoint 전화 번호 (전화 번호) 전화 번호의 경우 를 사용하십시오. URL 및 이메일 유형과 달리 Tel 유형은 특정 구문 또는 패턴을 시행하지 않습니다. 글자와 숫자 (실제로 라인 브레이크 또는 운송 반환을 제외한 모든 문자)는 유효합니다. 전 세계적으로 모든 국가마다 다양한 길이와 구두점의 유효한 전화 번호가 있으므로 단일 형식을 표준으로 지정하는 것은 불가능합니다. 예를 들어, 미국에서는 1 (415) 555-1212는 415.555.1212만큼 이해하기 쉽지만 회사는 (800) 전화 번호와 같은 전화 번호로 서신을 사용할 수도 있습니다. 예제와 함께 올바른 구문 또는 입력 후 댓글을 가진 자리 표시자를 포함시켜 특정 형식을 장려 할 수 있습니다. 또한

속성을 사용하여 형식을 지정할 수 있습니다. 속성에 a 를 포함하여 툴팁을 제공하고 기본 확인 오류 메시지의 사용자 경험을 향상시킵니다. 메소드를 사용하여보다 유익한 클라이언트 검증을 제공 할 수도 있습니다. TEL 입력 유형을 사용하는 경우 동적 터치 패드에는 일반적으로 별표 및 파운드 키를 포함한 전화기 키보드가 표시됩니다. 전화 번호 이외의 다른 목적으로 Tel을 사용할 수 있습니다. 예를 들어, 사회 보장 번호 양식 입력에 가장 적합한 키보드 일 수 있습니다.

HTML5 양식 입력 유형 (FAQS)의 FAQ 다른 유형의 입력 유형의 HTML5 형태는 무엇입니까?

html5는 다양한 새로운 양식 입력 유형을 소개합니다. 여기에는 "색상", "날짜", "datetime-local", "이메일", "달", "번호", "범위", "검색", "tel", "time", "url", "url"및 "Week가 포함됩니다. ".". 각 입력 유형은 특정 목적을 가지며보다 적절하고 사용자 친화적 인 입력 필드를 제공하여 웹 사이트의 사용자 경험을 크게 향상시킬 수 있습니다. type="tel" HTML5에서"날짜 "입력 유형은 어떻게 작동합니까? pattern html5의"날짜 "입력 유형은 사용자가 날짜를 입력 할 수있는 입력 필드를 만듭니다. 날짜 형식은 사용자의 브라우저 로케일에 따라 형식화되며 날짜 선택기는 일반적으로 사용자 편의를 위해 제공됩니다. 그러나이 입력 유형에 대한 지원은 브라우저마다 다릅니다. pattern 이전 브라우저에서 HTML5 양식 입력 유형을 볼 때 어떻게됩니까? title 를 지원하지 않는 이전 브라우저에서 HTML5 양식 입력 유형을 보면 브라우저는 표준 "텍스트"입력 필드로 기본값을받습니다. 즉, 사용자는 여전히 정보를 입력 할 수 있지만 HTML5 입력 유형의 특정 기능 (예 : "날짜"입력 유형의 날짜 선택기)은 사용할 수 없습니다. setCustomValidity html5 양식에서 사용자 입력을 확인하는 방법은 무엇입니까?

html5는 숫자 입력 유형의 "필수", "패턴"및 "최소"/"max"를 포함하여 입력 검증을위한 여러 속성을 제공합니다. 이러한 속성은 양식을 제출하기 전에 사용자 입력이 특정 기준을 충족하도록하는 데 사용될 수 있습니다.