HTML
선택 메뉴 컨트롤

통사론

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

메뉴 선택

<select> 요소는 사용자가 옵션을 선택할 수있는 드롭 다운 메뉴를 생성합니다.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

크기 변경

size 속성을 사용하여 선택 메뉴의 크기를 변경할 수 있습니다. 크기가 0 또는 1이면 표준 드롭 다운 스타일 메뉴가 표시됩니다. 1보다 큰 크기는 드롭 다운을 여러 행을 표시하는 상자로 변환합니다. 행마다 하나의 옵션과 스크롤 바를 사용하여 사용 가능한 옵션을 스크롤합니다.

<select name="" size="4"></select>

다중 옵션 선택 메뉴

기본적으로 사용자는 단일 옵션 만 선택할 수 있습니다. multiple 속성을 추가하면 사용자가 여러 옵션을 한 번에 선택하고 선택한 모든 옵션을 양식과 함께 제출할 수 있습니다. multiple 속성을 사용하면 드롭 다운 메뉴가 마치 크기가 정의 된 것처럼 상자로 자동 변환됩니다. 이 경우 기본 크기는 사용중인 특정 브라우저에 의해 결정되며 여러 선택을 허용하면서 드롭 다운 스타일 메뉴로 다시 변경할 수 없습니다.

<select name="" multiple></select>

multiple 속성을 사용하는 multiple 에는 크기에 0과 1을 사용하는 것과 사용하지 않는 경우에는 차이가 없습니다. 0을 사용하면 브라우저가 프로그래밍 된 기본 방식대로 작동합니다. 1을 사용하면 결과 상자의 크기를 명시 적으로 한 행 높이로 설정합니다.

옵션 그룹

<optgroup> 요소를 사용하여 긴 옵션 목록에 구조화 된 레이아웃을 제공하려면 선택 메뉴에서 옵션을 깔끔하게 그룹화 할 수 있습니다.

이 구문은 label 속성이있는 요소를 사용하여 그룹의 제목을 식별하고 그 그룹 내에 있어야하는 0 개 이상의 옵션을 포함함으로써 간단합니다.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

옵션 그룹을 사용할 때 모든 옵션을 그룹에 포함 할 필요는 없습니다. 또한 옵션 그룹을 비활성화하면 그룹 내의 모든 옵션이 비활성화되므로 비활성화 된 그룹 내에서 단일 옵션을 수동으로 다시 활성화 할 수 없습니다.

옵션

선택 메뉴의 옵션은 사용자가 선택할 항목입니다. 옵션의 일반적인 구문은 다음과 같습니다.

<option>Some Option</option>

그러나 <option> 요소 자체의 텍스트는 항상 사용되는 것은 아니며 기본적으로 지정되지 않은 특성의 기본값이된다는 점에 유의해야합니다.

옵션의 실제 모양과 기능을 제어하는 ​​속성은 value 과 label 입니다. 레이블은 드롭 다운 메뉴에 표시 될 텍스트를 나타냅니다 (보고있는 내용과 클릭하여 선택하는 텍스트). 값은 양식 제출과 함께 전송 될 텍스트를 나타냅니다. 이 값 중 하나라도 생략되면 요소 내부의 텍스트가 대신 값으로 사용됩니다. 그래서 우리가 위에서 준 예제는 이것에 "확장"될 수 있습니다 :

<option label="Some Option" value="Some Option">

메뉴에서 실제로 옵션을 구성 할 필요가없는 내부 텍스트 및 종료 태그는 생략하십시오. 두 속성이 모두 지정되어 있고 텍스트가 필요하지 않으므로 텍스트가 포함되면 내부 텍스트가 무시됩니다. 그러나, 당신은 아마 많은 사람들이 이런 식으로 글을 쓰는 것을 보지 못할 것입니다. 작성된 가장 일반적인 방법은 결국 레이블 속성이되는 내부 텍스트와 함께 서버에 전송되는 값을 사용하는 것입니다.

<option value="option1">Some Option</option>

기본적으로 옵션 선택

selected 속성을 메뉴에 첨부하여 메뉴에서 선택할 특정 옵션을 지정할 수도 있습니다. 기본적으로 메뉴에서 선택된 것으로 옵션이 지정되지 않은 경우 렌더링 될 때 메뉴의 첫 번째 옵션이 선택됩니다. 두 개 이상의 옵션에 selected 속성이 연결되어있는 경우 속성이있는 메뉴의 마지막 옵션은 기본적으로 선택되는 옵션입니다.

<option value="option1" selected>Some option</option>

다중 옵션 선택 메뉴에서 속성을 사용하는 경우 속성이있는 모든 옵션이 기본적으로 선택되며 속성이없는 옵션이없는 경우 아무 것도 선택되지 않습니다.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

<datalist> 태그는 <input> 요소에 대해 미리 정의 된 옵션 목록을 지정합니다. <input> 요소에 "autocomplete"기능을 제공합니다. 사용자는 작성하는 동안 옵션의 드롭 다운 목록을 볼 수 있습니다.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

브라우저 지원