HTML5 입력 유형

HTML5 拥有多个新的表单输入类型。 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

이 장에서는 다음과 같은 새로운 입력 유형에 대한 포괄적인 소개를 제공합니다.

color
date
날짜시간
날짜시간-지역
이메일
월
번호
범위
검색
전화
시간
url
주

참고: 모든 주요 브라우저가 새로운 입력 유형을 지원하는 것은 아니지만 이미 모든 주요 브라우저에서 사용할 수 있습니다. 지원되지 않더라도 일반 텍스트 필드로 표시될 수 있습니다.

입력 유형: 색상

색상 유형은 입력 필드에 사용되며 그림과 같이 주로 색상을 선택하는 데 사용됩니다. 아래:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" " method="post">
    选择你喜欢的颜色: <input type="color" name="favcolor"><br>
    <input type="submit">
</form>
<?php
echo $_POST['favcolor'];
?>
</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>

프로그램을 실행하고 시도해 보세요

입력 유형: datetime

datetime 유형은 다음을 허용합니다. you to select a date ( UTC time).

인스턴스

날짜 및 시간 컨트롤러 정의(현지 시간):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    生日 (日期和时间): <input type="datetime" name="bdaytime">
    <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>
</body>
</html>

프로그램을 실행하고 합법적인 값을 입력하세요. 불법 이메일로 시도해 보세요

참고: Internet Explorer 9 및 이전 IE 버전은 type="email"을 지원하지 않습니다

입력 유형: 월

월 유형을 사용하면 달을 선택할 수 있습니다.

예

월과 연도 정의(시간대 없음):

<!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>
</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">
    <input type="number" name="points" min="0" max="10" step="3" value="6">
    <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" method="get">
    Points: <input type="range" name="points" min="1" max="10">
    <input type="submit">
</form>
</body>
</html>

프로그램 실행 시도해 보세요

다음 속성을 사용하여 숫자 유형에 대한 제한을 지정하세요.

max - 허용되는 최대값을 지정합니다.

min - 허용되는 최소값을 지정합니다.

단계 - 유효한 숫자 간격을 지정합니다.

값 - 기본값을 지정합니다.

입력 유형: 검색

검색 유형이 검색에 사용됩니다. 사이트 검색 또는 Google 검색과 같은 필드입니다.

예

검색 필드 정의(사이트 검색 또는 Google 검색과 유사):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    Search Google: <input type="search" name="googlesearch"><br>
    <input type="submit">
</form>
</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 필드 값이 자동으로 확인됩니다.

인스턴스

입력 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>
</body>
</html>

프로그램을 실행하고 사용해 보세요.

입력 유형: 주

주 유형을 사용하면 주와 연도를 선택할 수 있습니다.

예

주와 연도 정의(시간대 제외):

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

프로그램을 실행하고 사용해 보세요

HTML5 <input> 태그

标签	描述
<input>	描述input输入器

태그

설명

< ;input>

입력 입력 장치 설명

참고

: 모든 주요 브라우저가 새로운 입력 유형을 지원하는 것은 아니지만 이미 모든 주요 브라우저에서 사용할 수 있습니다. 브라우저에서 사용됩니다. 지원되지 않더라도 일반 텍스트 필드로 표시될 수 있습니다. <🎜><🎜><🎜><🎜><🎜><🎜><🎜>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" method="post"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> <?php echo $_POST['favcolor']; ?> </body> </html>

제출하다 코드 재설정

자동운전