HTML

입력창과 버튼으로 폼 만들기

label은 입력 목적을 설명하고 form은 제출할 입력을 묶습니다.

이럴 때 필요해요

이름 입력과 예매 요청의 기본 구조를 만듭니다.

사용자에게 값을 받을 때 input을 사용합니다. 무엇을 적는 칸인지 label로 설명하고, for와 input의 id를 같게 연결하면 라벨을 눌러도 입력창에 초점이 갑니다.

form 안의 name은 제출 데이터의 이름입니다. id는 라벨 연결 등에 쓰는 문서 내 식별자라서 name과 역할이 다릅니다. required를 붙이면 브라우저의 기본 필수 입력 검사가 동작합니다.

아래 폼에는 서버가 연결되어 있지 않습니다. submit 버튼은 제출을 시작하지만 예매를 확정하지 않습니다. 실제 서비스에서는 서버가 입력과 권한을 다시 검사해야 합니다.

동작을 설명하는 읽기 전용 예제입니다.

example.html

<form>
  <label for="guest">이름</label>
  <input id="guest" name="guest" required>
  <button type="submit">예매 요청</button>
</form>

html · 읽기 전용5줄

빈 입력으로 제출하면 기본 필수 입력 검사가 동작합니다. 예매 처리 서버는 포함하지 않습니다.

id와 name은 각각 어디에 쓰일까요?

생각할 단서 label이 연결할 식별자와 제출 데이터의 키를 구분해 보세요.

예시 답변 확인

id는 label의 for와 연결하고 문서 안에서 요소를 식별합니다. name은 폼 제출 데이터의 키가 됩니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.