이 글에서는 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" />
url 유형의 입력 요소는 URL 주소와 같은 특수 텍스트를 입력할 수 있는 텍스트 상자를 제공합니다.
<input type="url" name="user_url" />
숫자형 입력 요소는 숫자 값을 입력할 수 있는 텍스트 상자를 제공합니다.
<input type="number" name="number1" min="1" max="20" step="4" />
범위 유형의 입력 요소는 특정 범위 내의 숫자 값을 포함하는 텍스트 상자를 제공하며, 이는 웹 페이지에 스크롤 막대로 표시됩니다.
<input type="range" name="range1" min="1" max="30" />
입력형 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"> 选取时间、日、月、年(本地时间)
검색 유형 입력 요소는 검색 키워드를 입력할 수 있는 텍스트 상자를 제공합니다.
<input type="search" name="search1" /> input[type="search"] { -webkit-appearance:textfield; }
전화형 입력 요소는 전화번호 입력을 위한 텍스트 상자를 제공합니다.
<input type="tel" name="tel" />
색상 유형 입력 요소는 색상을 설정하는 데 특별히 사용되는 텍스트 상자를 제공합니다.
<input type="color" name="color" />
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
HTML5 터치 이벤트위 내용은 HTML5에 대한 8가지 새로운 INPUT 입력 유형을 추가했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!