HTML5+CSS3 Anmeldung

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="Max" 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="Passwort" 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>
  <fieldset id="cp">
    <legend>User-CP</legend>
    Sie haben sich erfoglreich angemeldet.
    <input type="reset" value="Abmelden">
  </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, #cp { display: none; }
form:valid #cp { display: inline; }
input:placeholder-shown { border-color: blue; background-color: initial; }