여러 줄 글과 고르는 칸

textarea는 여러 줄 글을 받는 칸이고, select는 목록에서 하나를 고르는 칸입니다. 한 물음에 딸린 칸들은 fieldset으로 묶고, 그 물음은 legend로 답니다.

한 줄 평처럼 길게 쓸 글은 한 줄 글자 칸이 좁고, 별점처럼 정해진 값 가운데 하나를 고르는 칸은 라디오를 다섯 개 늘어놓기보다 목록 하나가 짧습니다. '다시 만들어 볼 건가요?'처럼 라디오 여럿이 한 물음에 답하면, 그 물음이 라디오들과 함께 읽혀야 무엇을 고르는지 압니다. 이 레슨에서는 세 요소를 차례로 보고, textarea 안의 빈칸이 앞에서 배운 빈칸 규칙과 다르게 다뤄지는 것을 봅니다.

<select id="lv" name="level">  <option value="low">    조금  </option>  <option value="normal">    보통  </option></select>

1textarea — 처음 글은 태그 사이에

<form>
  <label for="cmt">
    한 줄 평
  </label>
  <textarea
    id="cmt"
    name="comment"
  ></textarea>
  <button type="submit">
    보내기
  </button>
</form>

칸에 good을 치고 Enter를 누른 뒤 again을 쳐서 보낸 주소입니다.

• textarea는 input과 달리 닫는 태그가 있는 요소입니다. 칸에 처음 들어 있을 글은 여는 태그와 닫는 태그 사이에 씁니다.
• 이 칸에서 Enter는 제출이 아니라 줄바꿈입니다. 줄바꿈은 주소에서 %0D%0A가 됩니다.
• 칸 크기는 rows(줄 수) · cols(한 줄 글자 수) 속성으로 정할 수 있습니다.

textarea 안의 빈칸 · 줄바꿈은 그릴 때 하나로 합쳐지지 않습니다. 앞에서 본 빈칸 규칙(브라우저 규칙 2)과 달리, 칸 안 글은 친 그대로 보이고 그대로 보내집니다. 그래서 처음 글을 넣을 때는 여는 태그의 > 바로 뒤에 붙여 쓰고, 닫는 태그도 글 바로 뒤에 붙입니다.

<textarea
  id="cmt"
  name="comment"
>맛있어요</textarea>

textarea를 <textarea />처럼 빈 요소로 닫으면, 브라우저는 그 / 기호를 버리고 여는 태그로만 읽습니다. 닫는 태그가 나올 때까지 뒤의 HTML이 모두 칸 안 글이 됩니다.

<label for="c">한 줄 평</label>
<textarea id="c" name="c" />
<p>끝</p>

결과 화면의 칸 안에 <p>끝</p>가 글자로 들어 있습니다. 오류 없이 그려지지만 문단은 사라졌습니다 — 검사기 첫 줄이 까닭을 말합니다(브라우저 규칙 2).

2select — 고른 option의 value를 보낸다

<form>
  <label for="lv">밥 양</label>
  <select id="lv" name="level">
    <option value="low">
      조금
    </option>
    <option value="normal">
      보통
    </option>
  </select>
  <button type="submit">
    보내기
  </button>
</form>

'보통'을 고르고 보낸 주소입니다.

• select 안에 고를 것마다 option을 하나씩 둡니다. 목록에 보이는 것은 option의 글이고, 보내는 것은 고른 option의 value입니다.
• 아무것도 고르지 않으면 첫 option이 골라져 있습니다. 처음부터 고를 option에는 값 없는 속성 selected를 적습니다.
• option의 글은 줄을 나눠 적어도 앞뒤 빈칸을 떼고 보입니다.

3fieldset과 legend — 한 물음의 칸을 묶는다

<fieldset>
  <legend>밥 양</legend>
  <input
    type="radio"
    id="less"
    name="rice"
    value="less"
  />
  <label for="less">조금</label>

둘째 라디오를 넣고 fieldset을 닫습니다.

  <input
    type="radio"
    id="normal"
    name="rice"
    value="normal"
  />
  <label for="normal">
    보통
  </label>
</fieldset>

fieldset은 칸 여럿을 한 묶음으로 둘러싸고, 그 안 맨 처음의 legend가 묶음의 물음이 됩니다. 크롬은 묶음 둘레에 선을 긋고 선 위에 물음 글을 얹어 그립니다. 잰 값의 역할 group은 이 요소가 '묶음'이라는 뜻이고, 읽는 이름은 legend 글 '밥 양'입니다. 화면 읽기 프로그램은 라디오 '조금'에 들어갈 때 이 묶음의 이름을 함께 알려 줄 수 있습니다. 역할은 7단원 화면 읽기 프로그램이 읽는 페이지에서 자세히 봅니다.

예제

후기 폼의 별점과 한 줄 평입니다. 별점은 '5점'에 selected를 적어 처음부터 골라 두었습니다.

<form>
  <label for="star">별점</label>
  <select
    id="star"
    name="rating"
  >
    <option value="5" selected>
      5점
    </option>
    <option value="4">
      4점
    </option>
  </select>

한 줄 평 칸과 단추를 잇습니다.

  <label for="cmt">
    한 줄 평
  </label>
  <textarea
    id="cmt"
    name="comment"
  ></textarea>
  <button type="submit">
    후기 남기기
  </button>
</form>

별점은 고르지 않았지만 selected인 '5점'의 value 5가 갔고, 한 줄 평에 친 good이 이어졌습니다.

자주 틀리는 곳

틀린 생각: textarea의 처음 글도 input처럼 value 속성에 적는다.

<label for="cmt">한 줄 평</label>
<textarea
  id="cmt"
  name="comment"
  value="맛있어요"
></textarea>

칸이 비어 있습니다. textarea는 value 속성을 쓰지 않습니다.

맞는 규칙: textarea의 처음 글은 여는 태그와 닫는 태그 사이에 씁니다(>맛있어요</textarea>).

틀린 생각: textarea 안에서도 빈칸과 줄바꿈은 하나로 합쳐진다.

앞에서 HTML의 빈칸은 그릴 때 하나로 합쳐진다고 배웠으니, 칸 안 글도 그럴 것 같습니다.

<form>
  <textarea
    id="cmt"
    name="comment"
  >
    good
  </textarea>
  <button type="submit">
    보내기
  </button>
</form>

결과 화면의 칸 안에서 good 앞에 빈칸이, 뒤에 빈 줄이 보입니다. 주소에도 앞 빈칸 넷(++++)과 줄바꿈(%0D%0A), 닫는 태그 앞 빈칸 둘(++)이 그대로 갔습니다. > 바로 뒤 줄바꿈 하나만 브라우저가 버렸습니다.

맞는 규칙: textarea 안의 빈칸 · 줄바꿈은 합쳐지지 않고 그대로 보이고 보내집니다. 처음 글은 줄을 나누지 않고 > 바로 뒤에 붙여 씁니다.

틀린 생각: option에 value를 적지 않으면 아무것도 보내지 않는다.

<form>
  <label for="lv">밥 양</label>
  <select id="lv" name="level">
    <option>조금</option>
    <option>보통</option>
  </select>
  <button type="submit">
    보내기
  </button>
</form>

'보통'을 고르자 화면 글 '보통'이 % 꼴로 갔습니다. value가 없는 option은 제 글을 값으로 보냅니다.

맞는 규칙: option의 value가 없으면 화면 글이 갑니다. 받는 쪽이 기다리는 값(normal)이 따로 있으면 value에 적습니다 — 화면 글을 고쳐도 보내는 값은 그대로 둘 수 있습니다.

틀린 생각: legend는 fieldset 앞에 두어도 된다.

<legend>밥 양</legend>
<fieldset>
  <input
    type="radio"
    id="less"
    name="rice"
    value="less"
  />
  <label for="less">조금</label>
</fieldset>

묶음의 읽는 이름이 없어졌고, 검사기는 legend가 그 자리에 올 수 없다고 말합니다.

맞는 규칙: legend는 fieldset 안 맨 처음에 둡니다. 그래야 묶음의 물음이 됩니다.

확인 문제

1. 3절 묶음에서 '보통'을 고르고 이 묶음을 폼에 넣어 보내면, 주소 끝에 무엇이 붙을까요? ?부터 끝까지 쓰세요.

<form>
  <fieldset>
    <legend>밥 양</legend>
    <input
      type="radio"
      id="less"
      name="rice"
      value="less"
    />
    <label for="less">
      조금
    </label>

    <input
      type="radio"
      id="normal"
      name="rice"
      value="normal"
    />
    <label for="normal">
      보통
    </label>
  </fieldset>
  <button type="submit">
    보내기
  </button>
</form>

2. '보통'을 고르면 주소에 level=mid가 붙게 하려고 합니다. ____ 자리에 들어갈 것을 쓰세요.

<select id="lv" name="level">
  <option ____>보통</option>
</select>

3. 카페 메뉴판 페이지의 주문 폼입니다. 받는 쪽은 잔 크기를 cup=small · cup=large로 받으려 합니다. 그런데 '큰 잔'을 골라 보냈더니 cup=%ED%81%B0+%EC%9E%94⁠가 갔습니다. 어떻게 고칠까요?

<form>
  <label for="cup">크기</label>
  <select id="cup" name="cup">
    <option>작은 잔</option>
    <option>큰 잔</option>
  </select>
  <button type="submit">
    주문
  </button>
</form>

<form>
  <label for="cup">
    크기
  </label>
  <select
    id="cup"
    name="cup"
  >
    <option value="small">
      작은 잔
    </option>

    <option value="large">
      큰 잔
    </option>
  </select>
  <button type="submit">
    주문
  </button>
</form>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절의 textarea를 html-css-study 폴더에 comment.html로 저장하되, 처음 글 '맛있어요'를 다음 줄에 두 칸 들여 적어 봅니다. 열기 전에 칸 안 글이 어디서 시작할지 먼저 적고, 열어서 커서를 칸 맨 앞에 두고 맞춰 봅니다. 그다음 > 바로 뒤에 붙여 고쳐 다시 엽니다.