[HTML] <input> 태그의 type 속성
- IT/HTML
- 2020. 5. 6.
<input>태그의 type 속성에서 사용 가능한 유형
기본형 <input type="유형" [속성="속성 값">
ex) <input type="text" id="user-name" size="10">
로그인 창에서 아이디나 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등 <input> 태그를 사용해 사용자가 입력할 수 있는 형태는 매우 다양합니다. <input> 태그에서 입력 형태를 지정할 대 type속성을 사용하는데 다음 표는 <input> 태그의 type 속성에서 사용할 수 있는 유형들입니다. 여기 나열된 유형은 자주 사용하는 것이므로 모두 알아 두어야 합니다.
유형 |
설명 |
hidden |
사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다. |
text |
한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다. |
search |
검색 상자를 넣습니다. |
tel |
전화번호 입력 필드를 넣습니다 |
url |
URL 주소를 입력할 수 있는 필드를 넣습니다. |
|
메일 주소를 입력할 수 있는 필드를 넣습니다. |
password |
비밀번호를 입력할 수 있는 필드를 넣습니다. |
datetime |
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다. |
datetime-local |
사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다. |
date |
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다. |
month |
사용자 지역을 기준으로 날짜(연, 월)를 넣습니다. |
week |
사용자 지역을 기준으로 날짜(연, 주)를 넣습니다. |
time |
사용자 지역을 기준으로 날짜(시, 분, 초, 분할 초)을 넣습니다. |
number |
숫자를 조절할 수 있는 화살표를 넣습니다. |
range |
숫자를 조절할 수 있는 슬라이드 막대를 넣습니다. |
color |
색상 표를 넣습니다. |
checkbox |
주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣습니다. |
radio |
주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다. |
file |
파일을 첨부할 수 있는 버튼을 넣습니다. |
submit |
사진 전송 버튼을 넣습니다. |
image |
submit 버튼 대신 사용할 이미지를 넣습니다. |
reset |
리셋 버튼을 넣습니다. |
button |
버튼을 넣습니다. |
'IT > HTML' 카테고리의 다른 글
[HTML] readonly 속성 - 읽기 전용 필드 만들기 (0) | 2020.05.08 |
---|---|
[HTML] radio 버튼, checkbox (0) | 2020.05.07 |
[HTML] 자동 완성 기능 - autocomplete (0) | 2020.05.06 |
[HTML] SVG 이미지 (0) | 2020.04.30 |
[HTML] iframe (0) | 2020.04.30 |