Comment faire un formulaire centré dans la page avec HTML et CSS - Letecode
Suivez nous
@johnmbiya - 607 dans HTML CSS

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

pas de sous titre

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

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.

 

@johnmbiya
Jean Claude Mbiya (johnmbiya)

je suis developper fullstack, Dévelopeur android (AAD), créateur de letecode.com, bloggeur, formateur, fondateur de Guide Light System, j'aime la science informatique 😎👨‍💻

P : 386 7 7 24
Abonnez vous !

Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +500 Abonnés, Nous n'envoyons pas des spam !

Voir plus

13 commentaire (s)

  • Image placeholder
    @johnmbiya il y a 1 mois

    Merci @johnmbiya

    Répondre
  • Image placeholder
    Ferdinand il y a 1 an

    Félicitation et nous sommes derrière.

    Répondre
  • Image placeholder
    lemuel il y a 1 an

    bonjour j ai aime votre maniere d expliquer sur le formulaire

    Répondre
  • Image placeholder
    Ferdinand il y a 1 an

    Très beau mon cher confrère!

    Répondre
    Réponses
    • Image placeholder
      @johnmbiya il y a 1 an

      Merci ferdinand, laissez moi vos demandes et je vais écrire des articles pour vous.

  • Image placeholder
    Joshua Simba il y a 1 an

    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
    Réponses
    • Image placeholder
      @johnmbiya il y a 1 an

      Nous vous recommandons de nous laisser toute suggestion ou demande d'articles pour votre connaissance

    • Image placeholder
      @johnmbiya il y a 1 an

      Super reste connectée et tu auras plein des trucs à connaître

  • Image placeholder
    Simba il y a 1 an

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

    Répondre

Laissez votre commentaire à @johnmbiya