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:Web-App-01.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>Mathe-Quiz (nur HTML + CSS)</title>
<style>
.toggle-buttons {
border: none;
}
.toggle-buttons input[type="radio"]{
visibility:hidden;
}
.toggle-buttons label {
display: inline-block;
border: 1px solid #333;
border-radius: 0.5em;
padding: 0.4em 0em;
width: 1.85em;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
line-height: 100%;
}
.toggle-buttons label:last-child {font-size: 1rem; width: 2em; padding: 0.1em 0.4em 0.7em;}
.toggle-buttons input:checked + label {
background: #ebf5d7;
color: #5a9900;
box-shadow: none;
}
button {
font-size: 2em;
padding: -0.4em 0 0;
}
</style>
</head>
<body>
<h1>Mathe-Quiz (nur HTML + CSS)</h1>
<form class="toggle-buttons" id="rechenarten">
<input type="radio" name="op" id="add" checked><label for="add">+</label>
<input type="radio" name="op" id="substract"> <label for="substract">-</label>
<input type="radio" name="op" id="divide"> <label for="divide">÷</label>
<input type="radio" name="op" id="multiply"> <label for="multiply">x</label>
<input type="radio" name="op" id="any"> <label for="any" title="Zufallsauswahl">+ -<br>÷ x </label>
</form>
<form id="task">
<span id="var1">a</span>
<span id="operator">+</span>
<span id="var2">b</span>
=
<input id="input" size="3">
<button type="submit">↵</button>
</form>
<output>Ergebnisausgabe</output>
</body>
</html>
