HTML 강좌 / textarea, select, option, button 사용하기

HTML 강좌

작성일 2026-10-06 최근 수정일 2026-10-25

긴 글을 입력받으려면 textarea, 준비된 선택지에서 하나를 고르게 하려면 select와 option, 명시적인 동작을 실행하려면 button을 사용합니다. 네 요소의 역할을 구분하면 입력값과 제출 동작을 예측하기 쉬워집니다.

textarea로 여러 줄 입력받기

textarea의 처음 표시할 값은 시작 태그와 종료 태그 사이에 씁니다. input처럼 value 속성에 긴 본문을 넣는 방식이 아닙니다. 초기 내용과 사라지는 힌트의 차이는 양식에 안내 문구 추가하기의 textarea 비교와 같습니다.

<label for="message">문의 내용</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows와 cols는 기본 표시 크기에 영향을 줍니다. 실제 화면 너비에 맞는 크기 조절은 CSS로 할 수 있습니다. 입력칸에 반드시 name을 주어야 제출할 때 내용이 전달됩니다.

시작 태그와 종료 태그 사이에 문장을 넣으면 처음부터 그 문장이 입력된 상태로 표시됩니다. 사용자가 아무것도 입력하지 않았다는 상태와 예시 문장을 구별해야 한다면, 기본값 대신 placeholder를 보조 힌트로 쓰되 레이블은 유지하세요. 긴 문의를 받는 양식에서는 한 줄짜리 input보다 여러 줄을 편집할 수 있는 textarea가 적합합니다.

select와 option으로 선택지 만들기

<label for="topic">문의 유형</label>
<select id="topic" name="topic">
  <option value="order">주문</option>
  <option value="delivery">배송</option>
  <option value="other">기타</option>
</select>

화면에는 ‘주문’이 보이지만 제출되는 값은 order입니다. id="topic"은 레이블과 연결하고, name="topic"은 제출 데이터의 이름으로 사용합니다. 선택지의 value는 서버가 처리할 값과 일치하게 정하세요.

이 예제에서는 아무 조작 없이 제출해도 첫 번째 항목인 ‘주문’이 선택됩니다. 사용자에게 의도를 확인받아야 하는 양식이라면 <option value="">선택하세요</option>를 맨 앞에 놓고 select에 required를 지정하세요. 반대로 합리적인 기본값이 있는 설정이라면 첫 항목을 그대로 두는 편이 편할 수 있습니다. 서버는 화면 문구가 아닌 value를 기준으로 처리합니다.

여러 컨트롤을 한 양식에서 확인하기

아래 전체 문서를 controls.html로 저장합니다. 첫 선택지의 빈 값과 required가 함께 있어 유형을 선택해야 제출할 수 있습니다. 초기화 버튼은 차이를 확인하는 실습용입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>양식 컨트롤 실습</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>문의 입력 연습</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">문의 유형</label>
      <select id="topic-choice" name="topic" required>
        <option value="">선택하세요</option>
        <option value="order">주문</option>
        <option value="delivery">배송</option>
      </select></p>
    <p><label for="message-text">문의 내용</label>
      <textarea id="message-text" name="message" rows="4">테스트 문의</textarea></p>
    <button type="submit">입력값 확인</button>
    <button type="reset">초기값으로 되돌리기</button>
  </form>
</body>
</html>

유형을 선택하지 않고 제출하여 필수 선택 검사를 확인합니다.
배송을 선택하고 내용을 바꾼 뒤 제출합니다. URL의 topic 값은 화면 문구가 아닌 delivery여야 합니다.
내용을 다시 바꾼 뒤 초기화합니다. 유형은 첫 선택지로, 내용은 초기 문장으로 돌아오는지 확인합니다.

초기값이 없던 입력칸은 초기화 후 비어 보이지만, 이 예제처럼 값이 있으면 그 값으로 돌아갑니다. 파일을 새로 열어도 초기 상태를 다시 확인할 수 있습니다.

MDN textarea 문서 · MDN select 문서 · MDN button 문서

button의 type을 명시하기

양식 안에서 button의 기본 유형은 제출입니다. 버튼을 단순한 사용자 인터페이스 동작에만 쓰려면 type="button"을 적어 의도치 않은 제출을 막으세요. 화면 문구가 아닌 name과 값이 전송되는 방식은 form의 구조와 GET·POST 제출 방식에서 관찰합니다.

<form method="get">
  <label for="note">메모</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">전송</button>
  <button type="reset">입력값 초기화</button>
</form>

이 예제는 현재 주소로 GET 요청을 보내므로 별도 서버 기능 없이도 제출 후 주소의 쿼리 문자열을 관찰할 수 있습니다. 초기화 버튼은 사용자가 입력한 내용을 지울 수 있어 실제 서비스에서는 꼭 필요한지 판단한 뒤 사용하세요. 각 요소의 세부 속성은 MDN HTML 요소 참고 문서에서 확인할 수 있습니다.

초기화는 항상 빈칸으로 만드는 기능이 아니라 양식의 초기값으로 되돌리는 기능입니다. 예를 들어 textarea에 기본 문장을 넣었다면 초기화 후 그 문장이 다시 나타납니다. 실수로 눌렀을 때 작성 내용이 사라질 수 있으므로, 실제 서비스에서는 버튼의 필요성과 위치를 신중하게 정하세요.

type="button"은 양식을 제출하지 않는 버튼을 만들지만, 별도의 스크립트를 연결하지 않으면 눌러도 동작하지 않습니다. 제출·초기화처럼 HTML만으로 정해지는 동작과 스크립트가 필요한 동작을 구분해 사용하세요.

HTML 강좌