통합 요약노트
Ch.7 HTML 폼 — 사용자 입력 받기
폼 구조, 입력 타입, 유효성 검사
이 챕터의 내용
1
폼의 기본 구조
<form> — 사용자로부터 데이터를 수집하고 서버로 전송하는 HTML의 핵심 요소입니다.
폼은 사용자 입력을 서버로 보내는 컨테이너입니다
폼 데이터를 어디로, 어떻게 보낼지 결정하는 두 속성
기본 로그인 폼을 직접 만들어봅시다
- <form>은 입력 데이터를 서버로 전송하는 컨테이너
- GET = URL 노출 (검색), POST = URL 숨김 (로그인)
- label의 for와 input의 id를 일치시켜 연결
2
다양한 입력 타입
input type — 올바른 타입을 지정하면 모바일 키보드, 유효성 검사, UI가 자동으로 최적화됩니다.
type 하나만 바꿔도 입력 UI가 완전히 달라집니다
여러 옵션 중 고르는 선택형 입력도 있습니다
다양한 input 타입으로 회원가입 폼을 만들어봅시다
- text, email, password, number, date 등 다양한 input type
- radio = 하나만 선택, checkbox = 여러 개 선택
- select = 드롭다운, textarea = 여러 줄 텍스트
3
유효성 검사와 스타일
HTML 유효성 검사 — required, minlength, pattern으로 서버 전송 전에 입력을 검증합니다.
HTML만으로도 입력을 검증할 수 있습니다
유효한 입력에는 초록색, 잘못된 입력에는 빨간색!
유효성 검사 + CSS로 완성된 폼을 만들어봅시다
- required, minlength, pattern으로 입력 유효성 검사
- :valid / :invalid CSS로 실시간 시각적 피드백
- HTML 검증만으로 JavaScript 없이 기본 검증 가능
key
핵심 용어 모음
📋
<form>
입력 필드를 감싸는 컨테이너. action/method 지정
🏷️
<label>
입력 필드의 이름표. for 속성으로 input과 연결
✏️
<input>
사용자가 데이터를 입력하는 필드
🔘
<button>
폼 제출 또는 리셋 버튼
📝
text
일반 텍스트 입력 (기본값)
📧email
이메일 형식 검증 + @ 키보드
🔒
password
입력 문자 마스킹 (●●●)
🔢
number
숫자만 입력 + 증감 버튼
📅
date
날짜 선택 달력 UI 자동 생성
🚨
required
반드시 입력해야 제출 가능
📏
minlength
최소 글자 수 제한
📐
maxlength
최대 글자 수 제한
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기