HTML 새로운 입력 유형

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 필드의 값이 자동으로 확인됩니다.

아아아아

지속적인 학습

새로운 파일

<!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>

코드 재설정

자동운전

제출하다

시사 Clear