English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 Input 유형

HTML에서5중에서 여러 가지 새로운 양식 input 입력 유형이 추가되었습니다. 이 추가 요소를 사용하여 더 나은 입력 제어와 검증을 실현할 수 있습니다.

HTML5 새로운 Input 유형

HTML5 여러 가지 새로운 양식 입력 유형을 가지고 있습니다. 이 새로운 기능은 더 나은 입력 제어와 검증을 제공합니다.

이 장에서는 이 새로운 입력 유형을 전면적으로 소개합니다：

  • color

  • date

  • datetime

  • datetime-local

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week

주의:모든 주요 브라우저가 새로운 input 유형을 모두 지원하지는 않지만, 여러분은 모든 주요 브라우저에서 그들을 사용할 수 있습니다. 지원되지 않더라도, 일반 텍스트 필드로 표시될 수 있습니다.

Input 유형: color

color 유형은 input 필드에서 색상을 선택하는 데 사용됩니다.

온라인 예제

색상 선택기에서 색상을 선택합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　좋아하는 색상을 선택하세요: <input type="color" name="favcolor"><br>
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: date

date 유형은 날짜 선택기에서 날짜를 선택할 수 있도록 합니다.

온라인 예제

시간 제어기를 정의합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　생일: <input type="date" name="bday">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: datetime

datetime 유형은 UTC 시간의 날짜를 선택할 수 있도록 합니다.

온라인 예제

날짜와 시간 제어기를 정의합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　생일(날짜와 시간): <input type="datetime" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: datetime-local

datetime-local 유형은 날짜와 시간(시간대 없음)을 선택할 수 있도록 합니다.

온라인 예제

날짜와 시간(시간대 없음)을 정의합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　생일(날짜와 시간): <input type="datetime-local" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: email

email 유형은 값이 포함되어야 하는 경우에 사용됩니다.-mail 주소 입력 필드.

온라인 예제

양식을 제출할 때, email 필드의 값이 합법적이고 유효한지 자동으로 확인됩니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input　type="submit">
</form>
<p><b>주의:/b> 인터넷 익스플로러　9　　및 이전 IE 버전은 type="email"을 지원하지 않습니다.</p>
</body>
</html>
테스트를 보자 ‹/›

알림: iPhone의 Safari 브라우저는 email 입력 유형을 지원하며, 터치스크린 키보드를 변경하여 이를 조화롭게 합니다( @ 및 .com 옵션 추가).

Input 유형: month

month 유형은 월을 선택할 수 있도록 합니다.

온라인 예제

월과 연(시간대 없음)을 정의합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　생일(월과 연): <input type="month" name="bdaymonth">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: number

number 유형은 값이 포함되어야 하는 입력 필드에 사용됩니다.

수용 가능한 숫자에 대한 제한을 설정할 수도 있습니다:

온라인 예제

숫자 입력 필드(제한)를 정의합니다:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</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>
테스트를 보자 ‹/›

다음 속성을 사용하여 숫자 유형에 대한 제한을 설정하십시오:

속성설명
disabled정의된 입력 필드는 비활성화됩니다
max허용 가능한 최대 값 설정
maxlength입력 필드의 최대 문자 길이 설정
min허용 가능한 최소 값 설정
pattern입력 필드를 검증하는 데 사용되는 패턴 설정
readonly입력 필드의 값이 수정할 수 없는 경우 설정
required입력 필드의 값이 필수인 경우 설정
size입력 필드의 보이는 문자 수 설정
step입력 필드의 합법한 숫자 간격 설정
value입력 필드의 기본 값 설정

Input 유형: range

range 유형은 특정 범위의 숫자 값을 포함해야 하는 입력 필드에 사용됩니다.

range 유형은 슬라이더로 표시됩니다.

온라인 예제

매우 정확하지 않은数值(슬라이더 제어와 유사):

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php" method="get">
점수: <input type="range" name="points" min="1" max="10">
<input　type="submit">
</form>
<p><b>주의:/b> 인터넷 익스플로러　9　및 이전 IE 버전은 type="range"를 지원하지 않습니다.</p>
</body>
</html>
테스트를 보자 ‹/›

숫자 유형에 대한 제한을 설정하는 데 사용할 수 있는 다음 속성을 사용하십시오:

  • max - 허용 가능한 최대 값 설정

  • min - 허용 가능한 최소 값 설정

  • step - 합법한 숫자 간격 설정

  • value - 기본 값 설정

Input 유형: search

search 유형은 사이트 검색이나 Google 검색과 같은 검색 필드에 사용됩니다.

온라인 예제

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

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　Google 검색: <input type="search" name="googlesearch"><br>
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: tel

온라인 예제

전화번호 입력 필드 정의:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　전화번호: <input type="tel" name="usrtel"><br>
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: time

time 유형은 시간을 선택할 수 있게 합니다.

온라인 예제

시간 제어기를 정의할 수 있는 입력 필드(지역无关):

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　시간 선택: <input type="time" name="usr_time">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

Input 유형: url

url 유형은 URL 주소를 포함해야 하는 입력 필드에 사용됩니다.

양식을 제출할 때, 자동으로 url 도메인의 값을 검증합니다.

온라인 예제

입력 URL 필드 정의:

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　홈페이지 추가: <input type="url" name="homepage"><br>
　　<input　type="submit">
</form>
<p><b>주의:/b> 인터넷 익스플로러　9및 이전 IE 버전은 type="url"을 지원하지 않습니다.</p>
</body>
</html>
테스트를 보자 ‹/›

알림: iPhone의 Safari 브라우저는 url 입력 유형을 지원하며, 터치스크린 키보드를 변경하여 그와 함께 사용합니다(.com 옵션 추가).

Input 유형: week

week 유형은 주와 연도를 선택할 수 있습니다.

온라인 예제

주와 연도 정의 (시간대 없음):

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　주를 선택하세요:　<input　type="week"　name="year_week">
　　<input　type="submit">
</form>
</body>
</html>
테스트를 보자 ‹/›

HTML5 <input> 레이블

레이블설명
<input>input 입력기 설명
HTML5 양식 요소HTML5 오디오