브라우저가 해 주는 검사

required · min · max · type="email" 같은 속성을 칸에 적으면, 브라우저가 보내기 전에 칸의 값을 검사합니다. 맞지 않는 칸이 있으면 제출을 멈추고, 첫 칸 하나에 말풍선으로 까닭을 띄웁니다.

이름을 비운 채 보내거나 별점에 0을 넣는 일은 흔합니다. 받는 쪽까지 갔다가 되돌아오기 전에, 친 사람의 화면에서 바로 알려 주면 고치기 쉽습니다. 이 검사는 속성 하나로 켜집니다. 이 레슨에서는 검사 속성마다 무엇을 막는지, 막힌 제출에서 브라우저가 무엇을 하는지, 그리고 이 검사가 하지 못하는 일을 봅니다.

1속성마다 막는 것이 다르다

말풍선 문구는 크롬 한국어 화면의 원문입니다.

required는 값 없이 이름만 적는 속성이고, min · max는 숫자 칸(type="number")에 씁니다.

<label for="nick">이름</label>
<input
  id="nick"
  name="nickname"
  required
/>
<label for="star">별점</label>
<input
  type="number"
  id="star"
  min="1"
  value="0"
/>

잰 값의 말풍선은 지금 칸의 값으로 보내면 뜰 말입니다. 이름 칸은 비어 있고, 별점 칸은 value="0"이라 1보다 작습니다. 결과 화면에서는 칸을 비운 채 단추를 눌러도 말풍선이 뜨지 않습니다. 결과 화면은 눌러도 떠나지 않아 검사도 일어나지 않습니다. 결과 화면 머리의 '눌러도 떠나지 않음'이 그 표시입니다. 말풍선은 위 흐름 그림과 잰 값 칸으로 보고, 내 파일에서 해 봅니다.

2막힌 제출 — 첫 칸 하나에 말풍선

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
    required
  />

메일 칸도 required입니다. 두 칸을 모두 비운 채 '보내기'를 누릅니다.

  <label for="mail">메일</label>
  <input
    type="email"
    id="mail"
    name="mail"
    required
  />
  <button type="submit">
    보내기
  </button>
</form>

폼은 떠나지 않았고, 포커스는 첫 칸인 이름 칸에 있습니다.

• 브라우저는 칸을 폼 안 차례로 보다가 맞지 않는 첫 칸에서 멈춥니다.
• 그 칸으로 커서를 옮기고, 그 칸 하나에만 말풍선을 띄웁니다. 메일 칸도 비었지만 말풍선은 이름 칸을 고친 뒤 다시 보낼 때 뜹니다.
• 모든 칸이 맞아야 폼이 떠납니다.

위 흐름 그림에서 폼이 떠나 간 주소 끝의 mail=a%40b.c는 메일 칸에 친 a@b.c입니다. 한글이 % 꼴이 되듯 @도 주소에서는 %40이 됩니다.

예제

후기 폼의 이름 칸과 별점 칸입니다. 이름은 꼭 쓰고 20자까지, 별점은 1에서 5 사이로 받습니다.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
    required
    maxlength="20"
  />

  <label for="star">별점</label>
  <input
    type="number"
    id="star"
    name="rating"
    min="1"
    max="5"
    required
  />
  <button type="submit">
    보내기
  </button>
</form>

이름에 haneul, 별점에 5를 치고 보내자 검사를 모두 지나 떠났습니다. 한 칸에 검사 속성을 여럿 적으면 모두 맞아야 지납니다.

자주 틀리는 곳

틀린 생각: 브라우저가 검사했으니 받는 쪽에는 맞는 값만 온다.

<form>
  <label for="star">별점</label>
  <input
    type="number"
    id="star"
    name="rating"
    min="1"
    max="5"
  />
</form>
<a href="?rating=0">0점 보내기</a>

링크 하나로 ?rating=0이 붙은 주소로 갔습니다. 폼을 거치지 않으니 검사도 없습니다. 주소창에 그 주소를 직접 쳐도 같습니다.

맞는 규칙: 브라우저의 검사는 친 사람을 돕는 것일 뿐, 값을 지켜 주지 않습니다. 받는 쪽 프로그램이 값을 다시 검사해야 하고, 그것은 이 과목 밖의 일입니다.

틀린 생각: 말풍선 문구는 어느 브라우저에서나 같다.

<label for="mail">메일</label>
<input
  type="email"
  id="mail"
  name="mail"
  value="kimchi"
/>

같은 크롬에서도 문구에 친 값 kimchi가 들어가 값마다 달라집니다. 크롬을 다른 언어로 쓰거나 다른 브라우저로 열면 문구와 말풍선 모양이 또 다릅니다.

맞는 규칙: 말풍선을 띄우는 것은 브라우저이고, 문구와 모양은 브라우저와 언어마다 다릅니다. 레슨의 문구는 크롬 한국어 기준입니다. 페이지에는 칸 이름과 라벨로 무엇을 칠지 알려 둡니다.

틀린 생각: maxlength를 넘기면 말풍선이 뜬다.

<label for="nick">이름</label>
<input
  id="nick"
  name="nickname"
  maxlength="6"
/>

haneulsky를 쳤지만 칸에는 여섯 자 haneul까지만 들어갔습니다. 말풍선은 없습니다.

맞는 규칙: maxlength는 그보다 길게 쳐지지 않게 막을 뿐, 말풍선을 띄우지 않습니다. 몇 자까지인지는 라벨 글로 알려 둡니다.

확인 문제

1. 예제 폼에서 이름에 haneul, 별점에 9를 치고 '보내기'를 누르면 어떻게 될까요?

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
    required
    maxlength="20"
  />

  <label for="star">별점</label>
  <input
    type="number"
    id="star"
    name="rating"
    min="1"
    max="5"
    required
  />
  <button type="submit">
    보내기
  </button>
</form>

• ① 떠난다 — 주소에 rating=9가 붙는다
• ② 멈춘다 — 별점 칸에 '값은 5 이하여야 합니다.'
• ③ 멈춘다 — 이름 칸에 '이 입력란을 작성하세요.'

2. 이름을 비운 채 보내면 막히게 하려고 합니다. ____ 자리에 들어갈 것을 쓰세요.

<input
  id="nick"
  name="nickname"
  ____
/>

3. 동아리 공지 페이지의 가입 신청 폼입니다. 메일 칸에 abc를 쳤는데 막히지 않고 신청이 보내졌습니다. 몇 번 줄을 어떻게 고칠까요?

<form>
  <label for="mail">메일</label>
  <input
    type="text"
    id="mail"
    name="mail"
    required
  />
  <button type="submit">
    신청
  </button>
</form>

<form>
  <label for="mail">
    메일
  </label>
  <input
    type="email"
    id="mail"
    name="mail"
    required
  />
  <button type="submit">
    신청
  </button>
</form>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 폼을 html-css-study 폴더에 check.html로 저장해 엽니다. 두 칸을 비운 채 보내 보고, 이름만 친 뒤 별점에 0 · 9 · 3을 차례로 넣어 보냅니다. 보내기 전마다 말풍선이 어느 칸에 무엇으로 뜰지 먼저 적고 맞춰 봅니다. 그다음 이름 칸의 required를 지우고 비운 채 보내 봅니다.