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 - Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)

PHP - Pixel eines Bildes in Zentimeter berechnen

JavaScript - Löschen mit Sicherheitsabfrage

MySQL - Summe einer Spalte ermitteln

Gesamter Inhalt zentriert
Vor allem Anfänger machen oft den Fehler die gesamte Webseite "auf die Mittelachse zu schrauben". Zentrierten Text sollte man verwenden, wenn man etwas hervorheben möchte, für längere Textpassagen ist er denkbar ungeeignet, weil er sehr schlecht lesbar ist. Eine Seite, auf der alles zentriert ist, macht einen unprofessionellen Eindruck.