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

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

textarea로 여러 줄 입력받기

textarea의 처음 표시할 값은 시작 태그와 종료 태그 사이에 씁니다. input처럼 value 속성에 긴 본문을 넣는 방식이 아닙니다.

<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를 기준으로 처리합니다.

button의 type을 명시하기

양식 안에서 button의 기본 유형은 제출입니다. 버튼을 단순한 사용자 인터페이스 동작에만 쓰려면 type="button"을 적어 의도치 않은 제출을 막으세요.

<form action="" 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만으로 정해지는 동작과 스크립트가 필요한 동작을 구분해 사용하세요.