> 웹 프론트엔드 > H5 튜토리얼 > HTML5_html5 튜토리얼 기술의 8가지 새로운 INPUT 입력 유형 소개

HTML5_html5 튜토리얼 기술의 8가지 새로운 INPUT 입력 유형 소개

WBOY
풀어 주다: 2016-05-16 15:46:30
원래의
2348명이 탐색했습니다.

기존 입력형 HTML 코드 예시 :

코드 복사
코드는 다음과 같습니다

텍스트 필드
라디오 버튼
체크박스
드롭다운 목록< ;select>

HTML5에는 여러 가지 새로운 양식 입력 입력 유형이 추가되었습니다. 이러한 새 요소를 사용하면 더 나은 입력 제어 및 유효성 검사를 활성화할 수 있습니다.
1. 이메일 유형 애플리케이션
이메일 유형 입력 요소는 이메일 주소를 입력하는 데 특별히 사용되는 텍스트 입력 상자로, 이메일 입력이 자동으로 확인됩니다. 상자의.

코드 복사
코드는 다음과 같습니다.


2. url 유형 적용
url 유형의 입력 요소는 URL 주소와 같은 특수 문자를 입력할 수 있는 텍스트 상자를 제공합니다.

코드 복사
코드는 다음과 같습니다.


3. 숫자형 적용
숫자형 입력요소는 숫자값을 입력할 수 있는 텍스트박스를 제공합니다.

코드 복사
코드는 다음과 같습니다.


4. 범위형 적용
범위형 입력요소는 특정 범위 내의 수치를 입력하기 위한 텍스트박스를 제공하며, 이는 웹페이지에 스크롤바로 표시됩니다. .

코드 복사
코드는 다음과 같습니다.


5. 날짜 체크아웃형 애플리케이션
입력형 HTML 코드 기능 설명

코드 복사
코드는 다음과 같습니다.

날짜

일, 월, 연도 선택
월 < input type="month">
월 및 연도 선택

코드 복사
코드는 다음과 같습니다.



주 및 연도 선택

코드 복사
코드는 다음과 같습니다.

time

시간 선택( 시간 및 분)

코드 복사
코드는 다음과 같습니다.

datetime < ;input type="datetime">

시간, 일, 월, 연도 선택(UTC 시간)

코드 복사
코드는 다음과 같습니다.

datetime-local
시간)

6. 검색형 애플리케이션

검색 유형 입력 요소는 검색 키워드를 입력할 수 있는 텍스트 상자를 제공합니다.

코드 복사
코드는 다음과 같습니다.


input[type="search"]{
-webkit-appearance:textfield;
}

7. 전화형 애플리케이션
전화형 입력 요소는 전화번호 입력을 위한 전용 텍스트 상자를 제공합니다.

코드 복사
코드는 다음과 같습니다.


8. 색상 유형 적용
색상 유형 입력 요소는 색상을 설정하는 데 특별히 사용되는 텍스트 상자를 제공합니다.

코드 복사
코드는 다음과 같습니다.


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿