[HTML 입문] 여러 데이터를 나열하는 태그

1. <select>, <optgroup>, <optiong> 태그 - 드롭다운 목록

공간을 최소화하면서 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다.

<select 속성="속성 값">

     <option value="값" [속성="속성 값"]> 내용1 </option>

     <option value="값" [속성="속성 값"]> 내용1 </option>

     <option value="값" [속성="속성 값"]> 내용1 </option>

     . . .

</select>

'<select> 태그'를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 한가지 항목을 선택할 수 있는 데 <select> 태그에서 사용하는 속성은 다음과 같습니다.

속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl키를 누른 상태로 드롭다운메뉴에 있는 여러 항목을 선택할 수 있다.

드롭다운 목록에 표시되는 옵션들은 '<option> 태그'를 이용해 지정하는데 <option> 태그에 사용하는 속성은 다음과 같습니다.

속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, '<optgroup> 태그'를 사용할 수 있는데 label속성을 사용해 그룹의 제목을 붙입니다.

2. <datalist> 태그, <option> 태그

<select> 태그 대신 '<datalist> 태그'를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있습니다. 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것입니다.

<input type="text" list="데이터 목록 id">

     <datalist id="데이터 목록 id">

     <option> . . . . . </option>

     <option> . . . . . </option>

     . . .

     </datalist>

'<option> 태그'를 사용해 각 데이터 옵션을 표시하고 value 속성과 label 속성을 사용할 수 있습니다.

속성	설명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정한다.
label	사용자를 위해 브라우저에 표시할 레이블이다. 따로 지정하지 않을 경우, value 값을 레이블로 사용한다.

3. <textarea> 태그 - 여러 줄 입력하는 텍스트 영역

게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용합니다.

<textarea [속성="속성 값"]> 내용 </textarea>

<textarea> 태그에서 사용하는 속성은 다음과 같습니다.

속성	설명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석