📋
EPISODE 05
input 다양한 타입 · select · textarea · 검증
폼 (Form)
사용자로부터 데이터를 입력받는 폼의 모든 것 — form 태그, input의 다양한 type, label, select, textarea, fieldset, 그리고 입력 검증 속성까지.
HTMLforminput검증
소요 시간
⏱ 60분
난이도
📊 초보
선수 조건
🎯 html-04
결과물
회원가입·설문조사 형태의 폼 페이지
이 강의에서 배우는 것
- 1form의 action/method 속성과 GET/POST 차이를 이해한다
- 2input의 다양한 type(text/email/password/checkbox/radio/file/date 등)을 적재적소에 사용한다
- 3label로 입력 요소와 설명을 연결한다 (접근성)
- 4fieldset/legend로 폼을 그룹화한다
- 5required/pattern/min/max 같은 검증 속성을 적용한다
1. form 태그
html
<form action="처리할 URL" method="get 또는 post">
<!-- 입력 요소들 -->
</form>GET vs POST
html
<!-- GET: URL에 데이터 노출, 검색 등 -->
<form action="/search" method="get">
<input type="text" name="query">
<button type="submit">검색</button>
</form>
<!-- 제출 시 URL: /search?query=값 -->
<!-- POST: URL에 노출 X, 회원가입·로그인 -->
<form action="/login" method="post">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>2. input 타입별
html
<input type="text" name="username" placeholder="이름" maxlength="20">
<input type="email" name="email" placeholder="example@email.com">
<input type="password" name="password" minlength="8">
<input type="number" name="age" min="0" max="150" step="1">
<input type="checkbox" name="hobby" value="reading" checked>
<input type="radio" name="gender" value="male">
<input type="file" name="profile" accept="image/*">
<input type="date" name="birthday" min="1900-01-01" max="2026-12-31">
<input type="range" name="rate" min="1" max="10" value="5">
<input type="hidden" name="user_id" value="12345">
<input type="tel" placeholder="010-0000-0000">
<input type="url" placeholder="https://example.com">
<input type="color">
<input type="search" placeholder="검색">3. label
html
<!-- 방법 1: for + id (권장) -->
<label for="username">이름:</label>
<input type="text" id="username" name="username">
<!-- 방법 2: 감싸기 -->
<label>
이름:
<input type="text" name="username">
</label>💡
라벨을 클릭하면 연결된 입력 요소가 포커스됩니다. 스크린리더도 label을 읽으므로 접근성에 필수.
4. select — 드롭다운
html
<select name="city">
<option value="">-- 선택하세요 --</option>
<option value="seoul" selected>서울</option>
<option value="busan">부산</option>
</select>
<!-- optgroup으로 그룹화 -->
<select name="job">
<optgroup label="IT 분야">
<option value="dev">개발자</option>
<option value="design">디자이너</option>
</optgroup>
<optgroup label="일반">
<option value="sales">영업</option>
</optgroup>
</select>
<!-- 다중 선택 -->
<select name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>5. textarea — 여러 줄 입력
html
<label for="message">메시지:</label>
<textarea id="message" name="message" rows="5" cols="40"
placeholder="여기에 입력하세요..." maxlength="500"></textarea>6. button
html
<button type="submit">제출하기</button>
<button type="reset">다시 작성</button>
<button type="button" onclick="alert('클릭!')">일반 버튼</button>7. fieldset / legend — 폼 그룹화
html
<form>
<fieldset>
<legend>개인 정보</legend>
<label for="name">이름:</label>
<input type="text" id="name">
</fieldset>
<fieldset>
<legend>계정 정보</legend>
<label for="pw">비밀번호:</label>
<input type="password" id="pw">
</fieldset>
<button type="submit">가입하기</button>
</form>8. 입력 검증 속성
html
<input type="text" required> <!-- 필수 -->
<input type="text" placeholder="홍길동"> <!-- 힌트 -->
<input type="text" disabled> <!-- 비활성화 -->
<input type="text" value="값" readonly> <!-- 읽기 전용 -->
<input type="text" minlength="2" maxlength="20"> <!-- 길이 -->
<input type="number" min="1" max="150"> <!-- 숫자 범위 -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
placeholder="010-1234-5678"> <!-- 정규식 -->