HTML5 Input Types
Input Type: number
<input type="number"> 는 숫자 값을 포함해야 하는 입력필드에 사용됩니다.
숫자에 한계를 설정할 수 있습니다.
브라우저의 지원에 따라서, 한계를 입력 필드에 표시될 수도 있다.
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input 제한(Restrictions)
일반적인 input 제한(restrictions)은 다음과 같다. (some are new in HTML5):
AttributeDescription
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Input Type: date
<input type="date"> 는 사용자가 날짜를 포함해야 하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라서, 날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
입력에 제한을 추가 할 수도 있다. :
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type: color
<input type="color"> 는 색상을 포함해야 하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라서, 색상 선택기(color picker)가 입력 필드에 표시될 수도 있다.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Input Type: range
<input type="range"> 는 값이 범위 안에 있어야하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라서, 입력 필드가 슬라이드 콘트롤(slider control)로 표시될 수 있다.
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>
제한을 지정하기위해 다음의 속성들을 사용할 수 있다.: min, max, step, value.
Input Type: month
<input type="month"> 사용자가 월과 연도를 선택할 수 있게 해준다.
브라우저의 지원에 따라서, 날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type: week
<input type="week"> 사용자가 주과 연도를 선택할 수 있게 해준다.
브라우저의 지원에 따라서, 날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>
Input Type: time
<input type="time"> 사용자가 시간을 선택할 수 있게 해준다 (no time zone).
브라우저의 지원에 따라서, 시간 선택기(time picker)가 입력 필드로 표시될 수도 있다.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type: datetime
<input type="datetime"> 사용자가 날짜와 시간을 (시간대와 함께) 선택할 수 있게 해준다.
Example
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
Input Type: datetime-local
<input type="datetime-local">사용자가 날짜와 시간을 (시간대 없이) 선택할 수 있게 해준다.
브라우저의 지원에 따라서, 날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type: email
<input type="email"> 는 e-메일 주소를 포함해야 하는 입력 필드에 사용된다.
브라우저의 지원에 따라서, 폼이 제출 될 때 e-메일 주소가 자동으로 유효성 검사가 될 수 있습니다.
Example
<form>
E-mail:
<input type="email" name="email">
</form>
Input Type: search
<input type="search"> 는 검색 필드에 사용됩니다. (검색 필드는 일반 텍스트 필드처럼 동작된다.)
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type: tel
<input type="tel"> 는 전화 번호를 포함해야 하는 입력 필드에 사용됩니다.
Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Input Type: url
<input type="url"> 은 URL 주소를 포함하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라서, 폼이 제출 될 때 URL 필드의 값이 자동으로 유효성 검사가 될 수 있습니다.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
'IT > HTML' 카테고리의 다른 글
| HTML | Input Type 종류 (0) | 2020.01.13 |
|---|---|
| HTML | css 속성 코드 (0) | 2019.12.27 |
| HTML | RGB 색상 코드표 | 깔끔 (0) | 2019.12.19 |