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.

<canvas> Zeichnen

CSS - Notizzettel mit Büroklammer

PHP - Text nach dem Alphabet sortieren

JavaScript - Text in Großbuchstaben oder Kleinbuchstaben umwandeln

MySQL - Anzahl der Datensätze einer Spalte

Templates - HP Vorlagen
Templates sind fertige Homepage Vorlagen, die man nur noch mit Inhalt füllen muss. Das ist zwar für Anfänger eine schnelle Lösung, aber möchten Sie das gleiche Design wie auf anderen 97 Webseiten auch? Jede Homepage hat ihren eigenen Touch, eben der Stil, der die Seite einmalig macht.