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.

<nav> Navigationsbereich

CSS - Kalender Symbol neben dem Datepicker

PHP - Platzhalter aus einer txt-Datei mit PHP ersetzen

JavaScript - Die Wahl einer Auswahlliste speichern und auslesen

MySQL - Spalte Gruppieren und zählen