6강. 사용자 입력을 받는 폼

이번 강의의 결과물은 이름, 이메일, 문의 내용을 입력받고 브라우저의 기본 검증을 사용하는 문의 폼입니다.

?1. 이번 강의에서 해결할 문제

포트폴리오 방문자가 내용을 읽는 것에서 끝나지 않고 작성자에게 문의하려면 입력 인터페이스가 필요합니다. 이번 강의에서는 JavaScript나 백엔드 없이 HTML만으로 입력 필드의 목적과 필수 조건을 정의합니다.

✓학습 목표

• 포트폴리오 방문자가 내용을 읽는 것에서 끝나지 않고 작성자에게 문의하려면 입력 인터페이스가 필요합니다. 이번 강의에서는 JavaScript나 백엔드 없이 HTML만으로 입력 필드의 목적과 필수 조건을 정의합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• form: 관련 입력 컨트롤과 제출 동작을 묶습니다.
• label: 입력 필드의 목적을 사용자에게 설명합니다. for 값은 연결할 필드의 id와 같아야 합니다.
• input: 한 줄 입력을 받습니다. type="email"처럼 데이터 종류를 지정할 수 있습니다.
• textarea: 여러 줄 입력을 받습니다.
• button type="submit": 폼 제출을 시도합니다.
• name: 제출할 데이터의 이름입니다. id와 역할이 다릅니다.
• required, minlength: 브라우저가 확인할 기본 입력 조건입니다.

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

레이블을 누르면 연결된 필드에 포커스가 이동합니다. W3C는 가능한 경우 label[for]와 입력 요소의 id를 명시적으로 연결하도록 안내합니다. W3C WAI 폼 레이블 안내

</>3. 코드 예시

파일 위치: web-basics/portfolio/index.html

main의 마지막에 다음 영역을 추가합니다.

<section id="contact">
  <h2>문의</h2>

  <form method="get">
    <p>
      <label for="name">이름</label>
      <input
        id="name"
        name="name"
        type="text"
        autocomplete="name"
        minlength="2"
        required
      >
    </p>

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

    <p>
      <label for="message">문의 내용</label>
      <textarea
        id="message"
        name="message"
        rows="6"
        minlength="10"
        required
      ></textarea>
    </p>

    <button type="submit">문의 내용 확인</button>
  </form>
</section>

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

접속 주소: http://localhost:5500/

→4. 코드가 동작하는 이유

1. 브라우저는 form 안의 제출 가능한 필드를 하나의 데이터 묶음으로 취급합니다.
2. for="email"과 id="email"이 같아서 레이블과 이메일 필드가 연결됩니다.
3. name은 제출 시 URL이나 요청 본문에 사용할 데이터 키가 됩니다.
4. type="email"은 이메일 형식에 맞는지 확인하도록 브라우저에 알려 줍니다.
5. required 필드가 비었거나 minlength를 만족하지 않으면 브라우저가 제출을 막고 안내합니다.

HTML 폼은 JavaScript 없이도 기본 검증을 제공하지만, 클라이언트 검증은 우회할 수 있으므로 실제 서비스에서는 서버도 반드시 다시 검증해야 합니다. WHATWG 폼 표준

현재 예시는 데이터를 저장하는 백엔드가 없습니다. 제출 후 주소에 입력값이 나타나는 것은 GET 방식의 기본 동작이며 실제 문의가 전송·보관되었다는 뜻이 아닙니다.

!5. 자주 하는 실수

• label의 for와 입력 필드의 id가 다름
• placeholder를 레이블 대신 사용함
• id만 작성하고 제출에 필요한 name을 생략함
• 폼 안의 일반 버튼에 type을 쓰지 않아 의도치 않게 제출됨
• 브라우저 검증만 믿고 서버 검증이 필요 없다고 생각함

✎6. 짧은 실습 과제

1. 문의 폼을 자신의 index.html에 추가합니다.
2. 각 레이블을 눌러 해당 입력 필드로 포커스가 이동하는지 확인합니다.
3. 모든 필드를 비운 채 제출해 required 검증을 확인합니다.
4. 이메일에 hello를 입력해 형식 검증을 확인합니다.
5. 문의 내용을 10자 미만으로 입력해 길이 검증을 확인합니다.
6. 모든 조건을 만족시킨 뒤 주소에 name, email, message가 어떻게 나타나는지 관찰합니다.

완료 기준은 마우스와 키보드 모두로 폼을 사용할 수 있고, 세 가지 잘못된 입력을 브라우저가 제출 전에 발견하는 것입니다.

?7. 이해 점검 질문 3개

1. label의 for와 input의 id를 같게 작성하는 이유는 무엇인가요?
2. id와 name은 각각 어떤 역할을 하나요?
3. HTML의 required 검증이 있어도 서버 검증이 필요한 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.