Nous sommes en 2019 et les réponses précédentes à ce problème n'utilisent pas
- Grille CSS
- Variables CSS
- Éléments de formulaire HTML5
- SVG en CSS
La grille CSS est le moyen de créer des formulaires en 2019, car vous pouvez faire précéder vos entrées de vos étiquettes sans avoir de div supplémentaires, de portées, de portées avec des astérisques et d'autres reliques.
Voici où nous allons avec un CSS minimal:
Le HTML pour ce qui précède:
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
Le texte d'espace réservé peut également être ajouté et est fortement recommandé. (Je réponds juste à cette mi-forme).
Maintenant pour les variables CSS:
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
Le CSS pour les éléments du formulaire:
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
Le formulaire lui-même doit être dans la grille CSS:
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
Les valeurs des colonnes peuvent être définies sur 1fr autoou 1fravec quelque chose comme<p> balises du formulaire définies sur span 1 / -1. Vous modifiez les variables dans vos requêtes multimédias afin que les zones de saisie deviennent pleine largeur sur mobile et comme indiqué ci-dessus sur le bureau. Vous pouvez également modifier votre espace de grille sur mobile si vous le souhaitez en utilisant l'approche des variables CSS.
Lorsque les cases sont valides, vous devriez obtenir une coche verte au lieu de l'astérisque.
Le SVG en CSS est un moyen d'éviter au navigateur d'avoir à faire un aller-retour vers le serveur pour obtenir une image de l'astérisque. De cette façon, vous pouvez affiner les astérisques, les exemples ici sont à un angle inhabituel, vous pouvez le modifier car l'icône SVG ci-dessus est entièrement lisible. La zone de visualisation peut également être modifiée pour placer l'astérisque au-dessus ou en dessous du centre.
