HTML에서 태그 선택

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

HTML의 Select 태그 구문

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

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

<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>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</optgroup>
</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>

링크: 선택 태그는 다음 구문에 정의된 대로 지정된 옵션을 통해 양식 링크를 여는 데 사용됩니다.

Content Name

 필수: 선택 태그의 이 옵션은 양식을 실제로 제출하기 전에 정의된 목록의 필수 옵션을 정의합니다.

<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 및 한 번에 여러 옵션을 선택하기 위한 간단한 선택 태그를 표시합니다.

코드

<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>


<div class="div-container">
<div class="block">
<h4 id="Simple-Select-tag">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 id="Optgroup-Select-tag">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 id="Multiple-Selection-in-Select-tag">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>

출력:

예시 #2

이 예는 를 통해 링크에서 여는 방법을 정의합니다. 태그

코드

<title>select Tag form link</title>

Colspan tag Font Tag

출력: Colspan 태그 값을 선택하고 제출 버튼으로 선택하면 목록에 링크된 양식이 열립니다.

예시 #3

목록에는 여러 옵션이 있지만 정의된 크기별로 옵션이 표시됩니다.

코드

<title>select Tag form link</title>



Aurangabad
Beed
Chennai
Delhi
Egatpuri
Firozabad
Fatimpur
Goa
Harihareshwar
Indonesia
Japan
Kolkata
Latur
Mumbai
Nagpur
Oty
Pune
Qatar
Raipur
Sholapur
Tamil Nadu
Uttarakhand

출력:

결론

HTML의 select 태그는 목록에서 하나 또는 여러 옵션을 선택할 수 있는 선택 목록을 표시합니다. 태그는 선택됨, 필수, 비활성화됨, 필수, 자동 완성, 자동 초점, 링크, 크기, 다중, 자리 표시자, optgroup 등과 같은 값과 함께 사용될 수 있습니다.

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