name과 value

name은 칸의 값을 보낼 때 붙이는 이름이고, value는 그 칸에 든 값입니다. 제출하면 브라우저는 name이 있는 칸마다 이름=값 조각을 만들어 & 기호로 잇고, 띄어쓰기는 + 기호로, 한글은 % 꼴로 바꿔 주소 뒤에 붙입니다.

받는 쪽이 보는 것은 주소 하나뿐입니다. ?haneul&kimchi처럼 값만 오면 어느 것이 이름이고 어느 것이 요리인지 가를 수 없습니다. 그래서 값마다 name으로 이름을 붙여 보냅니다. 이 레슨에서는 주소 조각이 어떻게 만들어지는지, value가 무엇인지, 띄어쓰기와 한글이 주소에서 어떤 꼴이 되는지 봅니다.

1name이 있는 칸만 이름=값으로 붙는다

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <label for="food">요리</label>
  <input
    id="food"
    name="food"
  />
  <button type="submit">
    보내기
  </button>
</form>

이름 칸에만 haneul을 치고 요리 칸은 비운 채 '보내기'를 누른 뒤의 주소입니다.

• 칸마다 name 값과 칸의 값을 = 기호로 이어 조각 하나를 만듭니다 — nickname=haneul.
• 조각이 여럿이면 & 기호로 잇습니다. 차례는 폼 안 칸의 차례입니다.
• 비운 칸도 조각을 만듭니다. 값이 없어 food=처럼 = 뒤가 빕니다.
• name이 없는 칸은 값을 쳐도 조각을 만들지 않고 건너뜁니다. 위 흐름 그림의 메모 칸이 그렇습니다.

2value는 칸에 처음 든 값이다

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

value 속성을 적으면 페이지를 열 때 칸에 그 값이 들어 있습니다. 아무것도 치지 않고 '보내기'만 눌러도 servings=2가 붙습니다. 보내는 것은 누르는 순간 칸에 든 값입니다. 칸의 2를 지우고 3을 친 뒤 누르면 servings=3이 붙습니다. value 속성은 파일에 적힌 처음 글일 뿐, 친 값으로 바뀌지는 않습니다.

3띄어쓰기는 +, 한글은 % 꼴이 된다

주소에는 영문 · 숫자와 몇몇 기호만 그대로 쓸 수 있습니다. 그 밖의 글자는 브라우저가 주소에 쓸 수 있는 꼴로 바꿔 적습니다.

• 띄어쓰기는 + 기호가 됩니다. fried rice는 fried+rice로 갑니다.
• 한글은 한 자가 % 기호와 두 자리 글자 셋이 됩니다. '밥'은 %EB%B0%A5입니다.
• 크롬 주소창은 이 꼴을 다시 한글로 풀어 ?food=밥처럼 보여 줍니다. 실제로 보낸 주소는 % 꼴이고, 받는 쪽도 이 꼴을 한글로 풀어 읽습니다.

4'이름'이 셋이다

이 과목에는 '이름'이라는 말이 붙은 것이 셋 나옵니다. 하는 일이 모두 다릅니다.

주소에 붙는 것은 name뿐입니다. 이름표는 id와 class에서 보았고, 읽는 이름은 다음 레슨 label로 칸에 이름 붙이기에서 봅니다.

예제

레시피 노트 후기 폼에 이름 '하늘', 요리 '김치 볶음밥'을 치고 '보내기'를 눌렀습니다.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <label for="food">요리</label>
  <input
    id="food"
    name="food"
  />
  <button type="submit">
    보내기
  </button>
</form>

%ED%95%98%EB%8A%98이 '하늘' 두 자이고, '김치'와 '볶음밥' 사이의 띄어쓰기가 + 기호로 갔습니다. 크롬 주소창에는 ?nickname=하늘&food=김치+볶음밥⁠처럼 보입니다.

자주 틀리는 곳

틀린 생각: id가 있는 칸은 그 이름으로 보내진다.

id도 칸에 붙은 이름이라 그 이름으로 갈 것 같습니다.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <label for="memo">메모</label>
  <input id="memo" />
  <button type="submit">
    보내기
  </button>
</form>

메모 칸에 hi를 쳤지만 주소에 메모가 없습니다. 메모 칸에는 id만 있고 name이 없습니다.

맞는 규칙: 보내는 이름은 name입니다. id는 라벨 · CSS가 칸을 가리키는 이름표일 뿐 주소에 붙지 않습니다. 보낼 칸에는 name을 적습니다.

틀린 생각: 띄어쓰기도 친 그대로 주소에 들어간다.

<form>
  <label for="food">요리</label>
  <input
    id="food"
    name="food"
  />
  <button type="submit">
    보내기
  </button>
</form>

맞는 규칙: 주소에는 띄어쓰기를 그대로 쓸 수 없어 + 기호로 바꿔 보냅니다. 받는 쪽은 + 기호를 다시 띄어쓰기로 읽습니다.

틀린 생각: 주소의 %EB%B0%A5 같은 글은 한글이 깨진 것이다.

<form>
  <label for="food">요리</label>
  <input
    id="food"
    name="food"
    value="밥"
  />
  <button type="submit">
    보내기
  </button>
</form>

깨진 것이 아니라 '밥' 한 자를 주소에 쓸 수 있는 꼴로 적은 것입니다. 받는 쪽은 이 꼴을 다시 '밥'으로 풀어 읽습니다.

맞는 규칙: 주소에 그대로 쓸 수 없는 글자는 % 기호와 두 자리 글자로 바꿔 적습니다. 한글은 한 자가 셋이 됩니다.

확인 문제

1. 1절 폼에서 요리 칸의 name="food"를 name="dish"로 바꿨습니다. 이름 칸에 haneul, 요리 칸에 kimchi를 치고 누르면 주소 끝에 무엇이 붙을까요? ?부터 끝까지 쓰세요.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <label for="food">요리</label>
  <input
    id="food"
    name="dish"
  />
  <button type="submit">
    보내기
  </button>
</form>

2. 별점 칸에 5를 치고 보내면 주소에 rating=5가 붙게 하려고 합니다. ____ 자리에 들어갈 것을 쓰세요.

<label for="star">별점</label>
<input id="star" ____ />

<form>
  <label for="star">
    별점
  </label>
  <input
    id="star"
    name="rating"
  />
  <button type="submit">
    보내기
  </button>
</form>

3. 동아리 공지 페이지의 모임 장소 투표 폼입니다. 장소 칸에 '강당'을 치고 '투표'를 누르면 브라우저가 실제로 보내는 주소의 끝은 어느 것일까요?

<p>다음 모임 장소를 적어 주세요.</p>
<form>
  <label for="place">장소</label>
  <input
    id="place"
    name="place"
  />
  <button type="submit">
    투표
  </button>
</form>

• ① ?place=강당
• ② ?place=%EA%B0%95%EB%8B%B9
• ③ ?place=

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 폼을 html-css-study 폴더에 review.html로 저장해 열고, 두 칸에 한글을 쳐서 보낸 뒤 주소창을 봅니다. 그다음 요리 칸의 name="food"를 지우고 저장해, 다시 보내면 주소가 어떻게 바뀔지 먼저 적고 맞춰 봅니다.