HTML 인풋의 여러가지 타입

체크박스 checkbox

한 항목만 선택하는 경우

아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정됩니다.

<label>
  <input name="agreement" type="checkbox">
  동의합니다
</label>

여러 항목 중에서 몇 항목을 선택하는 경우

<input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰입니다. 예를 들자면 아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정됩니다. 폼을 전송했을 때 쿼리 문자열에서는 &film=action&film=comedy처럼 전송됩니다.

<label for="film">좋아하는 영화 장르</label>
<label>
  <input type="checkbox" name="film" value="action">
  액션
</label>
<label>
  <input type="checkbox" name="film" value="comedy">
  코미디
</label>
<label>
  <input type="checkbox" name="film" value="romance">
  로맨스
</label>

 

날짜 date

선택한 날짜로 값을 지정할 수 있습니다.

<input name="birthdate" type="date">

 

파일 file

정말 자주 쓰이는 타입이어서 이건 따로 기억해 둡시다. 파일을 선택할 수 있는 인풋인데요.

<input name="avatar" type="file">

파일 형식 지정하기

accept라는 속성을 써서 허용할 파일 확장자들을 정해 줄 수 있습니다.

<input name="avatar" type="file" accept=".png,.jpg">

파일 개수 지정하기

multiple이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있습니다.

<input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
<input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->

 

이메일 email

텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사해 줍니다.

<input name="email" type="email">

 

숫자 number

숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있습니다.

<input type="number">

<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">

 

비밀번호 password

값을 입력했을 때 입력한 내용이 가려집니다.

<input type="password">

 

라디오 radio

동그란 선택 버튼입니다. 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있습니다. value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의 value 값을 입력하도록 할 수 있습니다. 예를 들어서 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어가게 됩니다.

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

 

범위 range

범위 안에서 선택할 수 있는 인풋입니다.

<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">

 

텍스트 text

인풋 타입의 기본 값입니다. 일반적인 텍스트를 입력할 때 사용합니다.

<input name="nickname" type="text">

 

옵션 선택 <select>

미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그입니다. <select> 태그 안에 <option> 태그를 value와 함께 사용하면 되는데요. 예를 들어서 아래 코드에서 드라마를 선택하면 genre의 값이 drama가 됩니다.

<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
  <option value="drama">드라마</option>
  <option value="documentary">다큐멘터리</option>
  <option value="vareity">예능</option>
</select>

 

긴 글 <textarea>

긴 글을 입력할 수 있는 인풋입니다. <input> 태그와 달리 반드시 종료 태그(</textarea>)를 써 주어야 합니다.

<textarea name="content"></textarea>

---

[유용한 인풋 태그 속성]

 

인풋 태그에서 사용할 수 있는 유용한 속성들을 소개해 드릴게요.

값이 비어있을 때 보여주는 값 placeholder

값이 비어있는 인풋에 설명이 적혀있는 것 보신 적 있나요? 예를 들자면 아래 구글 로그인 화면에 있는 "이메일 또는 휴대전화" 같은 건데요. 이런 걸 "플레이스홀더"라고 부릅니다.

이런 값을 추가하려면 placeholder라는 속성을 쓰면 됩니다.

<input name="username" placeholder="이메일 또는 휴대전화">

이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용하면 됩니다.

input::placeholder {
  color: #dddddd;
}

 

반드시 입력해야 하는 값 required

폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다.

<input name="email" type="email" required>

자동 완성 autocomplete

예전에 입력한 값들을 보여주는 인풋을 보신 적 있나요? 이건 autocomplete이라는 속성을 써서 그런 건데요. 이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 줍니다.

참고로 required와 달리 on이라는 값을 지정해 주어야 동작하니까 꼭 기억해 주세요.

<input name="search" type="text" autocomplete="on">

만약에 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고, 전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있는데요. 이런 건 특히 스마트폰으로 사이트를 접속했을 때 유용하겠죠?

<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">

이것 말고도 다양한 속성 값이 있는데요. 혹시 더 궁금하신 분들은 MDN 문서의 HTTP attribute: autocomplete를 참고해 보세요.