Beispiel:Formular-15a.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular 15a - user-valid</title>
<style>
input:required:user-invalid + label::before {
position: absolute;
left: 300%;
content: "★";
color: red;
}
input:required:user-valid + label::before {
position: absolute;
left: 300%;
content: "✔";
color: green;
}
input:user-valid { background-color: #bed590; }
form {
width: 30em;
padding-top: 3em;
position: relative;
}
input {
margin: 0 0 1em 31%;
padding: .2em .5em;
width: 60%;
background-color: #fffbf0;
border: thin solid #e7c157;
}
label {
text-align: right;
line-height: 1.5;
width: 30%;
position: absolute;
left: 0;
}
label::after {
content: ": ";
}
button {
margin-left: 31%;
}
</style>
</head>
<body>
Valide BEnutzer-Eingaben mit :user-valid
<form>
<input id="bname" required><label for="bname">Benutzername</label>
<input id="email" type="email" value="test@example.com" required><label for="email">Email</label>
<button type="submit">Anmelden</button>
</form>
</body> </html>
