DE
HTML - Auswahlfeld - Beispiel
3 points
Mit Hilfe von HTML ist es möglich, ein Combo-Box (Kombinationsfeld) auf verschiedene Arten zu erstellen.
xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>Meine Ziele: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Freunde<br />7
<input type="checkbox" name="enjoy" value="enjoy" /> Spaß haben<br />8
<input type="checkbox" name="learning" value="learning" /> Lernen<br />9
</form>10
</body>11
</html>xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>Meine Ziele: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Freunde<br />7
<input type="checkbox" name="enjoy" value="enjoy" checked /> Spaß haben<br />8
<input type="checkbox" name="learning" value="learning" checked /> Lernen<br />9
</form>10
</body>11
</html>xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>Meine Ziele: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Freunde<br />7
<input type="checkbox" name="enjoy" value="enjoy" disabled /> Spaß haben<br />8
<input type="checkbox" name="learning" value="learning" checked disabled /> Lernen<br />9
</form>10
</body>11
</html>Bei dieser Methode kann man den Status des Auswahlfeldes auch durch Klicken auf den Text ändern.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
label {7
cursor: pointer;8
}9
10
</style>11
</head>12
<body>13
<form name="my-form">14
<div>Meine Ziele:</div>15
<label><input type="checkbox" name="friends" value="friends" /> Freunde</label>16
<br />17
<label><input type="checkbox" name="enjoy" value="enjoy" /> Spaß haben</label>18
<br />19
<label><input type="checkbox" name="learning" value="learning" /> Lernen</label>20
</form>21
</body>22
</html>Hinweis:
input-Element soll zusammen mit dem Text imlabel-Element (Kennzeichnungselemet) platziert werden.
Bei dieser Methode kann man den Status des Auswahlfeldes auch durch Klicken auf den Text ändern.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
label {7
cursor: pointer;8
}9
10
</style>11
</head>12
<body>13
<form name="my-form">14
<div>Meine Ziele:</div>15
<input type="checkbox" name="friends" id="friends" value="friends" />16
<label for="friends">Freunde</label>17
<br />18
<input type="checkbox" name="enjoy" id="enjoy" value="enjoy" />19
<label for="enjoy">Spaß haben</label>20
<br />21
<input type="checkbox" name="learning" id="learning" value="learning" />22
<label for="learning">Lernen</label>23
</form>24
</body>25
</html>
