HTML5 - input 요소 type

1. 숫자 입력(number)

코드 :

<form>
  <label for="quantity">수량:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="100" step="1">
</form>

HTML : 

수량:

2.입력 범위 지정(range)

코드 :

<form>
  <label for="volume">음량:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" step="1">
</form>

HTML : 

음량:

3. 색상 입력(color)

코드 :

<form>
  <label for="color">색상:</label>
  <input type="color" id="color" name="color">
</form>

HTML : 

색상:

4. 날짜 입력(date)

코드 :

<form>
  <label for="dob">생년월일:</label>
  <input type="date" id="dob" name="dob">
</form>

HTML : 

생년월일:

5. 시간 입력(time)

코드 :

<form>
  <label for="meeting-time">회의 시간:</label>
  <input type="time" id="meeting-time" name="meeting-time">
</form>

HTML : 

회의 시간:

6. 날짜와 시간 입력(datetime-local)

코드 :

<form>
  <label for="event-datetime">이벤트 일시:</label>
  <input type="datetime-local" id="event-datetime" name="event-datetime">
</form>

HTML : 

이벤트 일시:

7. 연도와 월 입력(month)

코드 :

<form>
  <label for="expiry-date">유효 기간:</label>
  <input type="month" id="expiry-date" name="expiry-date">
</form>

HTML : 

유효 기간:

8. 연도와 주 입력(week)

코드 :

<form>
  <label for="weekInput">연도와 주 입력:</label><br>
  <input type="week" id="weekInput" name="weekInput">
</form>

HTML : 

연도와 주 입력:

9. 이메일 입력(email)

코드 :

<form>
  <label for="emailInput">이메일 입력:</label><br>
  <input type="email" id="emailInput" name="emailInput">
</form>

HTML : 

이메일 입력:

10. URL 주소 입력(url)

코드 :

<form>
  <label for="urlInput">URL 주소 입력:</label><br>
  <input type="url" id="urlInput" name="urlInput">
</form>

HTML : 

URL 주소 입력:

11. 전화번호 입력(tel)

코드 :

<form>
  <label for="telInput">전화번호 입력:</label><br>
  <input type="tel" id="telInput" name="telInput">
</form>

HTML : 

전화번호 입력:

12. 검색어 입력(search)

코드 :

<form>
  <label for="searchInput">검색어 입력:</label><br>
  <input type="search" id="searchInput" name="searchInput">
</form>

HTML : 

검색어 입력: