SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:Form-ausgrauen-3.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 readonly</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;
}
textarea:read-only {
background-color: #fffbf0;
border: thin solid #e7c157;
cursor: help;
}
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>readonly</code></h1>
<form>
<fieldset id="agb">
<textarea id="agb-text" name="agb-text" readonly cols="80" rows="18" > I. Geltungsbereich
1. Diese Verkaufsbedingungen gelten ausschließlich gegenüber Unternehmern, juristischen Personen des öffentlichen Rechts oder öffentlich-rechtlichen Sondervermögen im Sinne von Paragraf 310 Absatz 1 BGB. Entgegenstehende oder von unseren Verkaufsbedingungen abweichende Bedingungen des Bestellers erkennen wir nur an, wenn wir ausdrücklich schriftlich der Geltung zustimmen.
2. Diese Verkaufsbedingungen gelten auch für alle zukünftigen Geschäfte mit dem Besteller, soweit es sich um Rechtsgeschäfte verwandter Art handelt (vorsorglich sollten die Verkaufsbedingungen in jedem Fall der Auftragsbestätigung beigefügt werden)
3. Im Einzelfall getroffene, individuelle Vereinbarungen mit dem Käufer (einschließlich Nebenabreden, Ergänzungen und Änderungen) haben in jedem Fall Vorrang vor diesen Verkaufsbedingungen. Für den Inhalt derartiger Vereinbarungen ist, vorbehaltlich des Gegenbeweises, ein schriftlicher Vertrag bzw. unsere schriftliche Bestätigung maßgebend.
...
</textarea>
<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>
