Problème mise en forme d'un formulaire
Résolu
Bryant
-
incodr -
incodr -
Bonjour,
Je n'arrive pas à mettre correctement en forme ce petit bout de code.
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
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
1 réponse
-
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.
