CSS - Fehleingaben in Formularen farbig hervorheben


<style>

input:valid {
  
colorgreen
}

input:invalid {
   
colorred
}
</
style>

<
p><label>GROSSBUCHSTABEN:<br>
  <
input type="text" pattern="^[A-Z]+$" placeholder="ABCDEF">
</
label>
</
p>

<
p><label>kleinbuchstaben:<br>
  <
input type="text" pattern="^[a-z]+$" placeholder="abcdef">
</
label>
</
p>

<
p><label>Zahlen:<br>
  <
input type="text" pattern="^[0-9]+$" placeholder="12345">
</
label>
</
p>

<
p><label>E-Mail:<br>
    <
input type="mail" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="name@example.com">
</
label>
</
p>

Danke an: Andrzej Kossowski

Siehe auch: Fehleingaben in Formularen mit CSS hervorheben

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<bdi> Textrichtung

CSS - Animierte Unterstreichung

PHP - Alter berechnen

JavaScript - Darstellungsmodus überprüfen

MySQL - Mehrere Spalten einer Tabelle sortieren

100% Text
Eine Seite sollte nicht nur mit 100% Text gefüllt sein. Lockern Sie die Seite auf zum Beispiel mit verschieden großen Absätzen, farbigen Überschriften, Bildern und Hyperlinks. Vom großen Vorteil ist, wenn der Text nicht über die ganze Browserseite geht. Mit Tabellen können Sie die Textbreite leicht begrenzen => bessere Lesbarkeit und Übersicht.