Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    etudiant developpeur web
    Inscrit en
    février 2018
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : etudiant developpeur web

    Informations forums :
    Inscription : février 2018
    Messages : 63
    Points : 47
    Points
    47

    Par défaut Centrage boutons submit et reset

    Soit mon formulaire suivant :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <form action="#" method="post" name="contact-form">
    			<p>Contactez-nous</p>
    				<fieldset>
    					<label for="nom">Nom* :</label>
    					<input type="text" name="Nom" id="nom" placeholder="Entrez votre nom" required="">
    				</fieldset>
    				<fieldset>
    					<label for="telephone">Téléphone :</label>
    					<input type="tel" name="numTel" id="tel" placeholder="Indiquez votre numéro de téléphone">
    				</fieldset>
    				<fieldset>
    					 <label for="e-mail">Email* :</label>
    					<input type="email" name="Email" id="email" placeholder="Votre e-mail" required="">
    				</fieldset>
    				<fieldset>                                                                              
    					<label>Message :</label>
    					<textarea name="message" rows="6" cols="48" placeholder="Laissez-nous un message"></textarea>
    				</fieldset>
    				<fieldset class="action">
    					<input type="submit" class="submit-button">
    					<input type="reset" class="reset-button">
    				</fieldset>
    			</div>
    		</form>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    #wrapper{
      margin: 0 auto;
      width: 1200px;
    }
    form{	
    	width: 900px;
    	margin: 0 auto;
    	color: #669;
    	background: rgba(250,250,250,0.5);
    	padding: 20px 15px;
    	border-radius: 15px;
    }
    form > p{
    	margin-left: 25px;
    }
    label, input, textarea{
    	margin-left: 10px;
    	padding: 0.2em;
    }
    input{
      width: 400px;
      border-radius: 15px;
      border: none;
    }
    textarea{
    	border-radius: 15px;
    	border: none;
    }
    fieldset{
      display: inline;
      border: none;
      vertical-align: top;
    }
    label{
      display: block;
    }
    .action{
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content:&#8203; center;
    }
    .action > input{
    	width: 100px;
    	margin: 0.3em;
    }

    Au niveau de mon CSS, l'action justify-content ou align-items ne me centre pas mes deux boutons dans le formulaire, ils restent décalés.
    Pour le reste du formulaire, la présentation est conforme à mes attentes (même si je trouve mon html un peu lourd, je pense qu'il y a un moyen de simplifier) mais je ne parviens pas à centrer mes boutons.

    Quelqu'un aurait une lumineuse idée?

    Merci

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 673
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 673
    Points : 27 707
    Points
    27 707

    Par défaut

    Bonjour,

    1- Tu abuses de la balise <fieldset> : "élément pour les ensembles de champs".

    2-
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    justify-content:&#8203; center;
    : il y a un caractère non voulu

    3- Le code n'est pas responsive (width en pixels )

    4-
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .action > input{
    	width: 100px;
    	margin: 0.3em auto; /* auto : centrage */
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 073
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 073
    Points : 31 408
    Points
    31 408

    Par défaut

    Bonjour,
    j'ajouterais que l'élément <fieldset> est un mauvais candidat pour les modèles de boîtes flexibles : Some HTML elements can't be flex containers.

  4. #4
    Membre du Club
    Homme Profil pro
    etudiant developpeur web
    Inscrit en
    février 2018
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : etudiant developpeur web

    Informations forums :
    Inscription : février 2018
    Messages : 63
    Points : 47
    Points
    47

    Par défaut je modifie de la façon suivante

    Peut-être que si je modifie comme cela :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <form action="#" method="post" name="contact-form">
    			<p>Contactez-nous</p>
    				<div class="form-item">
    					<label for="nom">Nom* :</label>
    					<input type="text" name="Nom" id="nom" placeholder="Entrez votre nom" required="">
    				</div>
    				<div class="form-item">
    					<label for="telephone">Téléphone :</label>
    					<input type="tel" name="numTel" id="tel" placeholder="Indiquez votre numéro de téléphone">
    				</div>
    				<div class="form-item">
    					 <label for="e-mail">Email* :</label>
    					<input type="email" name="Email" id="email" placeholder="Votre e-mail" required="">
    				</div>
    				<div class="form-item">                                                                              
    					<label>Message :</label>
    					<textarea name="message" rows="6" cols="48" placeholder="Laissez-nous un message"></textarea>
    				</div>
    				<div class="action">
    					<input type="submit" class="submit-button">
    					<input type="reset" class="reset-button">
    				</div>
    			</div>
    		</form>

    et le CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    #wrapper{
      margin: 0 auto;
      width: 1200px;
    }
    form{	
    	width: 900px;
    	margin: 0 auto;
    	color: #669;
    	background: rgba(250,250,250,0.5);
    	padding: 20px 15px;
    	border-radius: 15px;
    }
    form > p{
    	margin-left: 25px;
    }
    label, input, textarea{
    	margin-left: 10px;
    	padding: 0.2em;
    }
    input{
      width: 400px;
      border-radius: 15px;
      border: none;
    }
    textarea{
    	border-radius: 15px;
    	border: none;
    }
    .form-item{
      display: inline;
      border: none;
      vertical-align: top;
    }
    label{
      display: block;
    }
    .action{
      margin: 0 auto;
      display: flex;
      flex-direction: column;  
    }
    .action > input{
    	width: 10%;
    	margin: 0.3em auto;
    }

    Le boutons s'alignent donc ça c'est bon, et j'ai modifié le width pour le responsive (merci cela m'avait échappé )
    Cependant mes items ne s'agencent plus comme il faut

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 673
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 673
    Points : 27 707
    Points
    27 707

    Par défaut

    Bonjour,

    Tu cumules les lacunes.

    LIS ou relis des tutos sur :
    • Formulaire strcture html
    • Mise en page CSS avec des div
    • Flexbox CSS

    Regarde et FAIS des EXERCICES de mise en page simple en HTML / CSS

    Regarde aussi comment s'utilise <label for...>.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    avril 2017
    Messages
    360
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2017
    Messages : 360
    Points : 449
    Points
    449

    Par défaut

    Bonjour,
    1) tu veux que tes boutons soient centrés comment ? Fait une capture.
    2) jette un coup d'œil sur le CSS bootstrap.

    Cordialement.

Discussions similaires

  1. Réponses: 7
    Dernier message: 03/03/2005, 12h36
  2. Pas soumettre un bouton submit quand "enter" press
    Par novastar dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/03/2005, 19h16
  3. Transormer un lien bouton submit avec nom et valeur ?
    Par boteha dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 20/02/2005, 20h23
  4. Formulaire et bouton submit avec image mapée
    Par dody dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 06/12/2004, 17h00
  5. Javascript bouton submit
    Par lilou0210 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/11/2004, 12h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo