![](https://www.letecode.com/storage/articles/March2020/mAN1VlS8fnj3Qz1KnQXG.png)
Comment faire un formulaire centré dans la page avec HTML et CSS
pas de sous titre
![Jean Claude Mbiya](http://letecode.com/storage/profile-photos/user-jean-claude-mbiya16448f9f326b25.png)
Vous avez deja voulu crée un bloc ou un formulaire qui reste fixe au centre de la page peu importe les tailles des écrans.
Dans cette article nous allons apprendre à créer un formulaire centré dans la page verticalement et horizontalement avec simplement du HTML et CSS
pour commencer, créer une page html avec un formulaire dans le body :
<body> <div id="form">
<form>
<label for="inputPassword">Entrer Votre Code</label>
<input type="password" id="inputPassword" placeholder="Code">
<button type="submit">Valider</button>
</form>
</div>
Comme vous pouvez voir, nous avons mis un simple formulaire dans le body de notre page pour permettre à l'utilisateur de saisir son code.
Mais vous ne serez pas surpris du résultat à ce niveau puisque on a pas encore ajouté du CSS.
jusque là, notre page affiche ceci:
Pour mettre ce formulaire au centre de la page, nous allons ajouté ces codes CSS :
<head>
<meta charset="utf-8">
<title>Formulaire</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="width=device-width , initial-scale=1.0" name="viewport">
<style>
#form{
width: 350px;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
</style>
</head>
Ajouter ce bout de code code dans la balise Head de votre page, et c'est fait. Votre formulaire se positionnera au centre de la page.
Voir aussi : Comment integrer Bootstrap dans vos pages HTML
Cet article vous a plu ?
N'oubliez surtout pas de nous laissez en commentaire vos suggestions et toute demande d'article que vous avez besoin.
0 commentaire(s)
Laissez votre commentaire à @johnmbiya
Posts similaires
Comment faire un formulaire centré dans la page avec HTML et CSS
Configurer le Mode claire et Sombre ( Dark Mode) sur votre site web
Catégories
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
@wilfried-samen-1677306121 il y a 1 an
merci pour cet articles. je veux un article sur le login
Répondre@diamona-noel-1646128682 il y a 1 an
Une très bonne article mon cher @johnmbiya
Répondre@ il y a 1 an
Hello
Répondre@nginamau-vata-larousse-1653080025 il y a 2 ans
merci l'explication est claire
Répondre1 réponses
@johnmbiya il y a 2 ans
C'est un plaisir, veillez trouver également des tutoriels sur css la section tutoriels ici sur Letecode.com
@johnmbiya il y a 2 ans
Merci @johnmbiya
RépondreFerdinand il y a 4 ans
Félicitation et nous sommes derrière.
Répondrelemuel il y a 4 ans
bonjour j ai aime votre maniere d expliquer sur le formulaire
RépondreFerdinand il y a 4 ans
Très beau mon cher confrère!
Répondre1 réponses
@johnmbiya il y a 4 ans
Merci ferdinand, laissez moi vos demandes et je vais écrire des articles pour vous.
Joshua Simba il y a 4 ans
Je suis heureux d'avoir consulter cette page qui m'a donné la solution à un problème que j'avais en HTML et CSS.
Répondre2 réponses
@johnmbiya il y a 4 ans
Nous vous recommandons de nous laisser toute suggestion ou demande d'articles pour votre connaissance
@johnmbiya il y a 4 ans
Super reste connectée et tu auras plein des trucs à connaître
Simba il y a 4 ans
Je suis très content d'avoir un tél blog
Répondre