HTML, CSS
HTML5 폼 요소 ✅ input 타입, select, textarea 활용법
jonbeo
2025. 10. 15. 09:48
반응형
폼 요소는 사용자 입력을 받는 가장 기본적인 방법입니다.
HTML5에서는 더 다양한 input 타입과 속성이 추가되어,
브라우저만으로도 풍부한 사용자 경험을 제공할 수 있습니다.
이번 포스팅에서는 자주 쓰이는 폼 요소와 실무 활용 예제를 정리해드립니다.
🧾 1. <input> 태그
<input>은 가장 다양한 타입을 지원합니다.
📌 기본 구조
<input type="text" name="username" placeholder="아이디를 입력하세요">📌 주요 타입 정리
| 타입 | 설명 | 예시 |
| text | 일반 텍스트 입력 | 이름, 아이디 |
| password | 비밀번호 입력 (가려짐) | 로그인 비밀번호 |
| 이메일 형식만 허용 | 사용자 이메일 | |
| url | URL 형식만 허용 | 홈페이지 주소 |
| number | 숫자 전용 입력 | 나이, 수량 |
| tel | 전화번호 입력 | 010-1234-5678 |
| date | 날짜 선택 | 생년월일 |
| time | 시간 선택 | 예약 시간 |
| datetime-local | 날짜+시간 입력 | 스케줄 등록 |
| color | 색상 선택기 | 테마 색상 선택 |
| file | 파일 업로드 | 이미지 첨부 |
| checkbox | 체크박스 | 관심사 선택 |
| radio | 라디오 버튼 (단일 선택) | 성별 선택 |
| range | 슬라이더 | 볼륨 조절 |
🗂️ 2. <select> 태그
드롭다운 메뉴를 만들 때 사용합니다.
<label for="country">국가 선택</label>
<select id="country" name="country">
<option value="kr">대한민국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
📌 multiple 속성을 사용하면 다중 선택 가능
📌 optgroup으로 그룹화 가능
<select>
<optgroup label="아시아">
<option>한국</option>
<option>일본</option>
</optgroup>
<optgroup label="유럽">
<option>독일</option>
<option>프랑스</option>
</optgroup>
</select>
📝 3. <textarea> 태그
여러 줄 입력을 받을 때 사용합니다. (예: 댓글, 메모)
<textarea name="comment" rows="5" cols="30" placeholder="의견을 작성해주세요"></textarea>- rows, cols: 기본 크기 설정
- CSS로 크기 조정 가능
- resize: none; 속성을 추가하면 크기 변경 불가
🔧 4. HTML5 폼 속성
| 속성 | 설명 |
| required | 필수 입력 |
| placeholder | 힌트 텍스트 |
| pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" | 정규식 검증 |
| min, max, step | 숫자/날짜 범위 지정 |
| readonly | 읽기 전용 |
| disabled | 비활성화 |
| autocomplete="off" | 자동완성 끄기 |
💡 5. 실무 팁
- ✅ label 태그와 함께 사용 → 접근성 & UX 향상
- ✅ required, pattern 활용 → 기본 검증은 브라우저에 맡기기
- ✅ CSS와 JS를 결합해 더 나은 사용자 경험 제공 (예: input focus 스타일링, 에러 메시지 표시)
- ✅ 모바일 고려 → tel, email, number 타입은 모바일 키보드가 최적화됨
📝 마무리 정리
- HTML5 폼 요소는 사용자 입력 UX를 개선하고, 기본적인 검증까지 자동화할 수 있습니다.
- 올바른 태그와 속성을 사용하면 접근성, SEO, 유지보수성 모두 좋아집니다.
- label + 시맨틱 태그를 함께 쓰는 습관을 들이세요!
반응형