Languages
[Edit]
DE

HTML - Auswahlfeld - Beispiel

3 points
Created by:
Nikki
10460

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

 

HTML (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join