입력 칸의 종류

input의 type 속성은 칸의 종류를 정합니다. type 하나로 칸의 모양과 휴대전화 자판, 보내기 전 브라우저가 하는 검사가 함께 바뀝니다. 여럿 가운데 하나를 고르는 칸은 라디오, 몇 개든 고르는 칸은 체크박스입니다.

몇 인분인지, 언제 만들었는지, 2인분과 3인분 가운데 무엇인지를 모두 글자 칸으로 받으면, 치는 사람은 꼴을 짐작해야 하고 받는 쪽은 '두 개' · '2' · '2인분'을 함께 받게 됩니다. 칠 것에 맞는 칸을 주면 치기 쉽고 꼴도 하나로 모입니다. 이 레슨에서는 자주 쓰는 type과, 고르는 칸인 라디오 · 체크박스가 무엇을 보내는지 봅니다.

<input  type="text"  name="count"/>

1type이 칸의 종류를 정한다

type을 적지 않으면 text, 곧 앞 레슨들의 글자 칸입니다. 자주 쓰는 값은 아래와 같고, 모양은 크롬 기준입니다.

<label for="cnt">인분</label>
<input
  type="number"
  id="cnt"
  name="count"
/>
<label for="day">만든 날</label>
<input
  type="date"
  id="day"
  name="day"
/>

인분 칸에 abc를 쳐 본 뒤 잰 값입니다. 숫자 칸이라 글자가 쳐지지 않아 값이 비어 있습니다. 휴대전화에서는 number 칸에 숫자 자판이, email 칸에 @ 기호가 있는 자판이 뜨기도 합니다. 어떤 자판이 뜨는지는 기기마다 다릅니다. email 칸이 보낼 때 하는 검사는 브라우저가 해 주는 검사에서 봅니다.

2라디오는 같은 name끼리 하나만 고른다

라디오(radio — 자료에 따라 라디오 버튼)는 여럿 가운데 하나만 고르는 동그라미 칸입니다. name이 같은 라디오가 한 묶음이 되어, 하나를 고르면 앞에 고른 것이 풀립니다.

<form>
  <input
    type="radio"
    id="s1"
    name="size"
    value="1"
  />
  <label for="s1">1인분</label>

둘째 라디오도 같은 name="size"입니다. value만 다릅니다.

  <input
    type="radio"
    id="s2"
    name="size"
    value="2"
  />
  <label for="s2">2인분</label>
  <button type="submit">
    보내기
  </button>
</form>

1인분을 고른 뒤 2인분을 고르고 보낸 주소입니다. 묶음에서 하나만 골라져 조각도 하나입니다. 보내는 것은 고른 라디오의 value입니다. 라벨 글 '2인분'이 아니라 value="2"의 2가 갑니다. 결과 화면에서도 두 라디오를 번갈아 눌러 보세요. 하나를 누르면 다른 하나가 풀립니다.

3체크박스는 고른 것만 보낸다

체크박스는 몇 개든 고르는 네모 칸입니다. 고른 칸만 이름=값 조각을 만들고, 고르지 않은 칸은 아무것도 보내지 않습니다.

<form>
  <input
    type="checkbox"
    id="egg"
    name="extra"
    value="egg"
  />
  <label for="egg">달걀</label>

둘째 체크박스도 같은 name="extra"입니다.

  <input
    type="checkbox"
    id="gim"
    name="extra"
    value="gim"
  />
  <label for="gim">김가루</label>
  <button type="submit">
    보내기
  </button>
</form>

달걀만 고르고 보낸 주소입니다. 김가루 칸은 고르지 않아 주소에 없습니다. 둘 다 고르면 같은 이름의 조각이 둘 붙어 ?extra=egg&extra=gim이 됩니다.

예제

후기 폼의 '다시 만들 의향' 칸입니다. '네'에 checked를 적어, 페이지를 열 때부터 '네'가 골라져 있게 했습니다.

<form>
  <input
    type="radio"
    id="yes"
    name="again"
    value="yes"
    checked
  />
  <label for="yes">네</label>

  <input
    type="radio"
    id="no"
    name="again"
    value="no"
  />
  <label for="no">아니요</label>
  <button type="submit">
    보내기
  </button>
</form>

아무것도 누르지 않고 '보내기'만 눌러도 again=yes가 붙습니다. checked는 값 없이 이름만 적는 속성이고, 체크박스에도 씁니다. 묶음 앞에 '다시 만들어 볼 건가요?' 같은 물음을 다는 법은 다음 레슨에서 봅니다.

자주 틀리는 곳

틀린 생각: 라디오에는 value를 적지 않아도 라벨 글이 보내진다.

<form>
  <input
    type="radio"
    id="s1"
    name="size"
  />
  <label for="s1">1인분</label>
  <button type="submit">
    보내기
  </button>
</form>

1인분을 고르고 보냈더니 size=on이 갔습니다. value가 없는 라디오는 무엇을 골랐는지 알리지 않고 on만 보냅니다. 라디오가 여럿이면 모두 on이라 어느 것을 골랐는지 가를 수 없습니다.

맞는 규칙: 라디오와 체크박스에는 칸마다 다른 value를 적습니다. 보내지는 것은 라벨 글이 아니라 value입니다.

틀린 생각: type 값을 조금 틀려도 브라우저가 알아듣는다.

<label for="mail">메일</label>
<input
  type="emial"
  id="mail"
  name="mail"
  value="abc"
/>

email을 emial로 잘못 적었습니다. 오류는 나지 않고 칸도 보이지만, 브라우저는 모르는 type을 text로 읽어 이 칸은 글자 칸이 됩니다. type="email"이면 이 값 abc에 대해 "이메일 주소에 '@'를 포함해 주세요. 'abc'에 '@'가 없습니다."라는 말풍선(크롬 기준)이 준비되지만, 글자 칸이라 아무 검사도 없습니다.

맞는 규칙: 모르는 type 값은 오류 없이 text가 됩니다. 칸이 생각한 대로 움직이지 않으면 type의 글자부터 봅니다.

틀린 생각: 숫자 칸의 값은 숫자로 보내진다.

<form>
  <label for="cnt">인분</label>
  <input
    type="number"
    id="cnt"
    name="count"
  />
  <button type="submit">
    보내기
  </button>
</form>

숫자 칸에 02를 쳤더니 주소에 02 그대로 갔습니다. 숫자 2로 바꿔 보내지 않습니다.

맞는 규칙: 숫자 칸은 치는 글자를 숫자로 막을 뿐, 주소에는 친 글자 그대로 갑니다. 주소는 모두 글자이고, 숫자로 읽는 것은 받는 쪽의 일입니다.

확인 문제

1. 2절 폼에서 2인분 라디오의 value="2"를 value="two"로 바꿨습니다. 1인분을 고른 뒤 2인분을 고르고 보내면 주소 끝에 무엇이 붙을까요? ?부터 끝까지 쓰세요.

<form>
  <input
    type="radio"
    id="s1"
    name="size"
    value="1"
  />
  <label for="s1">1인분</label>

  <input
    type="radio"
    id="s2"
    name="size"
    value="two"
  />
  <label for="s2">2인분</label>
  <button type="submit">
    보내기
  </button>
</form>

2. 맵기를 고르는 라디오 셋이 있습니다. 앞의 둘은 name="hot"이고 value가 1 · 2입니다. 셋째 라디오가 같은 묶음에 들게 ____ 자리에 들어갈 것을 쓰세요.

<input
  type="radio"
  ____
  value="3"
/>

3. 여행 일정 페이지의 숙소 고르기 칸입니다. '호텔'을 고른 뒤 '민박'을 눌렀더니 두 칸이 모두 골라진 채로 남습니다. 몇 번 줄을 어떻게 고칠까요?

<input
  type="radio"
  id="h"
  name="stay"
  value="hotel"
/>
<label for="h">호텔</label>
<input
  type="radio"
  id="m"
  name="room"
  value="minbak"
/>
<label for="m">민박</label>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 폼을 html-css-study 폴더에 size.html로 저장해 열고, 두 라디오를 번갈아 눌러 봅니다. 그다음 둘째 라디오의 name을 servings로 바꿔 저장하고, 두 라디오를 차례로 누르면 어떻게 될지 먼저 적은 뒤 눌러 맞춰 봅니다.