HTML5 새로운 입력 유형
HTML5에는 몇 가지 새로운 양식 입력 유형이 있습니다. 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.
이 장에서는 다음과 같은 새로운 입력 유형에 대한 포괄적인 소개를 제공합니다.
color
date
-
날짜시간
날짜시간-지역
이메일
월
번호
범위
검색
전화
시간
url
주
참고:모든 주요 브라우저가 새로운 입력 유형을 지원하는 것은 아니지만 이미 모든 주요 브라우저에서 사용할 수 있습니다. 지원되지 않더라도 일반 텍스트 필드로 표시될 수 있습니다.
입력 유형: 색상
색상 유형은 입력 필드에서 사용되며 주로 색상을 선택하는 데 사용됩니다.
예
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: 날짜
날짜 유형을 사용하면 날짜 선택기에서 날짜를 선택할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: 날짜/시간
날짜/시간 유형을 사용하면 날짜(UTC 시간)를 선택할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: datetime-local
datetime-local 유형을 사용하면 날짜와 시간을 선택할 수 있습니다(시간대 제외).
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和时间): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: 이메일
이메일 유형은 이메일 주소를 포함해야 하는 입력 필드에 사용됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持type="email" 。</p> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
팁: iPhone의 Safari는 이메일 입력 유형을 지원하며 이를 수용하도록 터치스크린 키보드를 변경합니다(@ 및 .com 옵션 추가).
입력 유형: 월
월 유형을 사용하면 달을 선택할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: 숫자
숫자 유형은 숫자 값을 포함해야 하는 입력 필드에 사용됩니다.
허용되는 수에 제한을 설정할 수도 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
다음 속성을 사용하여 숫자 유형에 대한 제한을 지정합니다.
max - 허용됨을 지정합니다.
min의 최대값 - 허용되는 최소값을 지정합니다.
step - 유효한 숫자 간격을 지정합니다(step="3"인 경우 유효한 숫자는 -3,0,3,6 등입니다.)
값 - 기본값을 지정합니다.
자격을 갖춘 모든 항목으로 시도해 보세요. 속성
입력 유형: 범위
예제를 사용해 보세요. 범위 유형은 특정 범위 내의 숫자 값을 포함해야 하는 입력 필드에 사용됩니다.
범위 유형이 슬라이더로 표시됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
숫자 유형에 대한 제한을 지정하려면 다음 속성을 사용하십시오.
max - 허용되는 최대값을 지정합니다.
min - 최소 허용 값 지정
step - 법적 숫자 간격 지정
값 - 기본값 지정
입력 유형: 검색
검색 유형은 사이트 검색이나 Google 검색과 같은 검색 필드에 사용됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: tel
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 电话号码: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
입력 유형: 시간
시간 유형을 사용하면 시간을 선택할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择时间: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
입력 유형: url
url 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다.
양식을 제출하면 URL 필드 값이 자동으로 확인됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 添加你的主页: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
팁: iPhone의 Safari는 URL 입력 유형을 지원하며 터치스크린 키보드가 작동하도록 변경합니다(.com 옵션 추가).
입력 유형: 주
주 유형을 사용하면 주와 연도를 선택할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
HTML5 <input> 태그
| 标签 | 描述 |
|---|---|
| <input> | 描述input输入器 |
