[HTML] <input>태그 종류

1. 체크박스 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>

 

2. 날짜 date

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

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

 

 3. 파일 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"> <!-- 한 개만 선택 가능 -->

 

4. 이메일 email

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

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

 

5. 숫자 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">

 

6. 비밀번호 password

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

<input type="password">

 

7. 라디오 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>

 

8. 범위 range

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

 

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

 

9. 텍스트 text

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

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

 

10. 옵션 선택 <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>

 

11. 긴 글 <textarea>

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

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