• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Auswahlliste

LudwigM

Mitglied
Hallo,
ich möchte gerne eine Liste anzeigen, in der man die verschiedenen Elemente auswählen kann (z.B. per Haken). Gleichzeitig soll es möglich sein für jedes Element Daten zu editieren. Z.B.

Auswahl | Elementname | Uhrzeit Beginn | Uhrzeit Ende

☑ | Element 1 | 09:00 | 12:00 |​

☐ | Element 2 | 10:00 | 12:30 |​

☑ | Element 3 | 09:00 | 11:00 |​


Wobei die Uhrzeiten jeweils bearbeitet werden können sollen. Wie mache ich das am einfachsten?
Es geht erstmal darum, mit welchen HTML-Elementen die Anzeige der Liste erfolgt

Ich möchte für alle Felder der Klasse "datIncrease" das Datum um einen Tag erhöhen. Wie mache ich das am besten?

Javascript:
<input type="date" id="dat" name="dat" class="form-control datIncrease"  value="<? echo date("Y-m-d"); ?>" required>
 
Werbung:
Durch dieses CSS zeigt der Rahmen dann an, ob die Eingabe korrekt ist:
Eine unterschiedliche Rahmenfarbe reicht nicht um fehlerhafte Eingabefelder zu kennzeichnen - nicht jeder kann unterscheiden ob der Rahmen rot oder grün ist. Und outline:none; ist (vorsichtig ausgedrückt) auch keine gute Idee: damit ist bei Tastaturbedienung nicht mehr erkennbar welches Eingabefeld aktiv ist. Wenn :focus (bzw. :focus-visible) anderweitig kenntlich gemacht wird, ist das ok, sonst nicht.

Es gibt auch ein Eingabefeld vom Typ "time":
… welches die einzig sinnvolle Variante ist - und nein, dass die Anzeige browserabhängig ist, ist kein Nachteil: im Gegenteil, das Feld sieht im vom Benutzer verwendeten Browser immer gleich aus und wird auch gleich bedient.
 
<input pattern="\d{2}:\d{2}" placeholder="hh:mm">

Man kann komplizierte Regexes entwickeln, die auch das abdecken, ist aber nicht zu empfehlen.
Warum sind dMn Pattern (RegEx) nicht zu empfehlen?

Die Eingabe muss natürlich sowiso genau geprüft werden bevor sie weiterverarbeitet wird, aber wenn die Eingabe schon beim eingeben gegen ein Muster verglichen werden soll dann ist der type TEXT ganz in Ordnung.

HTML:
<input type="text" pattern="([01]\d|2[0-3]):[0-5]\d" placeholder="hh:mm">

So kompliziert war das eigentlich nicht. und mit dem styling kann man ja spielen
CSS:
input:invalid{ /*Eine fehlerhafte Eingabe:*/
 color:red;
}
input:valid{ /*Eine korrekte Eingabe:*/
 color:green;
}
input[required]{ /*Ein Plichtfeld:*/
 background-color:#F08080;
}
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben