HTML - select, textarea

<select> 요소는 옵션 선택 메뉴를 제공하는 역할을 한다. 기본적으로 내부요소인 <option>을 가지며 옵션에 개수에 따라 선택할 수 있는 드롭다운 목록이 나타나게 된다. <label> 요소를 id로 묶어서 연관성을 나타낼 수 있다.

 

<label for="petSelect">반려동물</label>
        <select name="petSelect" id="petSelect">
            <option value="dog">강아지</option>
            <option value="cat">고양이</option>
            <option value="rabbit">토끼</option>
            <option value="hamster">햄스터</option>
        </select>

<optgroup>을 사용해서 옵션 그룹을 생성해서 옵션을 분리할 수 있다. <option>에는 selected라는 속성을 부여해서 기본 선택값으로 사용할 수 있다.

<form action="/" method="post">
      <div>
        <label for="petSelect">반려동물</label>
        <select name="petSelect" id="petSelect">
          <option selected>--좋아하는 애완동물을 선택하세요--</option>
          <optgroup label="애완동물">
            <option value="dog">강아지</option>
            <option value="cat">고양이</option>
            <option value="rabbit">토끼</option>
            <option value="hamster">햄스터</option>
          </optgroup>
          <optgroup label="파충류">
            <option value="snake">아나콘다</option>
            <option value="lizard">도마뱀</option>
            <option value="frog">개구리</option>
            <option value="dino">공룡</option>
          </optgroup>
        </select>
      </div>
    </form>

<select>의 주요 속성

값	설명
name	폼 데이터 전송시 키값
multiple	여러개의 옵션을 선택 할 수 있음
size	드롭다운에서 표시할 옵션개수
disabled	드롭다운 비활성화

---

<textarea>는 사용자로부터 여러 줄의 텍스트를 입력받기 위해 사용한다.

<form action="/" method="post">
      <div>
        <label for="title">제목</label>
        <input type="text" name="title" id="title" />
      </div>
      <div>
        <label for="description">내용</label>
        <textarea
          name="description"
          id="description"
          cols="10"
          rows="10"
        ></textarea>
      </div>
    </form>

<textarea>의 주요 속성

값	설명
name	폼 데이터 전송시 키값
rows	텍스트 입력 필드의 세로 크기 지정
cols	텍스트 입력 필드의 가로 크기 지정
placeholder	입력 필드에 대한 힌트
minlength / maxlength	입력 가능한 최소 / 최대 문자
required	필수입력 필드 지정
disabled	입력 필드 비활성화
readonly	읽기 전용