HTML 표와 폼 — 수강 신청 페이지를 뜯어보며 익히는 table과 form

작성자:

표와 폼은 HTML에서 태그 수가 가장 많은 영역입니다. 그래서 수강 신청 페이지 코드를 먼저 보여 주고 필요한 부분만 확대해 설명합니다. 끝에는 점검 목록을 둡니다.

표의 뼈대는 여섯 개 태그면 됩니다

<table>
  <caption>강좌 일정</caption>
  <thead>
    <tr><th scope="col">회차</th><th scope="col">주제</th></tr>
  </thead>
  <tbody>
    <tr><td>1강</td><td>HTML의 정체</td></tr>
  </tbody>
</table>

<table>이 표 전체, <tr>이 가로 한 줄, <th>가 제목 칸, <td>가 데이터 칸입니다. <thead>와 <tbody>로 머리와 몸통을 나누고, <caption>은 표의 제목입니다.

짚어 둘 오래된 실수가 표로 화면 배치를 잡는 것입니다. 낭독기가 배치를 데이터로 읽고 모바일에서 줄바꿈도 되지 않습니다. 배치는 CSS가 맡고, 표는 행과 열의 관계가 의미를 갖는 데이터에만 씁니다.

colspan과 rowspan으로 칸을 합칩니다

<tr>
  <th rowspan="2">기초반</th><td>HTML</td><td>5편</td>
</tr>
<tr><td>CSS</td><td>4편</td></tr>
<tr><td colspan="3">총 9편</td></tr>

colspan="3"은 가로 세 칸, rowspan="2"는 세로 두 줄을 차지하라는 뜻입니다. 합친 만큼 다음 줄에서 그 자리의 <td>를 빼야 합니다. 둘째 줄에 칸이 두 개뿐인 이유이며, 이를 빠뜨리면 표가 계단처럼 어긋납니다.

form의 뼈대와 label 연결

<form action="/apply" method="post">
  <label for="readerName">이름</label>
  <input type="text" id="readerName" name="readerName" required>
  <input type="radio" id="live" name="mode" value="live" checked>
  <label for="live">실시간</label>
  <input type="radio" id="vod" name="mode" value="vod">
  <label for="vod">녹화 강의</label>
</form>

<form>은 입력 칸을 묶어 서버로 보내는 봉투입니다. action은 보낼 주소, method는 방식인데 get은 값이 주소창에 붙어 나가므로 검색어에, post는 신청서에 씁니다. name은 값을 구분하는 이름표라 없으면 그 칸은 전송되지 않습니다.

<label>의 for와 <input>의 id 값이 같은 점을 보십시오. 둘이 같아야 연결되고, 그러면 글자를 눌러도 커서가 칸으로 들어가며 낭독기가 “이름, 편집 상자”로 읽습니다. label 미연결이 폼에서 가장 흔한 접근성 실수이며, placeholder는 입력하면 사라지므로 라벨을 대신하지 못합니다.

type이 칸의 성격을 정합니다. text는 한 줄 글자, email은 형식 확인, password는 가리기, number·date는 전용 입력기입니다. radio는 같은 그룹끼리 name을 똑같이 줘야 하나만 켜집니다.

select·textarea·button과 자동 검증

<label for="level">현재 수준</label>
<select id="level" name="level">
  <option value="none">완전 처음</option>
  <option value="basic" selected>조금 압니다</option>
</select>
<label for="memo">남기고 싶은 말</label>
<textarea id="memo" name="memo" rows="4"></textarea>
<label for="postCount">하루 편수</label>
<input type="number" id="postCount" name="postCount" min="1" max="5" required>
<button type="submit">신청하기</button>

<select>는 목록에서 고르는 칸이고 항목 하나가 <option>입니다. <textarea>는 여러 줄 입력인데 여는 태그와 닫는 태그 사이가 초기값이라, 빈칸으로 두려면 사이를 완전히 비워야 합니다. 공백을 넣으면 그것이 값이 됩니다.

<button>은 type이 submit이면 전송, reset이면 값 지우기이고, 생략하면 submit입니다. 검증 속성은 required가 빈칸 금지, min·max가 숫자 범위, maxlength가 글자 수, pattern이 형식 검사인데 1차 방어일 뿐이라 서버에서 다시 확인해야 합니다.

점검할 것은 넷입니다. 칸마다 name이 있는가, for가 짝이 맞는가, id가 중복되지 않는가, 표를 배치용으로 쓰지 않았는가. 폼을 다루는 이야기는 자바스크립트로 HTML 문서 다루기로, 시리즈 처음은 HTML이란 무엇인가로 이어집니다.

핵심 정리

  • 표의 용도 — 행과 열이 의미를 갖는 데이터에만 쓰고 배치에는 쓰지 않습니다.
  • 칸 합치기 — 합친 만큼 다른 줄 칸 수를 줄입니다.
  • form — action은 주소, method는 방식, 칸마다 name이 필요합니다.
  • label 연결 — for와 id를 일치시키며 placeholder로 대신할 수 없습니다.
  • 검증 속성 — required·min·max는 1차 확인일 뿐입니다.