단추의 type

단추(button — 자료에 따라 버튼이라고도 부릅니다)의 type은 누를 때 하는 일을 정합니다. 폼 안의 단추는 type을 적지 않으면 submit이라 누르는 순간 폼을 보냅니다. 보내지 않을 단추는 type="button", 칸을 되돌리는 단추는 type="reset"으로 적습니다.

후기 폼에 '미리 보기' 단추를 하나 더 달았다고 해 봅시다. 써 둔 후기를 보려고 눌렀는데, 페이지가 새로 불려 오고 친 글이 모두 사라집니다. 단추가 단추 글대로가 아니라 type대로 움직였기 때문입니다. 이 레슨에서는 type 셋이 하는 일과, 단추를 만드는 두 요소 button · input의 차이를 봅니다.

결과 화면은 어느 단추를 눌러도 떠나지 않습니다. 결과 화면 머리의 '눌러도 떠나지 않음'이 그 표시입니다. 그래도 type을 적지 않은 단추는 내 파일에서 폼을 보냅니다. 단추마다 한 일은 위 흐름 그림과 잰 값 칸으로 보고, 내 파일에서 해 봅니다.

1폼 안 단추는 처음부터 submit이다

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <button>
    미리 보기
  </button>
</form>

이름 칸에 haneul을 치고 '미리 보기'를 누른 뒤의 잰 값입니다. 폼이 떠나 주소에 값이 붙었고, 다시 그려진 칸은 비었습니다. 폼 안의 button은 type을 적지 않으면 type="submit"과 같습니다. 단추 글이 '미리 보기'든 '지우기'든 상관없이 폼을 보냅니다. 그래서 보내는 단추에도 type="submit"을 적어 두면, 코드를 읽는 사람이 단추의 일을 바로 압니다.

2보내지 않을 단추는 type="button"

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

type="button"인 단추는 눌러도 아무 일도 하지 않습니다. 폼은 떠나지 않고, 친 글도 칸에 그대로 있습니다. 아무 일도 하지 않는 단추는 JavaScript가 할 일을 붙일 자리입니다. 미리 보기를 띄우거나 할 일을 지우는 일은 자바스크립트 과목에서 이런 단추에 붙입니다.

3type="reset"은 칸을 파일에 적힌 값으로 되돌린다

<form>
  <label for="ppl">인분</label>
  <input
    id="ppl"
    name="servings"
    value="2"
  />
  <button type="reset">
    다시 쓰기
  </button>
</form>

인분 칸에 3을 더 친 뒤 '다시 쓰기'를 누른 잰 값입니다. 칸은 비지 않고 2로 돌아갔습니다. reset 단추는 폼 안 모든 칸을 HTML 파일에 적힌 값으로 되돌립니다. value를 적은 칸은 그 값으로, 적지 않은 칸은 비운 칸이 됩니다. 폼은 떠나지 않습니다.

type 셋을 모으면 이렇습니다.

예제

후기 폼에 단추 셋을 달았습니다. 이름에 haneul을 치고 '미리 보기'를 누른 다음, '후기 남기기'를 눌렀습니다.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <button type="button" id="pv">
    미리 보기
  </button>

  <button type="reset">
    다시 쓰기
  </button>
  <button
    type="submit"
    id="send"
  >
    후기 남기기
  </button>
</form>

'미리 보기'는 type="button"이라 아무 일도 하지 않았고, 칸의 haneul도 그대로 남았습니다. 그래서 '후기 남기기'를 눌렀을 때 그 값이 주소에 붙었습니다. '미리 보기'에 type이 없었다면 그 순간 폼이 떠나 칸이 비었을 것입니다.

자주 틀리는 곳

틀린 생각: 단추는 누르면 단추 글대로, 제 할 일만 한다.

'모두 지우기'라고 적은 단추는 칸을 지울 것 같습니다.

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
  <button>
    모두 지우기
  </button>
</form>

칸을 지우지 않고 폼을 보냈습니다. 주소에 haneul이 붙어 갔습니다.

맞는 규칙: 단추 글은 보이는 글일 뿐이고, 하는 일은 type이 정합니다. 폼 안 단추는 type이 없으면 폼을 보냅니다. 보내지 않을 단추에는 type="button"을, 칸을 되돌릴 단추에는 type="reset"을 적습니다.

틀린 생각: reset은 칸을 모두 비운다.

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

    <option value="3">
      3점
    </option>
  </select>
  <button type="reset">
    다시 쓰기
  </button>
</form>

별점을 '3점'으로 바꾼 뒤 '다시 쓰기'를 눌렀더니, 비지 않고 selected가 적힌 '5점'으로 돌아갔습니다.

맞는 규칙: reset은 비우는 단추가 아니라, 파일에 적힌 값(value · selected · checked)으로 되돌리는 단추입니다.

틀린 생각: input type="button"과 button은 같은 것이라 안에 글을 넣어도 된다.

<input type="button">
  미리 보기
</input>

input은 빈 요소라 내용을 가질 수 없습니다. 결과 화면에서 단추는 글 없이 비어 있고, '미리 보기'는 단추 밖 글로 그려졌습니다. 검사기는 단추 글을 value에 적으라고, </input>은 짝이 없다고 말합니다.

맞는 규칙: input 단추는 글을 value에 적고, 안에 글이나 그림을 넣는 단추는 button입니다.

<input
  type="button"
  value="미리 보기"
/>
<button type="button">
  미리 보기
</button>

두 단추 모두 읽는 이름이 '미리 보기'입니다.

확인 문제

1. 1절 폼에서 '미리 보기' 단추(type 없음) 세 줄을 </form> 뒤로 옮겼습니다. 이름에 haneul을 치고 '미리 보기'를 누르면 어떻게 될까요?

<form>
  <label for="nick">이름</label>
  <input
    id="nick"
    name="nickname"
  />
</form>
<button>
  미리 보기
</button>

• ① 폼을 보낸다 — 주소에 nickname=haneul이 붙는다
• ② 아무 일도 없다 — 칸의 haneul이 그대로 남는다
• ③ 칸이 비워진다

2. 인분을 하나 늘리는 '1인분 더' 단추입니다. 나중에 JavaScript가 할 일을 붙일 단추라, 눌러도 폼을 보내지 않아야 합니다. ____ 자리에 들어갈 것을 쓰세요.

<button ____>
  1인분 더
</button>

3. 여행 일정 페이지의 소감 남기기 폼입니다. 소감 칸에 fun을 치고 '지우기'를 눌렀더니 칸이 비워지는 대신 소감이 보내졌습니다. 몇 번 줄을 어떻게 고칠까요?

<form>
  <label for="note">소감</label>
  <input
    id="note"
    name="note"
  />
  <button>
    지우기
  </button>
  <button type="submit">
    남기기
  </button>
</form>

<form>
  <label for="note">
    소감
  </label>
  <input
    id="note"
    name="note"
  />
  <button type="reset">
    지우기
  </button>
  <button type="submit">
    남기기
  </button>
</form>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 폼을 html-css-study 폴더에 buttons.html로 저장해 엽니다. 이름을 친 뒤 단추 셋을 하나씩 눌러 보고, 그다음 '미리 보기'의 type="button"을 지우고 저장합니다. 이름을 치고 '미리 보기'를 누르면 무엇이 일어날지 먼저 적은 뒤 눌러 맞춰 봅니다.