인터넷에서 뭔가를 입력하는 모든 곳#
로그인 화면에서 아이디·비밀번호를 입력하는 창, 구글에서 검색어를 입력하는 창, 쇼핑몰 주문할 때 배송지를 입력하는 창.
이 모든 것이 HTML의 폼(form) 으로 만들어집니다.
폼은 사용자로부터 정보를 입력받아 서버로 전달하는 역할을 합니다. 지금 당장 서버까지 연결하지 않아도 폼의 생김새는 HTML만으로 만들 수 있습니다.
기본 폼 구조#
HTML
<form action="/submit" method="post">
<!-- 입력 요소들 -->
<button type="submit">제출</button>
</form>action: 폼 데이터를 전송할 서버 주소method: 전송 방식 (get또는post)
지금은 action과 method를 몰라도 됩니다. 폼의 모양을 만드는 것에 집중해 봅시다.
텍스트 입력 — <input>#
<input> 태그는 사용자가 텍스트를 입력하는 상자를 만듭니다.
HTML
<input type="text" placeholder="이름을 입력하세요" />type 속성에 따라 완전히 다른 입력 상자가 됩니다.
| type 값 | 모양 / 기능 |
|---|---|
text | 일반 텍스트 입력 |
password | 비밀번호 (입력값이 ●●● 로 가려짐) |
email | 이메일 형식 검사 포함 |
number | 숫자만 입력 가능, 화살표 버튼 생김 |
date | 날짜 선택 달력 |
checkbox | 체크박스 (여러 개 선택 가능) |
radio | 라디오 버튼 (하나만 선택) |
file | 파일 업로드 버튼 |
range | 슬라이더 (최솟값~최댓값) |
color | 색상 선택기 |
HTML
<!-- 텍스트 -->
<input type="text" placeholder="아이디" />
<!-- 비밀번호 -->
<input type="password" placeholder="비밀번호" />
<!-- 이메일 -->
<input type="email" placeholder="이메일 주소" />
<!-- 날짜 -->
<input type="date" />
<!-- 색상 선택기 -->
<input type="color" />레이블 — <label>#
입력 상자 앞에 설명을 붙이려면 <label> 태그를 씁니다.
HTML
<label for="username">아이디</label>
<input type="text" id="username" placeholder="아이디를 입력하세요" /><label> 의 for 속성과 <input> 의 id 속성이 같은 값이면 레이블을 클릭해도 입력 상자가 활성화됩니다. 접근성을 위해 항상 <label> 을 함께 써주는 게 좋습니다.
체크박스와 라디오 버튼#
체크박스 — 여러 개 선택 가능#
HTML
<p>좋아하는 과목을 모두 선택하세요:</p>
<label>
<input type="checkbox" name="subject" value="math" /> 수학
</label>
<label>
<input type="checkbox" name="subject" value="english" /> 영어
</label>
<label>
<input type="checkbox" name="subject" value="science" /> 과학
</label>라디오 버튼 — 하나만 선택#
같은 name 속성을 가진 라디오 버튼 중 하나만 선택됩니다.
HTML
<p>성별:</p>
<label>
<input type="radio" name="gender" value="male" /> 남
</label>
<label>
<input type="radio" name="gender" value="female" /> 여
</label>
<label>
<input type="radio" name="gender" value="other" /> 기타
</label>드롭다운 목록 — <select>#
HTML
<label for="city">사는 지역:</label>
<select id="city" name="city">
<option value="">-- 선택하세요 --</option>
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="daegu">대구</option>
<option value="incheon">인천</option>
</select>여러 줄 입력 — <textarea>#
긴 텍스트(자기소개, 문의 내용 등)를 입력받을 때 씁니다.
HTML
<label for="bio">자기소개:</label>
<textarea id="bio" name="bio" rows="5" cols="40" placeholder="자기소개를 입력하세요...">
</textarea>rows: 세로 줄 수cols: 가로 글자 수 (대략적인 너비)
버튼 — <button>#
HTML
<!-- 폼 제출 버튼 -->
<button type="submit">로그인</button>
<!-- 일반 버튼 (클릭 시 동작은 JavaScript로 처리) -->
<button type="button">확인</button>
<!-- 폼 초기화 -->
<button type="reset">다시 입력</button>간단한 로그인 폼 만들기#
지금까지 배운 내용을 조합해 로그인 폼을 만들어 봅시다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>로그인</title>
</head>
<body>
<h1>로그인</h1>
<form>
<div>
<label for="id">아이디</label><br />
<input type="text" id="id" name="id" placeholder="아이디를 입력하세요" />
</div>
<br />
<div>
<label for="pw">비밀번호</label><br />
<input type="password" id="pw" name="pw" placeholder="비밀번호를 입력하세요" />
</div>
<br />
<label>
<input type="checkbox" name="remember" /> 로그인 상태 유지
</label>
<br /><br />
<button type="submit">로그인</button>
<button type="reset">초기화</button>
</form>
</body>
</html>직접 해보기 ✏️#
"학급 설문지" HTML 페이지를 만들어 보세요. 아래 항목을 모두 포함해야 합니다.
- 이름 입력 (텍스트)
- 학년 선택 (드롭다운: 1학년, 2학년, 3학년)
- 좋아하는 과목 선택 (체크박스: 3개 이상)
- 급식 만족도 (라디오: 매우 만족 / 만족 / 보통 / 불만족)
- 학교에 바라는 점 (textarea)
- 제출 버튼
정리#
| 태그 | 용도 |
|---|---|
<form> | 폼 전체 컨테이너 |
<input type="text"> | 텍스트 입력 |
<input type="password"> | 비밀번호 입력 |
<input type="checkbox"> | 체크박스 (복수 선택) |
<input type="radio"> | 라디오 버튼 (단일 선택) |
<select><option> | 드롭다운 목록 |
<textarea> | 여러 줄 텍스트 입력 |
<button> | 버튼 |
<label> | 입력 요소 설명 레이블 |
다음 편에서는 페이지 구조를 더 의미 있게 만드는 시맨틱 HTML 태그를 배웁니다.
