[HTML] <input> 태그의 type 속성

 

<input>태그의 type 속성에서 사용 가능한 유형

기본형 <input type="유형" [속성="속성 값">

ex) <input type="text" id="user-name" size="10">

 

로그인 창에서 아이디나 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등 <input> 태그를 사용해 사용자가 입력할 수 있는 형태는 매우 다양합니다. <input> 태그에서 입력 형태를 지정할 대 type속성을 사용하는데 다음 표는 <input> 태그의 type 속성에서 사용할 수 있는 유형들입니다. 여기 나열된 유형은 자주 사용하는 것이므로 모두 알아 두어야 합니다.

 

 

유형

설명

hidden

사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다.

text

한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.

search

검색 상자를 넣습니다.

tel

전화번호 입력 필드를 넣습니다

url

URL 주소를 입력할 수 있는 필드를 넣습니다.

email

메일 주소를 입력할 수 있는 필드를 넣습니다.

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

댓글

Designed by JB FACTORY