DE
HTML - Auswahlfeld - Beispiel
3
points
Mit Hilfe von HTML ist es möglich, ein Combo-Box (Kombinationsfeld) auf verschiedene Arten zu erstellen.
1. Combo-Box Beispiel
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Meine Ziele: </label><br />
<input type="checkbox" name="friends" value="friends" /> Freunde<br />
<input type="checkbox" name="enjoy" value="enjoy" /> Spaß haben<br />
<input type="checkbox" name="learning" value="learning" /> Lernen<br />
</form>
</body>
</html>
2. Combo-Box mit Standardauswahl Beispiel
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Meine Ziele: </label><br />
<input type="checkbox" name="friends" value="friends" /> Freunde<br />
<input type="checkbox" name="enjoy" value="enjoy" checked /> Spaß haben<br />
<input type="checkbox" name="learning" value="learning" checked /> Lernen<br />
</form>
</body>
</html>
3. Combo-Box mit deaktivierten Feldern Beispiel
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>Meine Ziele: </label><br />
<input type="checkbox" name="friends" value="friends" /> Freunde<br />
<input type="checkbox" name="enjoy" value="enjoy" disabled /> Spaß haben<br />
<input type="checkbox" name="learning" value="learning" checked disabled /> Lernen<br />
</form>
</body>
</html>
4. Combo-Box innerhalb eines Kennzeichnungselemets Beispiel
Bei dieser Methode kann man den Status des Auswahlfeldes auch durch Klicken auf den Text ändern.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label {
cursor: pointer;
}
</style>
</head>
<body>
<form name="my-form">
<div>Meine Ziele:</div>
<label><input type="checkbox" name="friends" value="friends" /> Freunde</label>
<br />
<label><input type="checkbox" name="enjoy" value="enjoy" /> Spaß haben</label>
<br />
<label><input type="checkbox" name="learning" value="learning" /> Lernen</label>
</form>
</body>
</html>
Hinweis:
input-Element soll zusammen mit dem Text imlabel-Element (Kennzeichnungselemet) platziert werden.
5. Combo-Box mit Label (Kennzeichnung) Beispiel
Bei dieser Methode kann man den Status des Auswahlfeldes auch durch Klicken auf den Text ändern.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label {
cursor: pointer;
}
</style>
</head>
<body>
<form name="my-form">
<div>Meine Ziele:</div>
<input type="checkbox" name="friends" id="friends" value="friends" />
<label for="friends">Freunde</label>
<br />
<input type="checkbox" name="enjoy" id="enjoy" value="enjoy" />
<label for="enjoy">Spaß haben</label>
<br />
<input type="checkbox" name="learning" id="learning" value="learning" />
<label for="learning">Lernen</label>
</form>
</body>
</html>