Voici un fomulaire d'authentification simple basé sur des règles CSS maison.
<form method="post" action="...">
<div class="ligne-formulaire">
<label for="code">* Code : </label>
<input type="text" id="code" name="code">
</div>
<div class="ligne-formulaire">
<label for="motdepasse">* Mot de passe : </label>
<input type="password" id="motdepasse" name="motdepasse">
</div>
<div class="ligne-formulaire">
<input type="submit" id="soumettre" name="soumettre" value="Soumettre">
</div>
</form>
Quelques règles CSS permettent d'améliorer l'apparence.
Selon les autres règles CSS de votre site, vous pourriez avoir à y apporter des ajustements pour obtenir le résultat désiré.
.ligne-formulaire {
display: grid;
grid-template-columns: 110px 1fr; /* Ajuster la taille de la première colonne selon la taille des libellés */
margin-bottom: 5px;
grid-template-areas: "libelle saisie";
}
input {
height: 25px;
border: 1px solid #C6CED4;
border-radius: 3px;
}
input:focus-visible {
border: 1px solid #5C9FA0;
outline: none;
}
input[type="submit"] {
grid-area: saisie; /* sera affiché dans la colonne des input */
font-size: 1em;
background-color: #5C9FA0;
border: none;
border-radius: 3px;
color: #fff;
padding: 10px 12px;
height: auto;
text-decoration: none;
cursor: pointer;
margin: 5px 0;
}
Et voilà le résultat :
▼Publicité
