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

不言
풀어 주다: 2018-06-09 17:27:14
원래의
2080명이 탐색했습니다.

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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