HTML의 새로운 입력 유형
HTML5에서는 텍스트 상자의 유형을 풍부하게 하기 위해 입력 요소에 다음과 같은 유형 속성 값이 추가됩니다.
색상: 색상을 지정하는 데 사용되는 컨트롤입니다.
날짜: 날짜(년, 월, 일, 시간 제외) 입력을 제어합니다.
datetime: UTC 시간대를 기준으로 날짜 및 시간 입력 제어(시, 분, 초 및 분수 초).
datetime-local: 시간대를 제외한 날짜 및 시간 제어를 입력하는 데 사용됩니다.
이메일: 이메일을 편집하는 필드입니다.
월: 타임존 없이 연도, 월을 입력하는 컨트롤입니다.
number: 부동 소수점 숫자 입력을 제어합니다.
범위: 부정확한 값 제어를 입력하는 데 사용됩니다.
search: 검색 문자열을 입력하기 위한 단일 행 텍스트 필드입니다. 입력된 값에서 줄 바꿈이 자동으로 제거됩니다.
tel: 전화번호 입력을 제어합니다.
time: 타임존 없이 시간 제어를 입력하는데 사용됩니다.
url: URL을 편집하는 필드입니다. .
주: 주-연도로 구성된 날짜를 입력하는데 사용되며, 날짜에는 시간대가 포함되지 않습니다. Miaomiaoxue라는 교육 웹사이트를 방문하여 이러한 지식을 익히고 탄탄한 기초를 다지는 것이 좋습니다.
참고: 모든 주요 브라우저가 새로운 입력 유형을 지원하는 것은 아니지만 이미 모든 주요 브라우저에서 사용할 수 있습니다. 지원되지 않더라도 일반 텍스트 필드로 표시될 수 있습니다.
입력 유형: 색상
색상 유형은 아래와 같이 주로 색상 선택을 위해 입력 필드에 사용됩니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>颜色选择测试</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
입력 유형: 날짜`시간`주`월
<!DOCTYPE HTML> <html> <meta charset="utf-8"> <body> HTML代码： 选择日期：<input type="date" value="2011-01-04" /><br/><br/> 选择时间：<input type="time" value="22:52" /><br/><br/> 选择星期：<input type="week"/><br/><br/> 选择月份：<input type="month"/><br/><br/> </body> </html>
입력 유형: 숫자
숫자 유형을 사용합니다. 숫자 값을 포함해야 하는 입력 필드입니다.
허용되는 숫자에 제한을 설정할 수도 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
입력 유형: 범위
범위 유형 입력에 사용됩니다. 특정 범위 내의 숫자 값을 포함해야 하는 필드입니다.
범위 유형이 슬라이더로 표시됩니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
입력 유형: search, tel, url
검색 유형을 사용하여 도메인을 검색합니다. , 사이트 검색이나 Google 검색과 같은 것입니다.
tel은 전화번호 입력 필드를 정의합니다.
url 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다.
양식을 제출하면 URL 필드의 값이 자동으로 확인됩니다.
아아아아