HTML INPUT의 종류

코드잇 스프린트 과정을 하면서 검색바를 만들기 위해서 고민하던 중 input type에 search 가 있다는 사실을 알게 되었다.

내가 알고 있던건 type, password 2개 뿐이었는데 충격을 받아서 정리학 ㅔ되었다.

1. text

가장 기본적인 입력 타입으로, 사용자가 자유롭게 텍스트를 입력

<input type="text" id="name" name="name" placeholder="이름을 입력하세요">

2. password

패스워드 입력 필드로, 입력된 텍스트를 별표(*)나 점(•)으로 표현

<input type="password" id="password" name="password" placeholder="비밀번호">

3. email

이메일 주소 입력을 위한 필드로, 이메일 형식을 자동으로 검증합니다.

<input type="email" id="email" name="email" placeholder="이메일 주소">

4. number

숫자 입력을 위한 필드로, 일부 브라우저에서는 숫자를 증가, 감소 등을 사용

<input type="number" id="quantity" name="quantity" min="1" max="5">

5. range

슬라이더 형태의 입력 필드로, 주어진 범위 내에서 값을 선택

<input type="range" id="volume" name="volume" min="0" max="100">

6. date

날짜를 입력 받기 위한 필드로, 대부분의 브라우저에서 날짜 선택기를 제공

<input type="date" id="birthday" name="birthday">

7. color

색상 선택을 위한 필드로, 색상 선택기를 제공

<input type="color" id="favoriteColor" name="favoriteColor">

8. checkbox

체크 박스로, 하나 이상의 옵션을 선택

<input type="checkbox" id="subscribe" name="subscribe" value="newsletter"> 뉴스레터 구독하기

9. radio

라디오 버튼으로, 주어진 옵션들 중 하나 만을 선택

<input type="radio" id="gender_male" name="gender" value="male"> 남성 
<input type="radio" id="gender_female" name="gender" value="female"> 여성

10. file

파일 선택을 위한 필드로, 사용자가 자신의 장치에서 하나 이상의 파일을 선택

<input type="file" id="myFile" name="myFile">

11. hidden

사용자에게 보이지 않는 입력 필드로, 폼 데이터를 서버로 전송할 때 사용

<input type="hidden" id="userId" name="userId" value="12345">

12. search

검색어 입력을 위한 필드로, 일부 브라우저에서는 입력 내용을 지울 수 있는 'x' 버튼을 제공

<input type="search" id="search-box" name="q" placeholder="검색어를 입력하세요">

13. tel

전화번호 입력을 위한 필드로, 전화번호 형식을 자동으로 검증할 수 있습니다.

<input type="tel" id="phone" name="phone" placeholder="전화번호">

14. url

URL 입력을 위한 필드로, URL 형식을 자동으로 검증

<input type="url" id="homepage" name="homepage" placeholder="웹사이트 주소">

15. time

시간을 입력받기 위한 필드로, 시간 선택기를 제공

<input type="time" id="alarm" name="alarm">