Comment faire un formulaire centré dans la page avec HTML et CSS
pas de sous titre
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 :
<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.
Développeur Web full stack, Développeur Android (Certifié 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.
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
Suivez nous
Populaires
Comment faire un formulaire centré dans la page avec HTML et CSS
Transferer vos fichiers en ligne via le protocole FTP
La Casa de Papel saison 5 (Netflix) : date, casting, les intrigues… les dernières nouvelles
Comment installer et utiliser Composer
Comment Installer WhatsApp sur PC sans Téléphone ?
Tutoriel Laravel 8 Importer et Exporter un fichier Excel et CSV
Améliorez la vitesse de chargement de vos pages sur tous les appareils avec PageSpeed Insights
Qu'est-ce qu'Open Graph et comment puis-je l'utiliser pour mon site Web ?
Qu'est-ce qu'Emmet ? Comment utiliser Emmet pour accélérez votre codage ?
Abonnez-vous
Abonnez-vous
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
Catégories
15 commentaire(s)
Laissez votre commentaire à @johnmbiya
@nginamau-vata-larousse-1653080025 il y a 4 mois
merci l'explication est claire
Répondre1 réponses
@johnmbiya il y a 3 mois
C'est un plaisir, veillez trouver également des tutoriels sur css la section tutoriels ici sur Letecode.com
@johnmbiya il y a 11 mois
Merci @johnmbiya
RépondreFerdinand il y a 2 ans
Félicitation et nous sommes derrière.
Répondrelemuel il y a 2 ans
bonjour j ai aime votre maniere d expliquer sur le formulaire
RépondreFerdinand il y a 2 ans
Très beau mon cher confrère!
Répondre1 réponses
@johnmbiya 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épondre2 réponses
@johnmbiya il y a 2 ans
Nous vous recommandons de nous laisser toute suggestion ou demande d'articles pour votre connaissance
@johnmbiya 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