[HTML] <input> 태그 정리

input 태그

같은 <input> 태그이지만 type 속성을 추가하면 여러가지 <input> 태그를 만들 수 있다.

 

---

체크박스 checkbox

1. 한 항목만 선택하는 경우

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

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

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

<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>