HTML의 옵션 태그
옵션 태그는 HTML에서 가장 유용한 요소로, 선택 목록에서 특정 사용자 기본 설정을 선택하기 위해 드롭다운 목록 내에서 사용됩니다. 한 번에 한 명의 사용자가 주어진 목록에서 하나 이상의 옵션을 선택할 수 있습니다. 이것이 HTML 옵션 태그의 주요 이점입니다. <옵션> 요소는 항상
예제 구문
다음은 웹페이지나 HTML 내에서 옵션 태그가 정의되는 정확한 위치를 결정하는 데 도움이 되는 구문입니다.
구문:
<select> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
위 구문과 같이 데이터 목록을 생성하는 데 사용되는 태그입니다.
CSS의 도움으로 선택 목록에 효과를 부여하고 상대, 절대 등의 위치를 설정할 수 있고 너비를 설정하는 등 다양한 기능을 수행할 수 있습니다. 드롭다운 목록의 위치는 목록 선택 버튼 바로 아래에 목록의 내용을 표시하는 데 사용되는 상대 위치라는 두 가지 값으로 정의됩니다. 위치의 도움으로: 절대;
예:
이렇게 하면 사용자가 선택 목록에서 단일 옵션을 선택할 수 없도록 제한됩니다.
<select name="State"> <option value="MH">Maharashtra</option> <option value="GJ"> Gujarat </option> <option value="MP"> Madhya Pradesh </option> <option value="RJ">Rajasthan </option> <option value="AP">Andhra Pradesh </option> </select>
마찬가지로 우리 모두는 선택 목록에서 선택 사항에 따라 여러 옵션을 선택할 수도 있다는 것을 알고 있습니다.
구문:
<select multiple> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
동일한 구문의 예는 다음과 같습니다.
<select name="laptops" multiple> <option value="hp">HP</option> <option value="dell">Dell</option> <option value="lv">Lenovo</option> <option value="sony">Sony </option> </select>
HTML의 옵션 태그 속성
<옵션> 태그는 다음과 같은 특정 속성을 지원합니다.
- disabled: true, false 형태의 Boolean 값을 설정하여 사용하는 속성입니다. true로 설정되면 목록의 옵션이 비활성화됩니다. 그렇지 않으면 거짓입니다.
- label: 일부 텍스트를 레이블로 제공하고 싶다면 옵션 태그에 입력하는 것이 가능합니다. 해당 요소에 대한 가치로 간주됩니다.
- 선택됨: 웹페이지 디자인에서 디스플레이 보기에 이미 선택된 옵션을 표시하고 싶은 경우가 있습니다. 따라서 선택한 속성을 옵션에 설정하면 선택한 옵션을 목록에 표시할 수 있습니다. 목록에서 선택한 항목 하나만 표시할 수 있습니다.
- 값: 선택 목록에서 옵션에 값을 설정할 수도 있습니다.
옵션 HTML의 태그 예시
다음은 HTML 옵션 태그의 다양한 예입니다.
예시 #1
코드:
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>List of IIT colleges in INDIA</h4> <form> <select name = "dropdown"> <option value = "im" >IIT Madras</option> <option value = "id" >IIT Delhi</option> <option value = "ib" >IIT Bombay </option> <option value = "ikh" >IIT Kharagpur</option> <option value = "ikn">IIT Kanpur</option> <option value = "ir" >IIT Roorkee</option> <option value = "ig" >IIT Guwahati</option> <option value = "ih">IIT Hyderabad </option> <option value = "ii">IIT Indore</option> <option value = "ib">IIT Bhubaneswar</option> <option value = "it" >IIT Tirupati</option> <option value = "ib">IIT Bhilai</option> <option value = "ig">IIT Goa</option> <option value = "ij" >IIT Jammu</option> <option value = "idb">IIT Dhanbad </option> <option value = "ip">IIT Palakkad</option> <option value = "idhe">IIT Dharwad, Est</option> </select> </form> </body> </html>
출력:
예시 #2
과 같은 값을 사용하는 태그코드:
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>Select your favourite Bakery product from the list</h4> <form> <select name = "dropdown"> <optgroup label="Cakes"> <option value = "BS" >Butterscotch Cake</option> <option value = "DC" >Dark Chocolate Cake</option> <option value = "FC" >Fruit Cake</option> <option value = "RC" >Rasmali Cake</option> </optgroup> <option value = "cc">Cupcakes</option> <option value = "vp" required>Veg Puff</option> <option value = "ap" disabled>Anda Puff</option> <option value = "cb">Crunchy Biscuits </option> <option value = "cob">Chocolate Biscuits</option> <option value = "clc">Choco Lava Cake</option> <option value = "wb" >White Bread</option> <option value = "bb">Brown Bread</option> <option value = "mf" selected>Muffin</option> <option value = "br" >Bread Roll</option> <option value = "bw">Brownie </option> <option value = "ps">Pastry</option> <option value = "vgs">Veg Grill Sandwich</option> </select> </form> </body> </html>
출력:
예시 #3
이 예에서는 데이터 목록에서 여러 옵션을 선택하겠습니다.
코드:
<!DOCTYPE html> <html> <body> <h2>Top IT training Institutes in Pune </h2> <form id="multidd"> <select id="multiselectopt"> <option> ABCIS Learning </option> <option> MindScripts Technologies </option> <option> Sysap technologies </option> <option> IclassPune</option> <option> IIHT</option> <option> Magneto Academy </option> <option> Certification Guru </option> <option> I Cert Global </option> <option> Technogeeks </option> </select> <input type="button" onclick="multipleFunc()" value="Select multiple options"> </form> <p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p> <script> function multipleFunc() { document.getElementById("multiselectopt").multiple = true; } </script> </body> </html>
출력:
결론
위의 모든 정보를 통해 우리는
위 내용은 HTML의 옵션 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
