SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Lotto-3.html
Aus SELFHTML-Wiki
<!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>
<h1>Lotto – 6 aus 49</h1>
<p class="warnung">Glücksspiel kann süchtig machen.</p>
<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>
