다양한 HTML input 타입과 태그
HTML에서는 다양한 input 태그를 사용하여 사용자로부터 다양한 종류의 데이터를 입력받을 수 있습니다. 이번 글에서는 자주 사용되는 input 타입과 관련 태그들을 소개하겠습니다.
1. 체크박스 (Checkbox)
체크박스를 사용하면 사용자가 여러 항목 중 하나 또는 여러 항목을 선택할 수 있습니다.
한 항목만 선택하는 경우:
<label>
<input name="agreement" type="checkbox">
동의합니다
</label>사용자가 "동의합니다"에 체크하면 agreement의 값이 on이 됩니다.
여러 항목 중에서 몇 항목을 선택하는 경우:
<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>여기서 "액션"과 "코미디"를 선택하면 film의 값으로 action과 comedy가 지정됩니다.
2. 날짜 (Date)
사용자가 날짜를 선택할 수 있는 인풋입니다.
<input name="birthdate" type="date">3. 파일 (File)
파일을 업로드할 수 있는 인풋입니다.
<input name="avatar" type="file">파일 형식 지정하기:
<input name="avatar" type="file" accept=".png,.jpg">여러 파일 선택하기:
<input name="photos" type="file" multiple>
<input name="avatar" type="file">4. 이메일 (Email)
이메일 주소를 입력받는 인풋입니다. 올바른 이메일 형식을 자동으로 검사해줍니다.
<input name="email" type="email">5. 숫자 (Number)
숫자를 입력받는 인풋입니다. 최소값, 최대값, 증가 단위를 설정할 수 있습니다.
<input type="number">
<input type="number" min="100" max="1000">
<input type="number" min="100" max="1000" step="100">6. 비밀번호 (Password)
비밀번호를 입력받는 인풋입니다. 입력한 내용이 가려집니다.
<input type="password">7. 라디오 버튼 (Radio)
여러 항목 중 하나만 선택할 수 있는 동그란 선택 버튼입니다.
<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)
미리 정해진 여러 값 중 하나를 선택할 수 있는 드롭다운 메뉴입니다.
<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="variety">예능</option>
</select>11. 긴 글 (Textarea)
여러 줄의 텍스트를 입력받을 수 있는 인풋입니다. 반드시 종료 태그가 필요합니다.
<textarea name="content"></textarea>결론
HTML의 다양한 인풋 타입과 태그를 사용하면 사용자가 다양한 형태의 데이터를 입력할 수 있습니다. 이 글에서 소개한 인풋 타입과 태그들을 활용하여 더 사용자 친화적인 웹 폼을 만들어보세요. 필요할 때마다 이 글을 참고하여 적절한 인풋 타입을 선택하면 좋습니다.
