Ch.7 HTML 폼 — 사용자 입력 받기

다양한 입력 타입

text, email, password, number, date 등 input type을 구분할 수 있다radio, checkbox로 선택형 입력을 만들 수 있다select, textarea 태그를 사용할 수 있다

input에도 종류가 이렇게 많다고?

이메일 칸에는 자동으로 @ 검증이 생기고, 날짜 칸에는 달력이 뜹니다. input의 type만 바꿔도 브라우저가 알아서 도와줍니다.

입력 타입에 따라 브라우저 동작이 달라진다?

input type — 올바른 타입을 지정하면 모바일 키보드, 유효성 검사, UI가 자동으로 최적화됩니다.

article

핵심 내용

type 하나만 바꿔도 입력 UI가 완전히 달라집니다

<!-- 텍스트 계열 input -->
<input type="text" placeholder="일반 텍스트">
<input type="email" placeholder="user@mail.com">
<input type="password" placeholder="비밀번호">
<input type="number" min="0" max="100">
<input type="date">
<input type="tel" placeholder="010-1234-5678">
<input type="url" placeholder="https://...">

여러 옵션 중 고르는 선택형 입력도 있습니다

<!-- radio: 하나만 선택 (같은 name) -->
<input type="radio" name="lang" value="html" id="r1">
<label for="r1">HTML</label>
<input type="radio" name="lang" value="css" id="r2">
<label for="r2">CSS</label>

<!-- checkbox: 여러 개 선택 -->
<input type="checkbox" name="hobby" value="code" id="c1">
<label for="c1">코딩</label>
<input type="checkbox" name="hobby" value="game" id="c2">
<label for="c2">게임</label>

<!-- select: 드롭다운 메뉴 -->
<select name="country">
  <option value="">선택하세요</option>
  <option value="kr">한국</option>
  <option value="us">미국</option>
</select>

<!-- textarea: 여러 줄 텍스트 -->
<textarea name="bio" rows="4"
          placeholder="자기소개"></textarea>

radio = 같은 name 그룹에서 하나만 선택 (성별, 배송방법) checkbox = 여러 개 동시 선택 가능 (취미, 관심사) select = 드롭다운 목록에서 선택 (국가, 카테고리)

다양한 input 타입으로 회원가입 폼을 만들어봅시다

여러 옵션 중 하나만 선택 가능한 input type은?

textarea는 input 태그의 type 속성으로 지정한다

<input type="email">은 브라우저가 자동으로 이메일 형식을 검증한다

입력 타입 마스터!

key

핵심 용어

📝

text

일반 텍스트 입력 (기본값)

📧

email

이메일 형식 검증 + @ 키보드

🔒

password

입력 문자 마스킹 (●●●)

🔢

number

숫자만 입력 + 증감 버튼

📅

date

날짜 선택 달력 UI 자동 생성

edit_note

정리 노트

다양한 입력 타입

텍스트 계열

text
일반 텍스트 입력
email
이메일 형식 자동 검증
password
입력 내용이 마스킹 처리되어 보이지 않음
textarea
여러 줄 텍스트 입력 (input이 아닌 별도 태그)

선택 계열

radio
여러 중 하나만 선택 (동일 name 필수)
checkbox
복수 선택 가능
select
드롭다운 메뉴 — option 태그로 항목 구성
★

모바일에서 type="email"은 @ 키보드를, type="number"는 숫자 키패드를 자동 표시합니다.

check_circle

핵심 정리

  • 1text, email, password, number, date 등 다양한 input type
  • 2radio = 하나만 선택, checkbox = 여러 개 선택
  • 3select = 드롭다운, textarea = 여러 줄 텍스트

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작