HTML/CSS 1.6 · 1부. HTML 기초

폼과 입력 요소

값을 받는 자리입니다. 라벨과 이름을 어떻게 다는지 봅니다.

예상 학습 시간 18분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문

개념 설명

값을 받아 보내는 자리

지금까지는 보여 주기만 했습니다. 폼은 읽는 사람에게서 값을 받습니다. 가입, 로그인, 검색, 글쓰기가 모두 폼입니다.

폼은 세 가지로 이루어집니다 — 값을 받는 입력 요소, 그것이 무엇인지 알리는 라벨, 그리고 그것들을 묶어 보내는 form 입니다.

최소 예제 · 편집 가능

입력 칸과 라벨

label 의 for 와 입력 칸의 id 를 같은 값으로 맞추면 둘이 이어집니다. 라벨을 눌러도 그 칸에 커서가 갑니다.

<form>
  <p>
    <label for="name">이름</label>
    <input id="name" name="name" type="text">
  </p>
  <p>
    <label for="email">전자 메일</label>
    <input id="email" name="email" type="email">
  </p>
  <p><button type="submit">보내기</button></p>
</form>

미리보기에서는 보내기를 눌러도 아무 일이 일어나지 않습니다. 예제 화면이 다른 주소로 바뀌지 않게 막아 두었기 때문입니다. 실제로 보내는 것은 서버가 받는 자리가 있어야 하고, 그것은 이 트랙의 범위 밖입니다.

상세 사용법

id · name · for 는 각각 다른 일을 합니다

속성	무엇을 위한 것인가
`id`	문서 안에서 이 요소를 가리키는 이름입니다. `label` 이 이것으로 찾습니다.
`name`	서버로 보낼 때 값에 붙는 이름입니다. 없으면 값이 보내지지 않습니다.
`for`	라벨이 어느 칸을 설명하는지 적습니다. 값은 그 칸의 `id` 입니다.

id 와 name 을 같은 값으로 적는 경우가 많지만 둘은 다른 일을 합니다. 하나만 적어도 화면은 나오므로 빠뜨렸을 때 알아채기 어렵습니다.

상세 사용법

입력 종류

type 에 따라 받는 값과 모양이 달라집니다. 자주 사용하는 것들입니다.

<p><label>비밀번호 <input type="password"></label></p>
<p><label>나이 <input type="number" min="0" max="120"></label></p>
<p><label>날짜 <input type="date"></label></p>

<p>
  <label><input type="checkbox" name="agree"> 약관에 동의합니다</label>
</p>

<p>
  <label><input type="radio" name="plan" value="free"> 무료</label>
  <label><input type="radio" name="plan" value="pro"> 유료</label>
</p>

<p>
  <label>부서
    <select name="dept">
      <option>영업부</option>
      <option>개발부</option>
    </select>
  </label>
</p>

<p><textarea name="memo" placeholder="남길 말"></textarea></p>

선택 단추(radio)는 name 이 같아야 한 무리가 됩니다. 이름이 다르면 각각 따로 골라져 둘 다 선택됩니다.

select·date 같은 것은 브라우저마다 모양이 다릅니다. 화면을 완전히 같게 만들 수 없는 자리이고, CSS 로 어디까지 바꿀 수 있는지는 5.2 에서 다룹니다.

상세 사용법

브라우저가 대신 검사합니다

required 를 적으면 값을 비운 채 보낼 수 없습니다. type="email" 은 모양이 맞는지도 봅니다. 스크립트 없이 브라우저가 해 주는 일입니다.

index.html

<input type="email" name="email" required>
<input type="text" name="code" maxlength="6" required>

다만 이것은 편의를 위한 것이지 안전을 위한 것이 아닙니다. 브라우저를 거치지 않고 보내는 방법이 있으므로, 서버에서 다시 검사해야 합니다.

흔한 실수

세 가지

라벨 없이 placeholder 만 둡니다. 값을 적기 시작하면 그 글자가 사라져 무엇을 적는 칸인지 알 수 없게 됩니다. placeholder 는 보기를 드는 자리이고, 이름은 label 이 답니다.
name 을 빠뜨립니다. 화면은 멀쩡한데 값만 서버에 가지 않습니다. 폼이 비어 온다면 이것부터 확인하십시오.
선택 단추의 name 을 서로 다르게 적습니다. 하나만 골라야 하는데 여러 개가 선택됩니다.

실습 문제

직접 해보기

1. 문의 폼 작성하기 난이도 중

이름·전자 메일·문의 내용을 받는 폼을 작성하십시오. 세 칸 모두 라벨을 달고, 이름과 전자 메일은 반드시 적도록 하십시오. 문의 내용은 여러 줄을 받습니다.

여러 줄은 textarea 입니다. 반드시 적게 하려면 required 를 더합니다.

요약

정리

폼은 form 안에 입력 요소와 라벨을 둡니다.
label for 와 입력 칸의 id 를 맞춰 둘을 잇습니다.
name 이 없으면 값이 서버로 가지 않습니다.
선택 단추는 name 이 같아야 한 무리가 됩니다.
브라우저 검사는 편의를 위한 것입니다. 서버에서 다시 검사해야 합니다.