SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:Form-ausgrauen-2.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">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Ausgrauen mit disabled</title>
<style>
form {
width: 25em;
}
fieldset:disabled {
background: whitesmoke;
cursor:not-allowed;
}
input {
margin: 0 0 1em 1em;
text-align: right;
padding: 0.3em;
}
input:disabled {
background: gainsboro;
}
input:disabled[value] {
color: whitesmoke;
}
label {
display: inline-block;
text-align: right;
width: 12em;
}
#persAngaben label {
float: left;
width: 10em;
}
button {
margin-left: 13em;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
//Ablehnen-Button wird auch beim Neuladen wieder aus true gesetzt
document.getElementById('ablehnen').checked = true;
document.querySelector('#agb').addEventListener('click', weiter);
function weiter() {
if (document.getElementById('akzeptieren').checked == true) {
document.getElementById('persAngaben').removeAttribute('disabled');
}
if (document.getElementById('ablehnen').checked == true) {
document.getElementById('persAngaben').setAttribute('disabled','disabled');
}
}
});
</script>
</head>
<body>
<h1>Ausgrauen mit <code>disabled</code></h1>
<form>
<fieldset id="agb">
<input type="radio" name="agb" id="akzeptieren" value="ok" ><label for="akzeptieren">unsere AGB akzeptieren</label><br>
<input type="radio" name="agb" id="ablehnen" value="no" checked><label for="ablehnen">ablehnen</label>
</fieldset>
<fieldset id="persAngaben" disabled>
<label for="input1">Benutzername</label> <input value="Hans" id="input1">
<label for="input2">Passwort</label> <input type="password" value="Passwort" id="input2">
<button type="button" onclick="alert('Hallo und herzlich willkommen!')">Einloggen!</button>
</fieldset>
</form>
</body>
</html>
