HTML5でドロップダウンリストを実装するために使用されるタグは何ですか-フロントエンドQ&A-php.cn

HTML5でドロップダウンリストを実装するために使用されるタグは何ですか

青灯夜游

リリース： 2021-12-15 18:22:33

オリジナル

9113 人が閲覧しました

html5 は、「<select>」や「<option>」などのドロップダウンリストタグを実装しており、構文は「<select><option>list option value」です。 .."; select タグはドロップダウンリストフレームの構築に使用され、option タグはリストオプションの定義に使用されます。

HTML5でドロップダウンリストを実装するために使用されるタグは何ですか

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 でドロップダウンリストを実装する場合は、<select></select> と <option></option> を一緒に使用する必要があります。構文:

<select>
    <option>列表选项值</option>
    .....
</select>

ログイン後にコピー

このうち、<select>タグはドロップダウンリストの作成に使用され、<option>タグは各項目(エントリ)を表します。ドロップダウンリストにある。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body>
			喜欢的水果：
			<select>
				<option>请选择选项</option>
				<option>苹果</option>
				<option>梨子</option>
				<option>桃子</option>
				<option>香蕉</option>
				<option>李子</option>
				<option>菠萝</option>
				<option>榴莲</option>
			</select>
	</body>
</html>

ログイン後にコピー

HTML5でドロップダウンリストを実装するために使用されるタグは何ですか

デフォルトでは、ドロップダウンリストには最初の項目が最初に表示されることがわかります。事前に選択されていますか？ <option> タグの selected 属性を使用できます。

<select> タグの selected 属性を設定した後、<option> タグの selected="selected" を使用して項目を事前に選択できます。具体的な利用方法は以下の通りです。

喜欢的水果：
<select>
	<option>请选择选项</option>
	<option>苹果</option>
	<option>梨子</option>
	<option>桃子</option>
	<option selected="selected">香蕉</option>
	<option>李子</option>
	<option>菠萝</option>
	<option>榴莲</option>
</select>

ログイン後にコピー

HTML5でドロップダウンリストを実装するために使用されるタグは何ですか