선택과 제출 기능 구성하기

연락 양식에 관심 주제와 원하는 연락 방법을 추가해 보겠습니다. 관심 주제는 여러 개를 고를 수 있지만 연락 방법은 하나만 고르도록 구성합니다. 입력이 유효하면 제출 버튼을 눌렀을 때 확인 문구가 나타나며, 이 예제는 데이터를 외부로 보내지 않습니다.

선택 항목 고르기

체크박스는 각 항목을 독립적으로 켜고 끌 수 있어 관심 주제처럼 여러 선택이 가능한 항목에 알맞습니다. 라디오 버튼은 같은 name을 가진 항목을 하나의 그룹으로 묶고 그중 하나만 선택하게 합니다. select와 그 안의 option은 목록에서 항목을 선택할 때 사용합니다.

관련 항목을 fieldset으로 묶고 legend로 그룹 이름을 적으면 각 선택지가 어떤 질문에 속하는지 알기 쉽습니다. 각 입력에는 개별 label을 연결합니다.

연락 양식 만들기

환경은 Chromium입니다. 다음 HTML은 이름과 이메일 입력란에 관심 주제, 연락 방법, 연락 가능 시간을 추가합니다. 이 예제에서 이메일 주소는 입력 형식을 확인하기 위한 항목이며, 실제 메시지는 전송하지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>연락 양식</title>
</head>
<body>
  <h1>연락 양식</h1>
  <form id="contact-form">
    <p>
      <label for="name">이름 (필수)</label>
      <input id="name" name="name" type="text" required>
    </p>
    <p>
      <label for="email">이메일 (필수)</label>
      <input id="email" name="email" type="email" required>
    </p>

    <fieldset>
      <legend>관심 주제 (선택)</legend>
      <input id="topic-html" name="topic" type="checkbox" value="html">
      <label for="topic-html">HTML</label>
      <input id="topic-css" name="topic" type="checkbox" value="css">
      <label for="topic-css">CSS</label>
    </fieldset>

    <fieldset>
      <legend>연락 방법 (필수)</legend>
      <input id="contact-email" name="contact" type="radio" value="email" required>
      <label for="contact-email">이메일</label>
      <input id="contact-phone" name="contact" type="radio" value="phone">
      <label for="contact-phone">전화</label>
    </fieldset>

    <p>
      <label for="time">연락 가능 시간 (필수)</label>
      <select id="time" name="time" required>
        <option value="">시간을 선택하세요</option>
        <option value="morning">오전</option>
        <option value="afternoon">오후</option>
      </select>
    </p>
    <button type="submit">제출</button>
  </form>
  <p id="result" role="status"></p>
</body>
</html>

화면에서 이름에 민지, 이메일에 minji@example.com을 입력하고 관심 주제에서 HTML과 CSS를 모두 선택합니다. 연락 방법은 이메일, 연락 가능 시간은 오전으로 고른 뒤 제출하면 다음 문구가 나타날 것으로 예상합니다.

선택한 내용을 확인했습니다.

다음 보조 JavaScript는 폼의 제출 이벤트를 받아 기본 제출 동작을 막고 확인 문구를 표시합니다. addEventListener는 지정한 이벤트가 발생했을 때 실행할 함수를 등록하고, textContent는 요소에 표시할 텍스트를 바꿉니다. preventDefault()가 페이지 이동과 데이터 전송을 막습니다.

const form = document.querySelector('#contact-form');
const result = document.querySelector('#result');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  result.textContent = '선택한 내용을 확인했습니다.';
});

코드가 동작하는 이유

두 관심 주제는 각각 체크하거나 해제할 수 있습니다. 같은 name="topic"을 사용하더라도 체크박스의 여러 선택이 제한되지는 않습니다. 반면 두 라디오 버튼은 name="contact"가 같으므로 한쪽을 선택하면 다른 쪽의 선택이 해제됩니다. value는 각 선택 항목이 폼 데이터에서 가질 값입니다.

이름과 이메일, 라디오 그룹, 선택 목록에는 required가 있습니다. 라디오 그룹에서는 같은 이름의 버튼 중 하나가 선택되어야 합니다. 선택 목록의 첫 항목은 value가 빈 문자열이므로 다른 시간을 골라야 합니다. 필수 항목이 비어 있거나 이메일 형식이 유효하지 않으면 브라우저가 제출을 막고, 보조 JavaScript의 제출 함수도 실행되지 않습니다. 확인 문구가 나와도 입력 내용이 저장되거나 발송되는 것은 아닙니다.

흔한 실수와 경계 조건

라디오 버튼에 서로 다른 name을 주면 별개의 그룹이 되어 둘 다 선택할 수 있습니다. 반대로 체크박스에 required를 붙이면 그 체크박스 자체를 반드시 선택해야 하므로, 여러 관심 주제 중 하나 이상을 고르게 하는 규칙과는 다릅니다. 이 예제의 관심 주제는 아무것도 선택하지 않아도 됩니다.

이메일 입력 유형은 주소의 기본 형식을 검사할 뿐 실제로 존재하거나 연락받을 수 있는 주소인지 확인하지 않습니다. 연락 방법으로 전화를 선택해도 이 예제에는 전화번호 입력란이 없으므로 실제 연락처를 수집하는 양식에는 목적에 맞는 입력란과 추가 처리가 필요합니다. 확인 문구는 제출 후 입력을 바꿔도 다음 제출 전까지 그대로 남습니다.

연습과 풀이

연습: 처음부터 연락 방법의 이메일이 선택되어 있도록 바꾸세요. 관심 주제는 그대로 선택 사항으로 둡니다.

풀이: 이메일 라디오 버튼에 checked를 추가합니다. 다른 라디오 버튼을 고르면 같은 그룹의 이메일 선택이 해제됩니다.

<input id="contact-email" name="contact" type="radio" value="email" required checked>

참고: MDN, HTML 양식과 버튼, MDN, 폼의 submit 이벤트.