Beispiel:HTML input-Element9.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkboxen</title>
<style>
fieldset {
padding: 1em;
margin-block: 2em;
border:none;
}
legend {
font-size: 1.1em;
font-weight: bold;
border: thin solid;
border-radius: 0.5em;
padding-inline: 0.5em;
background: white;
}
input {
margin-right: 1em;
}
label::after {
content: "";
display: block;
}
body {
background-image: linear-gradient(135deg, red 20%, white 25%, white 75%, green 79%);
background-repeat: no-repeat;
height: 100vh;
margin: 0;
}
h1,
form {
width: 20em;
margin: 0 auto;
}
h1 {
padding: 1em 0;
text-align:center;
}
</style>
</head>
<body>
<h1>Pizza nach Wahl!</h1>
<form id="order">
<label for="order"> Wähl Dir Deine Pizza:</label>
<fieldset>
<legend>Boden</legend>
<input type="radio" id="wh" name="Boden" value="1" checked>
<label for="wh"> Weizen</label>
<input type="radio" id="wm" name="Boden" value="2">
<label for="wm"> Vollkorn</label>
<input type="radio" id="dinkel" name="Boden" value="3">
<label for="dinkel">Dinkel</label>
</fieldset>
<fieldset>
<legend>Zutaten</legend>
<input type="checkbox" name="zutat" value="kaese" id="check1" checked><label for="check1">Käse</label>
<input type="checkbox" name="zutat" value="schinken" id="check2"><label for="check2">Schinken</label>
<input type="checkbox" name="zutat" value="salami" id="check3"><label for="check3">Salami</label>
<input type="checkbox" name="zutat" value="oliven" id="check4"><label for="check4">Oliven</label>
<input type="checkbox" name="zutat" value="paprika" id="check5"><label for="check5">Paprika</label>
<input type="checkbox" name="zutat" value="pilze" id="check6"><label for="check6">Pilze</label>
</fieldset>
</form>
</body>
</html>
