HTML의 선택 태그를 사용하면 드롭다운 메뉴 또는 다중 선택 메뉴와 같은 옵션 목록에서 선택 기능을 사용할 수 있습니다. 웹페이지를 생성하고 구현하는데 사용되는 HTML 코드의 형태 내부에서 사용할 수 있는 태그입니다. 구문은 ', 여기서 목록의 각 항목은 옵션 태그로 묶이고 사용자 선택 기능을 허용합니다. opt 그룹 및 다중 선택과 같은 다른 선택 방법을 용이하게 하기 위해
선택 태그는 를 사용할 수 있습니다. 태그.
이 태그의 구문은 다음과 같습니다.
<select> <option> Value </option> <option> Value </option> </select>
위 구문
다음과 같습니다.
<select multiple> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
이 구문은 다음과 같습니다.
<select > <optgroup label = "labelname"> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <optgroup> </select>
size: 위 구문은 정의된 크기만 표시하도록 크기를 정의할 수도 있습니다
옵션은 다음과 같습니다.
<select value="" size="4"> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
자동 완성: 선택 태그는 다음과 같이 필드 값을 자동 완성하는 데에도 사용됩니다.
<select > <option value=" " autocomplete="off"> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
자동 초점: 다음과 같이 목록에서 한 번에 하나의 특정 옵션에 집중할 수 있습니다. 단일 페이지에는 하나의 자동 초점만 사용할 수 있습니다.
<select autofocus> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
링크: 선택 태그는 다음 구문에 정의된 대로 지정된 옵션을 통해 양식 링크를 여는 데 사용됩니다.
<form action="" id="name"> </form> <Select name="" form="Id_name"> <option value=" "> Content Name </option> </select>
필수: 선택 태그의 이 옵션은 양식을 실제로 제출하기 전에 정의된 목록의 필수 옵션을 정의합니다.
<select name="value" required> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
자리 표시자: 알다시피 선택 라벨을 사용하면 첫 번째 옵션이 기본 옵션으로 간주되지만 일부 옵션을 기본값으로 표시하려면 선택한 키워드를 설정할 수 있습니다. 다음과 같이 특정 옵션에:
<select name="value" > <option value=" "> Content Name </option> <option value=" " selected> Content Name </option> </select>
disabled: select 태그에 다음과 같이 비활성화된 형식으로 옵션을 표시하는 또 다른 유용한 트릭이 있습니다.
이것을 사용하면 옵션이 표시되지만 어떠한 조치도 취할 수 없습니다.
<select name="value" > <option value=" " disabled> Content Name </option> <option value=" "> Content Name </option> </select>
아래에 언급된 예시는 다음과 같습니다.
이 예에서는 아래와 같이 선택 목록, optgroup 및 한 번에 여러 옵션을 선택하기 위한 간단한 선택 태그를 표시합니다.
코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5 </option>
<option> CSS 3</option>
<option> Bootstrap </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block" >
<h4>Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block" >
<h4>Multiple Selection in Select tag </h4>
<select multiple>
<option> Green </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>
</body>
</html>출력:
이 예는
코드
<!DOCTYPE html> <html> <head> <title>select Tag form link</title> </head> <body> <form action = "C:\Users\Sonali\Desktop\HTML colspan.html" method = "post"> <select name = "list"> <option value = "menu 1">Colspan tag</option> <option value = "menu 2" selected>Font Tag</option> </select> <input type = "submit" value = "Submit" /> </form> </body> </html>
출력: Colspan 태그 값을 선택하고 제출 버튼으로 선택하면 목록에 링크된 양식이 열립니다.
목록에는 여러 옵션이 있지만 정의된 크기별로 옵션이 표시됩니다.
코드
<!DOCTYPE html> <html> <head> <title>select Tag form link</title> </head> <body> <select name = "places" size="5"> <option>Aurangabad</option> <option>Beed</option> <option>Chennai</option> <option>Delhi</option> <option >Egatpuri</option> <option >Firozabad</option> <option >Fatimpur</option> <option >Goa</option> <option >Harihareshwar</option> <option >Indonesia</option> <option >Japan</option> <option >Kolkata</option> <option >Latur</option> <option >Mumbai</option> <option >Nagpur</option> <option >Oty</option> <option >Pune</option> <option >Qatar</option> <option >Raipur</option> <option >Sholapur</option> <option >Tamil Nadu</option> <option >Uttarakhand</option> </select> </body> </html>
출력:
HTML의 select 태그는 목록에서 하나 또는 여러 옵션을 선택할 수 있는 선택 목록을 표시합니다. 태그는 선택됨, 필수, 비활성화됨, 필수, 자동 완성, 자동 초점, 링크, 크기, 다중, 자리 표시자, optgroup 등과 같은 값과 함께 사용될 수 있습니다.
위 내용은 HTML에서 태그 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
