Mise en page d'un formulaire

Mammouth du PHP | 725 Messages

07 juin 2011, 04:09

Bonjour,

J'ai un formulaire genere en HTML qui est en programmation PHP OOP, quand j'ajoute des radio et checkbox il se deforme, et quand je les supprime, ca marche bien, voila une photo avec et sans radio et checkbox:

avec les bouttons:

Image
http://img198.imageshack.us/i/rcyes.png/

sans bouttons:

Image
http://img269.imageshack.us/i/rcno.png/

et le code de la source est:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
display:block;
width:150px;
/*float:left;*/
}

fieldset {
width:400px;
margin-left: auto;
margin-right: auto;
background-color: #E28989;
}



.legend1 {
	color:green;
	background-color: #E28989;
	font-weight: bold;
	border-width: 2px;
	border-color: black;
}



</style>

</head>
<form name="frmName" method="POST" action="/Tests/php/class/forms/formInputs4.php" enctype="multipart/form-data" autocomplete="off" id="MyID"><fieldset name="FieldSetName"  id="rien" dir="ltr"><legend width="200"class="legend1">Formulaire d'enregistrement</legend><label for="nom" style="float:left">Votre nom: </label><input type="text" name="nom" value="valeur1" autocomplete="on" autofocus="autofocus" required="required" form="MyID"><br /><label for="gender" style="float:left">Votre sexe: </label><br /><label for="ecole" style="float:left">Votre ecole: </label><input type="text" name="ecole" value="ecole" spellcheck="true"><br /><label for="recherche" style="float:left">Rechercher: </label><input type="search" name="recherche" value="mot a rechercher" autocomplete="on" autofocus="autofocus" required="required" autosave="unique" results="5"><br /><label for="langues" style="float:left">Langues: </label><br /><label for="prenom" style="float:left">Votre prenom: </label><input type="text" name="prenom" value="valeur2" spellcheck="true"><br /><label for="photo" style="float:left">Photo : </label><input type="file" name="nomFile" value="valeur2" multiple="multiple"><br /><label for="msg" style="float:left">Votre commentaire: </label><textarea name="" cols="20" rows="5">un text ici</textarea><br /><label for="passwd" style="float:left">Mot de passe: </label><input type="password" name="nom3" value="valeur3"><br /><label for="autre" style="float:left">Autre: </label><input type="text" name="nom4" value="valeur4"><br /><label for="select" style="float:left">Choix: </label><select name="selectName"><option value="clef1" DISABLED="DISABLED" SELECTED="SELECTED">valeur1</option><option value="clef2">valeur2</option><option value="clef3">valeur3</option></select><br /><label for="url" style="float:left">Votre site: </label><input type="url" name="nomURL" value="" list="nomListe"><datalist id="nomListe"><option label="label1" value="value1"><option label="label2" value="value2"><option label="label3" value="value3"><option label="label4" value="value4"></datalist><br /><label for="tel" style="float:left">Votre Num: </label><input type="number" name="nomNumber" value="10" min="0" max="10" step="3"><br /><label for="vote" style="float:left">Votez: </label><input type="range" name="nomRange" value="10" min="0" max="30" step="3"><br /><input type="image" name="nomImage" value="" src="img_submit.gif" height="20" width="20" alt="Submit" title="Submit" formaction="Submit"><input type="hidden" name="MAX_FILE_SIZE" value="50000"></fieldset></form><br><hr width="200"><br><br>nbre de warnings est: 7<br><font color="red"><b>Veuillez verifier les warnings ci-dessous:</b></font><br><ul></ul>

Eléphant du PHP | 314 Messages

09 juin 2011, 10:53

Essai de laisser de la place entre chaque ligne... ( au hasard, j'avoue :) )
Cordialement,
Julien - http://laravel.fr/

Mammouth du PHP | 725 Messages

10 juin 2011, 02:54

Essai de laisser de la place entre chaque ligne... ( au hasard, j'avoue :) )
c'est bizzare ce probleme non :D

Mammouth du PHP | 672 Messages

10 juin 2011, 09:51

Bonjour.

1. Il faut te décider, soit tu fait du HTML (auquel cas il n'y a pas besoin de fermer tes balises <br>) soit c'est du X-HTML (et il faut fermer les <input ... />)...
2. Pourquoi préciser à chaque label style="float:left" alors que tu pourrais rajouter une ligne à ton CSS ?
3. Toujours dans tes label, l'espace après les "deux points" est inutile...

4. Surtout, les<br> sont inutiles et n'ont pas de sens (et en plus, leur gestion par les navigateur est assez variable)...
On peut considérer qu'un formulaire est une liste de champs, et donc utiliser les listes. Et l'avantage, c'est que tu peux gérer la présentation plus facilement avec une liste :wink:

Mammouth du PHP | 725 Messages

13 juin 2011, 06:21

j'ai mis comme ca:
<input type="radio" name="Name" value="male" autofocus="autofocus" checked="checked" />
<br />
j'ai utilise BR pour revenir a la ligne