HTML5 폼 요소 ✅ input 타입, select, textarea 활용법

 

 

폼 요소는 사용자 입력을 받는 가장 기본적인 방법입니다.
HTML5에서는 더 다양한 input 타입과 속성이 추가되어,

브라우저만으로도 풍부한 사용자 경험을 제공할 수 있습니다.
이번 포스팅에서는 자주 쓰이는 폼 요소와 실무 활용 예제를 정리해드립니다.

---

🧾 1. <input> 태그

<input>은 가장 다양한 타입을 지원합니다.

📌 기본 구조

 

<input type="text" name="username" placeholder="아이디를 입력하세요">

📌 주요 타입 정리

타입	설명	예시
text	일반 텍스트 입력	이름, 아이디
password	비밀번호 입력 (가려짐)	로그인 비밀번호
email	이메일 형식만 허용	사용자 이메일
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 + 시맨틱 태그를 함께 쓰는 습관을 들이세요!