폼과 입력

폼은 사용자에게서 정보를 입력받는 창구입니다. 로그인, 검색, 회원가입, 설문 등 거의 모든 상호작용이 폼으로 시작됩니다. 이번 강의에서는 form과 다양한 입력 요소를 다룹니다.

학습 목표

• form의 action, method를 이해한다.
• 여러 종류의 input을 상황에 맞게 사용한다.
• label로 입력 항목을 명확히 연결한다.
• select, textarea, button을 사용한다.

form 기본

form은 입력 요소를 담는 컨테이너입니다. action은 데이터를 보낼 주소, method는 전송 방식(get 또는 post)입니다.

<form action="/login" method="post">
  <input type="text" name="username" />
  <button type="submit">로그인</button>
</form>

get은 데이터를 URL에 붙여 보내고(검색 등), post는 본문에 담아 보냅니다(로그인, 가입 등). 모든 입력값은 name 속성을 기준으로 서버에 전달됩니다.

⚠️ 주의 — name이 없는 입력 요소의 값은 서버로 전송되지 않습니다. 데이터를 받아야 하는 입력에는 반드시 name을 지정하세요.

input의 종류

input은 type 속성에 따라 모습과 동작이 달라집니다.

<input type="text" name="name" placeholder="이름" />
<input type="email" name="email" />
<input type="password" name="pw" />
<input type="number" name="age" min="0" max="120" />
<input type="checkbox" name="agree" value="yes" />
<input type="radio" name="gender" value="m" />
<input type="date" name="birth" />
<input type="file" name="photo" />

💡 TIP — 같은 name을 가진 radio들은 하나의 그룹으로 묶여 그중 하나만 선택됩니다.

label로 연결하기

label은 입력 항목의 이름표입니다. for를 입력의 id와 맞추면 라벨을 클릭해도 입력에 포커스가 갑니다.

<label for="email">이메일</label>
<input type="email" id="email" name="email" />

<!-- 감싸는 방식도 가능합니다 -->
<label>
  <input type="checkbox" name="agree" /> 약관에 동의합니다
</label>

💡 TIP — label은 접근성에 매우 중요합니다. 라벨이 없으면 스크린 리더가 무엇을 입력하는 칸인지 알 수 없습니다.

textarea와 select

여러 줄 입력은 textarea, 목록에서 고르는 입력은 select를 사용합니다.

<label for="memo">메모</label>
<textarea id="memo" name="memo" rows="4"></textarea>

<label for="city">도시</label>
<select id="city" name="city">
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
</select>

각 option의 value가 실제 전송되는 값이고, 태그 사이의 글자는 화면에 보이는 라벨입니다.

button의 type

button에는 세 가지 type이 있습니다.

<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">일반 버튼</button>

폼 안의 버튼은 기본값이 submit이라 클릭 시 폼이 전송됩니다. 자바스크립트로만 동작하게 하려면 type="button"을 명시해야 합니다.

⚠️ 주의 — 폼 안에서 type을 적지 않은 버튼은 자동으로 제출 버튼이 됩니다. 의도치 않은 전송을 막으려면 type="button"을 꼭 지정하세요.

요약

• form의 action은 전송 주소, method는 전송 방식입니다.
• 입력값은 name 기준으로 전송되며 name이 없으면 전송되지 않습니다.
• input은 type으로 종류가 정해집니다.
• label의 for를 입력 id와 맞춰 접근성을 확보합니다.
• 폼 안 버튼의 기본 type은 submit입니다.

연습문제

1. 이메일과 비밀번호를 입력받는 로그인 폼을 작성하세요.
2. 각 입력에 클릭 가능한 label을 연결하세요.
3. 서울/부산/대구 중 하나를 고르는 select를 작성하세요.
4. 폼을 전송하지 않는 일반 버튼을 작성하세요.

힌트 — label의 for와 input의 id가 같아야 연결됩니다.