Comment faire un formulaire centré dans la page avec HTML et CSS

pas de sous titre

Jean Claude Mise à jour : 21 décembre 2022 3365

Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici

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>
</body>

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.

Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici

Laisser un commentaire

Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.

Voir plus

Passage d’un site aux protocoles sécurisés HTTPS. Pourquoi ? Comment ? Quand ?

Web

17 commentaire(s)

@Diamona Noel il y a 3 heures

Une très bonne article mon cher @johnmbiya
Répondre
@Exaucé Malka il y a 3 mois

Hello
Répondre
@Nginamau Vata Larousse il y a 8 mois

merci l'explication est claire
Répondre
1 réponses
- @Jean Claude Mbiya il y a 7 mois
  
  C'est un plaisir, veillez trouver également des tutoriels sur css la section tutoriels ici sur Letecode.com
@Jean Claude Mbiya il y a 1 an

Merci @johnmbiya
Répondre
Ferdinand il y a 2 ans

Félicitation et nous sommes derrière.
Répondre
lemuel il y a 2 ans

bonjour j ai aime votre maniere d expliquer sur le formulaire
Répondre
Ferdinand il y a 2 ans

Très beau mon cher confrère!
Répondre
1 réponses
- @Jean Claude Mbiya il y a 2 ans
  
  Merci ferdinand, laissez moi vos demandes et je vais écrire des articles pour vous.
Joshua Simba il y a 2 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épondre
2 réponses
- @Jean Claude Mbiya il y a 2 ans
  
  Nous vous recommandons de nous laisser toute suggestion ou demande d'articles pour votre connaissance
- @Jean Claude Mbiya il y a 2 ans
  
  Super reste connectée et tu auras plein des trucs à connaître
Simba il y a 2 ans

Je suis très content d'avoir un tél blog
Répondre