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

폼의 기본 구조

form, input, label, button 태그의 역할을 이해한다action과 method 속성의 차이를 설명할 수 있다기본적인 로그인 폼을 HTML로 작성할 수 있다

검색창, 로그인 화면 — 전부 '폼'입니다

구글 검색창에 키워드를 입력하고 엔터를 누르면, 그 데이터가 서버로 전송됩니다. 이 모든 과정의 시작이 HTML 폼입니다.

사용자 입력을 서버로 보내려면 어떻게 할까?

<form> — 사용자로부터 데이터를 수집하고 서버로 전송하는 HTML의 핵심 요소입니다.

article

핵심 내용

폼은 사용자 입력을 서버로 보내는 컨테이너입니다

<!-- 기본 폼 구조 -->
<form action="/login" method="POST">
  <label for="email">이메일</label>
  <input type="email" id="email" name="email">

  <label for="pw">비밀번호</label>
  <input type="password" id="pw" name="pw">

  <button type="submit">로그인</button>
</form>

폼 데이터를 어디로, 어떻게 보낼지 결정하는 두 속성

GET = 데이터가 URL에 보임 → 검색, 필터에 적합 POST = 데이터가 숨겨짐 → 로그인, 회원가입에 적합 비밀번호 같은 민감 정보는 반드시 POST로 전송!

기본 로그인 폼을 직접 만들어봅시다

비밀번호를 서버로 전송할 때 적절한 method 속성값은?

<label>의 for 속성과 <input>의 ___ 속성이 일치하면 서로 연결된다

다음 중 form의 method 속성에 사용하는 값은?

HTML 폼 기초 완성!

key

핵심 용어

📋

<form>

입력 필드를 감싸는 컨테이너. action/method 지정

🏷️

<label>

입력 필드의 이름표. for 속성으로 input과 연결

✏️

<input>

사용자가 데이터를 입력하는 필드

🔘

<button>

폼 제출 또는 리셋 버튼

edit_note

정리 노트

폼의 기본 구조

폼 핵심 태그

<form>
사용자 입력을 서버로 전송하는 컨테이너
<input>
텍스트, 비밀번호 등 입력 필드 생성
<label>
입력 필드의 설명 텍스트 (접근성 필수)
<button>
폼 제출 버튼 — type="submit"이 기본값

form 속성

action
데이터를 보낼 URL 주소 지정
method
GET(조회) 또는 POST(전송) 방식 선택
★

label의 for와 input의 id를 일치시키면 접근성과 사용성이 모두 향상됩니다.

image

시각 자료

다이어그램: wd-scene-forms
check_circle

핵심 정리

  • 1<form>은 입력 데이터를 서버로 전송하는 컨테이너
  • 2GET = URL 노출 (검색), POST = URL 숨김 (로그인)
  • 3label의 for와 input의 id를 일치시켜 연결

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

play_circle인터랙티브 레슨 시작