Comment centrer un formulaire ?

Avez-vous déjà essayé de créer un formulaire ou un bloc fixé au centre d’une page ? De nombreuses personnes se trouvent dans une situation pareille sans savoir réellement quelle démarche adopter. Découvrons alors dans cet article les différentes étapes pour créer un formulaire centré en utilisant HTML et CSS.

Utilisation de la propriété CSS margin: une 1ère méthode pour centre formulaire HTML

Pour centrer un formulaire HTML, vous pouvez partir de l’utilisation de la propriété CSS margin. En effet, dans la balise form, il est possible d’écrire les styles sous forme de CSS en ligne. Dans ce cas, la propriété margin sera utilisée pour définir l’espace situé entre le conteneur et les éléments adjacents.

Pour déterminer la marge pour margin, vous pouvez fournir la valeur. Au cas où vous utiliseriez une seule valeur, cette dernière agit sur les 4 directions du conteneur. Quant à la distance restante, elle sera divisée par la valeur auto. Pour mieux comprendre les faits, essayez de créer une balise form puis écrivez dans cette balise l’attribut style. Dans cet attribut, définissez la propriété width sur 220px puis margin sur auto.

Ensuite, essayez de créer une autre balise. Celle-ci sera imput de text à laquelle vous ajouterez une autre balise imput de submit. Vous constaterez que le formulaire sera centré. Sa largeur sera de 220px. Quant à l’espace restant, il sera divisé en marges droite et gauche. Cela suppose donc que vous avez la possibilité de centrer un formulaire à partir de margin:auto tout en vous servant de CSS en HTML. Par ailleurs, le code se présente comme suit :

<form style= »margin: auto; width: 220px; »>    Enter name:<input type= »text » />    <input type= »submit » value= »Submit »/></form

Utilisation de la propriété CSS text-align : 2ème méthode pour centrer formulaire HTML

La deuxième méthode que nous vous proposons pour centrer un formulaire HTML consiste à utiliser la propriété CSS text-align. En effet, cette dernière prend plusieurs valeurs telles que justify, left, center et right. Parmi ces valeurs, vous pouvez utiliser center pour centrer le formulaire.

Pour le faire, appliquez convenablement la propriété text-align à la balise form, précisément dans l’attribut style. Ensuite, veuillez définir la propriété sur la valeur choisie, center notamment. Après cela, vous devez créer des balises imput sur la base du type text puis les balises submit.

Le code sera le suivant :

<form style= »text-align: center; « >    Enter name:<input type= »text »/> <br><br>    <input type= »submit » value= »Submit »/></form>

Toutefois, il faut noter que le formulaire occupera le bloc en entier. Cela est dû au fait qu’aucune marge n’a été préalablement fixée. Quoi qu’il en soit, cette méthode peut vous aider à centrer un formulaire en HTML. Par ailleurs, vous pouvez utiliser d’autres propriétés comme les CSS width et margin-left pour centrer votre formulaire.

à voir