Beispiel:Lotto-3.html
<!doctype html> <html> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>Lotto - 6 aus 49</title>
<script> document.addEventListener('DOMContentLoaded', function () {
const lotto = document.querySelector('#lotto'); lotto.addEventListener('input', lottoNumberChanged);
function lottoNumberChanged(event) { let chosenNumbers = lotto.querySelectorAll('input[type=checkbox]:checked'); if (chosenNumbers.length > 6) { event.target.checked = false; alert('Mit sieben Zahlen wird Ihr Tippschein ungültig!');
}
}
}); </script>
<style>
input {
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } label { position: relative; text-align: center; color: firebrick; border: thin solid firebrick; line-height: 1.5; }
- checked + label::after {
content: "×";
position: absolute; left: 0; top: -1.15rem; right: 0; font-size: 2.5rem; color: darkblue; opacity: .6; }
html { font-family: sans-serif; } form {
width: min-content;
}
fieldset { display: grid; gap: .25rem; }
- tippfeld {
grid-template: repeat(7, 1.5rem) / repeat(7, 1.5rem); }
- superzahl {
grid-template: 1.5rem / repeat(10, 1.5rem); }
</style> </head>
<body>
Lotto – 6 aus 49
Glücksspiel kann süchtig machen.
<form id="lotto" autocomplete="off"> <fieldset id="tippfeld"> <legend>6 aus 49</legend> <input type="checkbox" id="1"><label for="1">1</label> <input type="checkbox" id="2"><label for="2">2</label> <input type="checkbox" id="3"><label for="3">3</label> <input type="checkbox" id="4"><label for="4">4</label> <input type="checkbox" id="5"><label for="5">5</label> <input type="checkbox" id="6"><label for="6">6</label> <input type="checkbox" id="7"><label for="7">7</label> <input type="checkbox" id="8"><label for="8">8</label> <input type="checkbox" id="9"><label for="9">9</label> <input type="checkbox" id="10"><label for="10">10</label>
<input type="checkbox" id="11"><label for="11">11</label>
<input type="checkbox" id="12"><label for="12">12</label> <input type="checkbox" id="13"><label for="13">13</label> <input type="checkbox" id="14"><label for="14">14</label> <input type="checkbox" id="15"><label for="15">15</label> <input type="checkbox" id="16"><label for="16">16</label> <input type="checkbox" id="17"><label for="17">17</label> <input type="checkbox" id="18"><label for="18">18</label> <input type="checkbox" id="19"><label for="19">19</label> <input type="checkbox" id="20"><label for="20">20</label>
<input type="checkbox" id="21"><label for="21">21</label>
<input type="checkbox" id="22"><label for="22">22</label> <input type="checkbox" id="23"><label for="23">23</label> <input type="checkbox" id="24"><label for="24">24</label> <input type="checkbox" id="25"><label for="25">25</label> <input type="checkbox" id="26"><label for="26">26</label> <input type="checkbox" id="27"><label for="27">27</label> <input type="checkbox" id="28"><label for="28">28</label> <input type="checkbox" id="29"><label for="29">29</label> <input type="checkbox" id="30"><label for="30">30</label> <input type="checkbox" id="31"><label for="31">31</label> <input type="checkbox" id="32"><label for="32">32</label> <input type="checkbox" id="33"><label for="33">33</label> <input type="checkbox" id="34"><label for="34">34</label> <input type="checkbox" id="35"><label for="35">35</label> <input type="checkbox" id="36"><label for="36">36</label> <input type="checkbox" id="37"><label for="37">37</label> <input type="checkbox" id="38"><label for="38">38</label> <input type="checkbox" id="39"><label for="39">39</label> <input type="checkbox" id="40"><label for="40">40</label> <input type="checkbox" id="41"><label for="41">41</label> <input type="checkbox" id="42"><label for="42">42</label> <input type="checkbox" id="43"><label for="43">43</label> <input type="checkbox" id="44"><label for="44">44</label> <input type="checkbox" id="45"><label for="45">45</label> <input type="checkbox" id="46"><label for="46">46</label> <input type="checkbox" id="47"><label for="47">47</label> <input type="checkbox" id="48"><label for="48">48</label> <input type="checkbox" id="49"><label for="49">49</label> </fieldset> <fieldset id="superzahl"> <legend>Superzahl</legend> <input type="radio" name="superzahl" id="s0"><label for="s0">0</label> <input type="radio" name="superzahl" id="s1"><label for="s1">1</label> <input type="radio" name="superzahl" id="s2"><label for="s2">2</label> <input type="radio" name="superzahl" id="s3"><label for="s3">3</label> <input type="radio" name="superzahl" id="s4"><label for="s4">4</label> <input type="radio" name="superzahl" id="s5"><label for="s5">5</label> <input type="radio" name="superzahl" id="s6"><label for="s6">6</label> <input type="radio" name="superzahl" id="s7"><label for="s7">7</label> <input type="radio" name="superzahl" id="s8"><label for="s8">8</label> <input type="radio" name="superzahl" id="s9"><label for="s9">9</label> </fieldset> </form>
</body> </html>
