Problème mise en forme d'un formulaire

Résolu

Bryant -
incodr - 12 déc. 2013 à 15:41

Bonjour,
Je n'arrive pas à mettre correctement en forme ce petit bout de code.

<h1>Formulaire d'inscription</h1>
   <p>Bienvenue sur la page d'inscription de mon site !<br/>
   Merci de remplir ces champs pour continuer.</p>
   <body bgcolor="#64748B">
   <form action="verif_inscription.php" method="post" name="Inscription">
    <fieldset><legend>Identifiants</legend>
     <label for="Pseudo" class="float">Pseudo :</label> <input type="text" name="Pseudo" id="Pseudo" size="30" /> <em>(compris entre 3 et 32 caractères)</em><br />
     <label for="Mdp" class="float">Mot de passe :</label> <input type="password" name="Mdp" id="Mdp" size="30" /> <em>(compris entre 4 et 50 caractères)</em><br />
     <label for="Mdp_verif" class="float">Mot de passe (vérification) :</label> <input type="password" name="Mdp_verif" id="Mdp_verif" size="30" /><br />
     <label for="Mail" class="float">Mail :</label> <input type="text" name="Mail" id="Mail" size="30" /> <br />
     <label for="Statut" class="float">Statut :</label>
     <select name="Statut">
     <option name="Statut" value="Administrateur">Administrateur</option><br />
     <option name="Statut" value="Membre" selected="selected">Membre</option><br />
     <label for="Mail_verif" class="float">Mail (vérification) :</label> <input type="text" name="Mail_verif" id="Mail_verif" size="30" /><br />
     <label for="Date_naissance" class="float">Date de naissance :</label> <input type="text" name="Date_naissance" id="Date_naissance" size="30" /> <em>(format JJ/MM/AAAA)</em><br/></tbody>
     <div class="center"><input type="submit" value="Inscription" /></div>
    </fieldset>

La liste déroulante me génère une mauvaise mise en forme.
Est ce que quelqu'un sait comment faire pour régler le problème et pour que tout s'affiche correctement??
Merci

Afficher la suite

A voir également:

Problème mise en forme d'un formulaire
Whatsapp formulaire opposition - Guide
Mise en forme conditionnelle excel - Guide
Formulaire de réclamation facebook - Guide
Mise a jour chrome - Accueil - Applications & Logiciels
Mise en forme tableau croisé dynamique - Guide

1 réponse

Réponse 1 / 1

incodr

Bonjour,

Alors j'ai fait à la volé des modifications pour faire une mise en page un peu plus centrée et structurée.

Je ne sais pas si c'est ce que vous voulez exactement mais vous y trouverez les points clés pour construire une page structurée:

Le code :


<header style="text-align:center">
 <h1>Formulaire d'inscription</h1>

 <p>Bienvenue sur la page d'inscription de mon site !<br/>
 Merci de remplir ces champs pour continuer.
 </p>
</header>

<body bgcolor="#64748B" style="margin:auto;width:1000px;">
 <form action="verif_inscription.php" method="post" name="Inscription" style="width:600px;margin:auto;">
 <fieldset>
  <legend>Identifiants</legend>
  <label for="Pseudo" style="float:left">Pseudo :</label><input style="float:right" type="text" name="Pseudo" id="Pseudo" size="30" /> <em>(compris entre 3 et 32 caractères)</em><br />
  <div style="clear:both"></div>
  <label for="Mdp" style="float:left">Mot de passe :</label><input style="float:right" type="password" name="Mdp" id="Mdp" size="30" /> <em>(compris entre 4 et 50 caractères)</em><br />
  <div style="clear:both"></div>
  <label for="Mdp_verif" style="float:left">Mot de passe (vérification) :</label> <input style="float:right" type="password" name="Mdp_verif" id="Mdp_verif" size="30" /><br />
  <div style="clear:both"></div>
  <label for="Mail" style="float:left">Mail :</label> <input style="float:right" type="text" name="Mail" id="Mail" size="30" /> <br />
  <div style="clear:both"></div>
  <label for="Statut" style="float:left">Statut :</label>
  
  <select style="float:right" name="Statut">
   <option name="Statut" value="Administrateur">Administrateur</option><br />
   <option name="Statut" value="Membre" selected="selected">Membre</option><br />
  </select>
  <div style="clear:both"></div>
  
  <label for="Mail_verif" style="float:left">Mail (vérification) :</label> <input style="float:right" type="text" name="Mail_verif" id="Mail_verif" size="30" /><br />
  <div style="clear:both"></div>
  <label for="Date_naissance" style="float:left">Date de naissance :</label> <input style="float:right" type="text" name="Date_naissance" id="Date_naissance" size="30" />
  <div style="clear:both"></div>
  <em>(format JJ/MM/AAAA)</em><br/>
  <div style="text-align:center"><input type="submit" value="Inscription" /></div>
 </fieldset>
 </form>
</tbody>

Analyses (pensez à envoyer la feuille de style également .css):

1- La balise <form> n'est pas fermée dans votre code;
2- La balise </tbody> est fermée au mauvais endroit, elle doit se situer après la balise </form> dans votre cas, qui d'ailleurs elle non plus n'est pas renseignée;
3- Pensez à insérer le style css suivant: style="clear:both" entre chaque bloc flottant. (voir le code ci-joint)

Voila, j'espère que ça pourra aider bien que ce ne soit pas très propre de "coder" comme cela, mais vous y trouverez quelques éléments.
Remarquez:
- style="width:1000px;margin:auto" qui centre le bloc de 1000px sur la page.
- division du code en <header></header> <body></body>

Cordialement.

Bryant

Merci beaucoup pour votre code !
En fait ce qui me posé problème, c'était le </select> qui était mal placé !
Merci :)

incodr

De rien, il manquait également "</select>", je l'ai ajouté sans vous le signaler :p

Bonne journée et bon courage :)

Discussions similaires

Boucle sur la première diapositive d'une présentation

Excel supprimer une mise en forme de tableau

Votre réponse

Discussions similaires