(HTML코딩일기) 여러 가지 인풋

 

<input> 태그에서 type 속성을 password로 하면 입력한 내용이 가려지는 비밀번호 인풋을 만들 수 있습니다. type에 쓸 수 있는 여러 가지 값들을 알아봅시다.

 

1. 체크박스 checkbox

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

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

<label>
  <input name="agreement" type="chechbox">
  동의합니다
</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>

2. 날짜 date

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

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

3. 파일 file

파일을 선택할 수 있는 인풋입니다.

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

1) 파일 형식 지정하기

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

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

2) 파일 개수 지정하기

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

<input name="photo" 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" min="10" type="range">

9. 텍스트 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>