Formular mit Validierung

CC by-sa 4.0 (c) Sebastian Kiel

by Thunderbolt

HTML

<form>
  <fieldset>
    <legend>Login</legend>
    <label for="user">Benutzername:</label>
    <input name="user" id="user" type="text" placeholder="Max" pattern="[A-Za-z0-9]{8,16}" title="Benutzername bestehend aus 8 bis 16 Buchstaben und Zahlen" required>
    <label for="password">Passwort:</label>
    <input name="password" id="password" type="password" placeholder="••••••••••" pattern="[A-Za-z0-9]{8,16}" title="Passwort bestehend aus 8 bis 16 Buchstaben und Zahlen" required>
    <!-- Ohne gesetztes value-Attribut wird der Browser in der korrekten Sprache sprechen -->
    <input type="submit">
  </fieldset>
</form>
<p><a href="https://creativecommons.org/licenses/by-sa/4.0/">CC by-sa 4.0</a> (c) Sebastian Kiel</p>

CSS

/* CSS-Programmierung */
* { transition: 2s;}
input:invalid{ border-color: red; background-color: coral; }
input:not([type=submit]):valid, form:valid fieldset{ border-color: green; background-color: greenyellow;}
form:valid fieldset input[type=submit]{ display: inline; }
input:placeholder-shown { border-color: blue; background-color: initial; }