HTML5 입력 유형

HTML5 새로운 입력 형식

HTML5는 몇 가지 새로운 양식 입력 유형이 있습니다. 이 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

이 장에서는 이러한 포괄적 인 새로운 입력 유형을 설명합니다 :

• 색
• 날짜
• 날짜
• 날짜 로컬
• 이메일
• 월
• 수
• 범위
• 수색
• 전화
• 시간
• URL
• 주

참고 : 주요 브라우저 모두가 새로운 입력 형식을 지원,하지만 당신은 이미 모든 주요 브라우저에서 사용할 수 있습니다.지원되지 않으면, 여전히 일반 텍스트 필드로 나타날 수 있습니다.

입력 유형 : 색상

다음과 같이 입력 필드 타입에 사용되는 색상은 주로 색상을 선택하기 위해 사용된다 :

예

색상 선택기에서 색상을 선택합니다 :

选择你喜欢的颜色: <input type="color" name="favcolor">

»시도

입력 유형 : 날짜

날짜 형식은 날짜 선택기에서 날짜를 선택할 수 있습니다.

예

시간 컨트롤러를 정의합니다 :

生日: <input type="date" name="bday">

»시도

입력 유형 : 날짜

날짜 시간 유형은 날짜 (UTC 시간)을 선택할 수 있습니다.

예

날짜와 시간 컨트롤러 (현지 시간) 정의 :

生日 (日期和时间): <input type="datetime" name="bdaytime">

»시도

입력 유형 : 날짜 로컬

날짜 로컬 유형은 날짜와 시간 (아무 시간대)를 선택할 수 있습니다.

예

날짜 및 시간 (NO 시간대)를 정의 :

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

»시도

입력 유형 : 이메일

이메일 유형의 전자 메일 주소를 포함한다 입력 필드에 사용된다.

예

양식이 제출되면, 자동으로 값이 유효한 이메일 도메인 여부를 확인합니다 :

E-mail: <input type="email" name="email">

»시도

팁 : 사파리 브라우저에서 아이폰 이메일입력 방식을 지원하며, 터치 스크린 키보드를 변경하여 일치 (@ 및 .COM 옵션을 추가) 할 수 있습니다.

입력 유형 : 달

달의 유형은 한 달에 선택할 수 있습니다.

예

정의 된 월과 연도 (아무 시간대) :

生日 (月和年): <input type="month" name="bdaymonth">

»시도

입력 유형 : 번호

숫자 타입 값을 포함해야 입력 필드에 사용된다.

당신은 또한 제한된 숫자를 허용하도록 설정할 수 있습니다 :

예

숫자 입력 필드 (제한)를 정의합니다 :

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

»시도

디지털 Limited의 유형을 지정하려면 다음 속성을 사용합니다 :

• 규정에 의해 허용 된 최대 극대화를
• 최소 - 규정 최소 허용
• 단계는 -에 대한 법적 번호 간격을 지정합니다 (단계 = "3", 법적 번호 -3,0,3,6 등을 할 수 있다면)
• 값 - 지정된 기본 값

정의 된 모든 속성과 예를하려고 시도

입력 유형 : 범위

다양한 유형의 수치 범위를 포함해야 입력 필드에 사용된다.

범위 유형은 슬라이더로 표시됩니다.

예

당신은 (슬라이더 컨트롤처럼) 매우 정확한 값을 정의 할 필요가 없습니다 :

<input type="range" name="points" min="1" max="10">

»시도

디지털 Limited의 유형을 지정하려면 다음 속성을 사용하십시오 :

• 최대 - 규정에서 허용하는 최대
• 최소 - 규정 최소 허용
• 단계는 -에 대한 법적 번호 간격을 지정합니다
• 값 - 지정된 기본 값

입력 유형 : 검색

이러한 사이트 검색 또는 Google 검색과 검색 창, 검색 유형입니다.

예

(사이트 검색 또는 Google 검색 유사) 검색 필드를 정의합니다 :

Search Google: <input type="search" name="googlesearch">

»시도

입력 유형 : 전화

예

번호 필드가 정의 된 전화 입력

电话号码: <input type="tel" name="usrtel">

»시도

입력 유형 : 시간

시간 유형은 시간을 선택할 수 있습니다.

예

입력 시간 컨트롤러 (아무 시간대) 정의 :

选择时间: <input type="time" name="usr_time">

»시도

입력 유형 : 홈페이지

URL 형식은 URL 주소를 포함해야합니다 입력 필드에 사용됩니다.

양식이 제출되면 자동 URL 필드의 값을 확인한다.

예

입력 필드 URL을 정의

添加您的主页: <input type="url" name="homepage">

»시도

팁 : 사파리 브라우저에서 아이폰URL을 입력 유형을 지원하고, 일치하는 터치 스크린 키보드를 변경하여 (.COM 옵션을 추가).

입력 유형 : 주

주일은 일주일 년의 유형을 선택할 수 있습니다.

예

정의 주 및 연도 (아무 시간대) :

选择周: <input type="week" name="week_year">

»시도

HTML5 <입력> 태그