HTML5에 대한 8가지 새로운 INPUT 입력 유형을 추가했습니다.

이 글에서는 HTML5의 8가지 새로운 INPUT 입력 유형을 주로 소개합니다. 이 8가지 새로운 입력 유형은 이메일 유형, URL 유형, 숫자 유형, 범위 유형, 날짜 유형, 검색 유형 및 전화 유형입니다. , 필요한 친구는 기존 입력 유형 HTML 코드 예제를 참조할 수 있습니다.

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

HTML5에는 여러 가지 새로운 양식 입력 입력 유형이 추가되었습니다. 이러한 새 요소를 사용하면 더 나은 입력 제어 및 유효성 검사를 얻을 수 있습니다.

1. 이메일 유형 적용
이메일 유형 입력 요소는 이메일 주소를 입력하는 데 특별히 사용되는 텍스트 입력 상자로, 이메일 입력 상자의 값이 자동으로 확인됩니다.

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

2. URL 유형 응용

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

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

3. 숫자형 애플리케이션

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

<input type="number" name="number1" min="1" max="20" step="4" />

4. 범위 유형의 적용

범위 유형의 입력 요소는 특정 범위 내의 숫자 값을 포함하는 텍스트 상자를 제공하며, 이는 웹 페이지에 스크롤 막대로 표시됩니다.

<input type="range" name="range1" min="1" max="30" />

5. 날짜 체크아웃형 어플리케이션

입력형 HTML 코드 기능 설명

date <input type="date">

일, 월, 연도 선택

month <input type="month">

월, 연도 선택

week <input type="week">

주, 연도 선택

time <input type="time">

시간 선택(시간) 및 분)

datetime <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" name="tel" />

8. 색상 유형 적용

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

<input type="color" name="color" />

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

HTML5 터치 이벤트

위 내용은 HTML5에 대한 8가지 새로운 INPUT 입력 유형을 추가했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!