@@Sophie
<form action="" method="POST"> <label for="status">Status</label> <select name="status" id="status" onchange="this.form.submit()"> <option value="">-- Bitte wählen --</option> <option value="1">Online</option> <option value="2">Offline</option> <option value="3">Gelöscht</option> <option value="4">Rückfrage</option> </select> </form>
Ich halte select
für keine gute Idee.
- Nutzer sieht nicht gleich alle Optionen.
- Nutzer muss 2 Interaktionen ausführen: erst öffnen des Menüs, dann Auswahl
- es ist eine Option vorausgewählt, die dar keine Option ist
Besser sind in den allermeisten Fällen Radio-Buttons:
<form method="POST" onchange="this.submit()">
<fieldset>
<legend>Status</legend>
<label><input type="radio" name="status" value="1" required> Online</label>
<label><input type="radio" name="status" value="2" required> Offline</label>
<label><input type="radio" name="status" value="3" required> Gelöscht</label>
<label><input type="radio" name="status" value="4" required> Rückfrage</label>
</fieldset>
<button>Status ändern</button>
</form>
(Die HTML-Spec sagt: action=""
ist nicht erlaubt, einfach weglassen. required
bei jedem der Radio-Buttons ist empfohlene Praxis, siehe Beispiel 23)
Du lauschst jetzt aufs change
-Event des form
-Elements.
Wie bereits gesagt, sollte das nicht im HTML-Code stehen. Stattdessen gibts du dem Formular einen Namen:
<form method="POST" name="status-form">
und registrierst den Eventhandler:
var statusFormElement = document.forms['status-form'];
statusFormElement.addEventListener('change', function () { this.submit(); });
Näheres dazu bei molily: Fortgeschrittene Ereignisverarbeitung. (Den Teil ab „Event-Handling gemäß Microsoft für ältere Internet Explorer“ kannst du wohl ignorieren; IE 8 und älter dürfte nicht mehr relevant sein.)
Den Submit-Button hab ich eingefügt, damit das Formular auch ohne JavaScript bedienbar ist. Wenn JavaScript ausgeführt wird, dann kann der mit JavaScript(!) ausgeblendet werden:
statusFormElement.querySelector('button').setAttribute('hidden', '');
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory