찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML의 옵션 태그

HTML의 옵션 태그

WBOY
WBOY원래의
2024-09-04 16:24:571150검색

옵션 태그는 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>

출력:

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>

출력:

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의 옵션 태그

결론

위의 모든 정보를 통해 우리는 요소.

위 내용은 HTML의 옵션 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html Boolean define if for select include restrict Attribute this display position
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 탐색 요소다음 기사：HTML 탐색 요소

관련 기사

더보기