简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML에서 태그 선택

王林
풀어 주다： 2024-09-04 16:28:11
원래의
522명이 탐색했습니다.

HTML의 선택 태그를 사용하면 드롭다운 메뉴 또는 다중 선택 메뉴와 같은 옵션 목록에서 선택 기능을 사용할 수 있습니다. 웹페이지를 생성하고 구현하는데 사용되는 HTML 코드의 형태 내부에서 사용할 수 있는 태그입니다. 구문은 ', 여기서 목록의 각 항목은 옵션 태그로 묶이고 사용자 선택 기능을 허용합니다. opt 그룹 및 다중 선택과 같은 다른 선택 방법을 용이하게 하기 위해 태그는 대신 사용할 수 있습니다. 태그를 지정하세요.

HTML의 Select 태그 구문

선택 태그는 를 사용할 수 있습니다. 태그.

이 태그의 구문은 다음과 같습니다.

<select>
<option> Value  </option>
<option> Value  </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>
로그인 후 복사

HTML의 Select 태그 예

아래에 언급된 예시는 다음과 같습니다.

예시 #1

이 예에서는 아래와 같이 선택 목록, 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>
로그인 후 복사

출력:

HTML에서 태그 선택

HTML에서 태그 선택

HTML에서 태그 선택

예시 #2

이 예는