사용자 입력 받기 — 폼과 버튼 | 파란여우

인터넷에서 뭔가를 입력하는 모든 곳

로그인 화면에서 아이디·비밀번호를 입력하는 창, 구글에서 검색어를 입력하는 창, 쇼핑몰 주문할 때 배송지를 입력하는 창.

이 모든 것이 HTML의 폼(form) 으로 만들어집니다.

폼은 사용자로부터 정보를 입력받아 서버로 전달하는 역할을 합니다. 지금 당장 서버까지 연결하지 않아도 폼의 생김새는 HTML만으로 만들 수 있습니다.

기본 폼 구조

<form action="/submit" method="post">
  <!-- 입력 요소들 -->
  <button type="submit">제출</button>
</form>

action: 폼 데이터를 전송할 서버 주소
method: 전송 방식 (get 또는 post)

지금은 action과 method를 몰라도 됩니다. 폼의 모양을 만드는 것에 집중해 봅시다.

텍스트 입력 — `<input>`

<input> 태그는 사용자가 텍스트를 입력하는 상자를 만듭니다.

<input type="text" placeholder="이름을 입력하세요" />

type 속성에 따라 완전히 다른 입력 상자가 됩니다.

type 값	모양 / 기능
`text`	일반 텍스트 입력
`password`	비밀번호 (입력값이 ●●● 로 가려짐)
`email`	이메일 형식 검사 포함
`number`	숫자만 입력 가능, 화살표 버튼 생김
`date`	날짜 선택 달력
`checkbox`	체크박스 (여러 개 선택 가능)
`radio`	라디오 버튼 (하나만 선택)
`file`	파일 업로드 버튼
`range`	슬라이더 (최솟값~최댓값)
`color`	색상 선택기

<!-- 텍스트 -->
<input type="text" placeholder="아이디" />

<!-- 비밀번호 -->
<input type="password" placeholder="비밀번호" />

<!-- 이메일 -->
<input type="email" placeholder="이메일 주소" />

<!-- 날짜 -->
<input type="date" />

<!-- 색상 선택기 -->
<input type="color" />

레이블 — `<label>`

입력 상자 앞에 설명을 붙이려면 <label> 태그를 씁니다.

<label for="username">아이디</label>
<input type="text" id="username" placeholder="아이디를 입력하세요" />

<label> 의 for 속성과 <input> 의 id 속성이 같은 값이면 레이블을 클릭해도 입력 상자가 활성화됩니다. 접근성을 위해 항상 <label> 을 함께 써주는 게 좋습니다.

체크박스와 라디오 버튼

체크박스 — 여러 개 선택 가능

<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 속성을 가진 라디오 버튼 중 하나만 선택됩니다.

<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>`

<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>`

긴 텍스트(자기소개, 문의 내용 등)를 입력받을 때 씁니다.

<label for="bio">자기소개:</label>
<textarea id="bio" name="bio" rows="5" cols="40" placeholder="자기소개를 입력하세요...">
</textarea>

rows: 세로 줄 수
cols: 가로 글자 수 (대략적인 너비)

버튼 — `<button>`

<!-- 폼 제출 버튼 -->
<button type="submit">로그인</button>

<!-- 일반 버튼 (클릭 시 동작은 JavaScript로 처리) -->
<button type="button">확인</button>

<!-- 폼 초기화 -->
<button type="reset">다시 입력</button>

간단한 로그인 폼 만들기

지금까지 배운 내용을 조합해 로그인 폼을 만들어 봅시다.

<!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 태그를 배웁니다.

인터넷에서 뭔가를 입력하는 모든 곳

기본 폼 구조

텍스트 입력 — <input>

레이블 — <label>