HTML 양식 <select>

    2018-02-14 18:41:06 작성

    <select>

    <select> 요소는 <optgroup>, <option> 태그를 이용하여 드롭다운 목록을 표시합니다.
    <option> 태그의 selected 속성은 초기값을 선택할 수 있습니다.
    disabled 속성은 비활성화 하여 선택할 수 없습니다.

    <select name="sel">
        <option value="ds">자료구조</option>
        <option value="html" selected>HTML</option>
        <option value="pl">프로그래밍언어론</option>
        <option value="db">데이터베이스</option>
        <option value="os" disabled>운영체제</option>
        <option value="algo">알고리즘</option>
    </select>

    다중 선택

    multiple 속성으로 다중선택을 할 수 있습니다. size 속성을 지정하면 한번에 보여질 항목 수를 표시합니다.

    <select name="sel" multiple size="4">
        <option value="ds">자료구조</option>
        <option value="html" selected>HTML</option>
        <option value="pl">프로그래밍언어론</option>
        <option value="db">데이터베이스</option>
        <option value="os" disabled>운영체제</option>
        <option value="algo">알고리즘</option>
    </select>

    옵션 그룹

    <optgroup> 태그로 옵션을 그룹화할 수 있습니다

    <select name="sel">
        <optgroup label="1학년">
            <option value="ds">자료구조</option>
            <option value="html">HTML</option>
        </optgroup>
        <optgroup label="2학년">
            <option value="pl">프로그래밍언어론</option>
            <option value="db">데이터베이스</option>
        </optgroup>
        <optgroup label="3학년" disabled>
            <option value="os" >운영체제</option>
            <option value="algo">알고리즘</option>
        </optgroup>
    </select>
    <select> 태그 속성
    속성 설명
    name 요소의 이름을 지정합니다.
    서버로 전송될 이름입니다.
    size 한번에 보여질 항목의 개수를 지정합니다.
    multiple 여러항목을 선택할 수 있게 합니다.
    required 폼 제출시 값이 필수로 선택되어야 합니다.
    autofocus 페이지가 로드될때 자동으로 포커스를 취득합니다.
    form 폼요소 밖에서 사용되는 경우 form 요소의 id를 지정합니다.
    disabled 비활성화 시키고 제출할때 값을 전송하지 않습니다.

    <optgroup> 태그의 속성
    속성 설명
    label 옵션그룹의 레이블을 지정합니다.
    disabled 옵션그룹을 비활성화 합니다.
    그룹내의 옵션도 비활성화 됩니다.

    <option> 태그의 속성
    속성 설명
    value 폼을 제출할때 서버로 전송될 값입니다.
    selected 초기값으로 선택합니다.
    disabled 비활성화 하여 선택할 수 없습니다.
    label 옵션 콘텐츠가 긴 경우 항목을 짧은 레이블로 표시합니다.