<input>태그 1편에 이어 2편 시작하겠습니다. 이번 글도 <input>태그 속성값들을 하나씩 알아보겠습니다.
<input>태그 속성값 #2
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- week
총 11개의 <input>태그 속성값의 표시방법과 실제 웹페이지를 살펴보겠습니다.
① color
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 색상 <input type="color"> </form> </body> </html> | cs |
color의 기본 표시방법입니다. 색상 버튼을 선택하면 원하는 색상을 고를 수 있습니다.
② date
date는 날짜(연도/월/일) 입력란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 생년월일 <input type="date"> </form> </body> </html> | cs |
date의 기본 표시방법이며 위와 같이 날짜를 선택할 수 있습니다.
③ datetime-local
datetime-local은 날짜(연도/월/일)와 시간 입력란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 생년월일시 <input type="datetime-local"> </form> </body> </html> | cs |
기본 표시방법입니다. 달력 아이콘을 클릭하면 현재 날짜, 현재 시간을 기준으로 표시되어있고 원하는 날짜와 시간을 선택할 수 있습니다.
④ month
month는 날짜 중 연도와 월만 선택할 수 있는 입력란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 해당연월 <input type="month"> </form> </body> </html> | cs |
달력 아이콘을 클릭해서 연도와 달을 입력할 수 있습니다.
⑤ number
number은 숫자입력란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 숫자 <input type="number"> </form> </body> </html> | cs |
숫자입력란에 마우스를 갖다대면 우측 상하 화살표가 뜹니다. 상하 화살표를 이용해 숫자를 입력해줍니다.
숫자입력란을 클릭해서 키보드로 원하는 숫자를 넣을 수도 있습니다.
⑥ range
range는 범위를 선택하는 type속성값입니다.
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 범위 <input type="range"> </form> </body> </html> | cs |
type속성값 range의 기본 표시방법입니다. 화면 로드 시 range의 기본값(default)은 중간값으로 맞춰져있습니다. 마우스로 해당 범위를 조정할 수 있습니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 범위 <input type="range" min="0" max="10" value="3"> </form> </body> </html> | cs |
type속성값이 range인 <input>태그에 min(최소값), max(최대값), value(기본값)속성을 추가해줄 수 있습니다.
⑦ search
search는 말 그대로 검색 입력란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 검색 <input type="search"> </form> </body> </html> | cs |
search의 기본값입니다. search속성값을 가진 <input>태그 옆에 버튼을 하나 만들어주고 버튼을 클릭하면 해당 검색어가 검색되게끔 만들 수 있습니다.
⑧ tel
tel은 전화번호 입력란입니다.
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 전화번호 <input type="tel" name="tel"> </form> </body> </html> | cs |
type속성값에 tel를 넣어주면 됩니다. name속성값은 사용해도 되고 안하셔도 무방합니다.
전화번호를 넣을 수 있는 입력란이 생깁니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .text-gray{ color: gray; } </style> </head> <body> <form> 전화번호 <input type="tel" name="tel"> <sub class="text-gray">'-' 빼고 입력해주세요.</sub> </form> </body> </html> | cs |
사용자마다 해석의 정도가 다르기 때문에 전화번호의 숫자만 입력하는지 하이픈(-)도 포함해서 입력하는지 알 수 없으므로 옆에 <sub>태그를 넣어주었습니다.
<sub>태그에 class속성값을 활용해 <head>안 <style>에서 색상을 변경했습니다.
⑨ time
time은 시간만 입력하는 type속성값입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 시간 선택 <input type="time"> </form> </body> </html> | cs |
시계 아이콘을 클릭해 시간을 입력할 수 있습니다.
⑩ week
week는 선택연도의 주를 입력하는 type속성값입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 주 선택 <input type="week"> </form> </body> </html> | cs |
연도와 달을 선택하고 날짜를 선택하면 자동으로 해당연도의 몇 번째 주인지 입력됩니다.
email도 말 그대로 email 주소를 입력하는 란입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 이메일 <input type="email"> </form> </body> </html> | cs |
이메일 입력란이 생성됩니다. @ 이후 글자를 사용자가 입력하도록 하지 않고 <select>, <optgroup>, <option>을 이용해 선택하도록 만들 수도 있습니다.
'IT > HTML' 카테고리의 다른 글
| HTML-input태그 #1 (0) | 2020.12.09 |
|---|---|
| HTML - form태그 (0) | 2020.11.26 |
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
댓글