[form] HTML - <option> 태그 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)

1. <option> 예제 - 선택사항
2. <option> 정의
3. <option> 구문
4. <option> 속성

<option> 예제 - 선택사항

[에제1] - 선택사항 유형 1개 경우.

<select>
    <option value="html">html 홈짱닷컴 (homzzang.com)</option>
    <option value="css">css  홈짱닷컴 (homzzang.com)</option>
    <option value="javascript">javascript  홈짱닷컴 (homzzang.com)</option>
    <option value="php">php  홈짱닷컴 (homzzang.com)</option>
</select>

 

결과보기

---

[예제2] - 선택사항 유형 여러 개 경우.

 

<select>

    <optgroup>

        <option value="html">html 홈짱닷컴 (homzzang.com)</option>
        <option value="css">css  홈짱닷컴 (homzzang.com)</option>

    </optgroup>
    <optgroup>
        <option value="javascript">javascript  홈짱닷컴 (homzzang.com)</option>
        <option value="php">php  홈짱닷컴 (homzzang.com)</option>
    </optgroup>

</select>

 

결과보기 

<option> 정의 

 
<select>/<datalist> 태그 안에서 개별 선택사항 나열.

 

---

 

1.

• <optgroup>태그 - <option>태그 많을 땐, 연관된 선택사항끼리 묶음.
• <datalist> 태그 - <input> 입력 사항의 자료 예를 나열. (HTML5 +)

 

2.

• 속성 없이 사용 가능. (단, 대개 서버에 값 전달 위해 value 속성 사용)
• 이미지는 사용 불가. (즉, JS/jQuery 이용해 비슷한 효과 구현 가능.)

 

4.

최신 브라우저 모두 지원.

 

5.

MDN <option> 예제 보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

 

<option> 구문

[방법1] 선택사항 유형 1개 경우.

 

<select>
    <option 속성="속성값">선택사항</option>    
</select>

 

---

[방법2] 선택사항 유형 여러 개 경우.

 

<select>

    <optgroup>

         <option 속성="속성값">선택사항</option>

         <option 속성="속성값">선택사항</option>

         ...

    </optgroup>

</select>

 

<option> 속성