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

기존 입력형 HTML 코드 예시 :

코드 복사

코드는 다음과 같습니다

텍스트 필드<input type="text">
라디오 버튼<input type="radio">
체크박스<input type="checkbox">
드롭다운 목록&lt ;select><option>
비밀번호 필드제출 버튼클릭 가능한 버튼이미지 버튼숨겨진 필드재설정 버튼파일 필드

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

코드 복사

코드는 다음과 같습니다.

<input type=" email" name ="user_email" />

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

코드 복사

코드는 다음과 같습니다.

<input type=" url" name ="user_url" />

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

코드 복사

코드는 다음과 같습니다.

<input type=" 숫자" 이름 ="숫자1" min="1" max="20" step="4" />

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

코드 복사

코드는 다음과 같습니다.

<input type=" 범위" 이름 ="범위1" min="1" max="30" />

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

코드 복사

코드는 다음과 같습니다.

날짜 <input type="date">

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

코드 복사

코드는 다음과 같습니다.

주 <input type="week">

주 및 연도 선택

코드 복사

코드는 다음과 같습니다.

time <input type="time">

시간 선택( 시간 및 분)

코드 복사

코드는 다음과 같습니다.

datetime &lt ;input type="datetime">

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

코드 복사

코드는 다음과 같습니다.

datetime-local
<input type="datetime-local"> 시간)

6. 검색형 애플리케이션

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

코드 복사

코드는 다음과 같습니다.

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

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

코드 복사

코드는 다음과 같습니다.

<input type=" tel" 이름 ="tel" />

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

코드 복사

코드는 다음과 같습니다.

<input type=" color" 이름 ="color" />