Formulaire sur 2 colonnes

Bonjour,

Après avoir lu le livre de Zeldman "utiliser les standarts" (excellent au demeurant) et en cours de celui de MEyer sur les CSS, je me bats pour arriver à faire un formulaire sur 2 colonnes;
Pourquoi 2 ce qui complique singulièrement la tâche, parce que j'ai peu d'espace pour le placer.

Après moults efforts, voici ce que j'ai réussi à faire, donc sur 2 colonnes:


Voici la feuille de style correspondante:

/* CSS Document -> RECRUT_01.CSS*/
#formulaire1 {
	float: left;
	margin: 0;
	color: #636360;
	width: 220px;
	padding: 0 10px 0 10px;
	top: auto;
}

select {
	display: block;
	background: #F4F4F4;
}

#formulaire2 {
	float: left;
	margin: 0;
	color: #636360;
	width: 220px;
	padding: 0 0 0 10px;
	top: auto;
}

label {
        display: block;
        font-size: 0.65em;
	margin: 0;
	padding: 0;
	text-align: left;
	margin-top:  0.4em;
}

.items{
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #C71585;
	font-weight: bold;
        width: 220px;
	height: 15px;
	background:url("img/Form_input_0.gif") no-repeat;
	border: none;
	padding: 4px 8px;
}

.buttonSubmit {
	width: 71px;
	height: 28px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 5px;
	background:url("img/Form_button_0.gif") no-repeat;
	cursor: pointer;
	border: none;
}

.buttonSubmit:Hover {
	background-position: left;
	background-image:url("img/Form_button_1.gif") no-repeat;
}
/*------ Fin Formulaire ---------*/

et la partie HTML ds le code PHP qui gère le formulaire:

       <div id="formulaire1">
		<form  action="<?php $_SERVER['../REQUEST_URI'] ?>" method="post" enctype="multipart/form-data">
			<label>Poste recherché <span class="asterisque">*</span>: </label>
			<label>NOM<span class="asterisque">*</span>:</label>
				<input type="text" id="nom"  name="nom"  value=""  class="items" maxlength="35" /> 
			<label>PRENOM<span class="asterisque">*</span>:</label>
				<input type="text" id="prenom"  name="prenom"  value=""  class="items" maxlength="35" /> 
      </div>
    <div id="formulaire2">
			<label>MAIL<span class="asterisque">*</span>:</label>
				<input type="text" id="email"   name="email"    class="items" maxlength="35" /> 
			<label>Diplomes:</label>
			<input type="text" id="diplomes"  name="diplomes"     class="items" maxlength="35"  /> 
			<label>Message:</label>
			<input type="text" id="message"   name="comment"    class="items" maxlength="35"  /> 
			<label>1er Fichier joint ( 500Ko maximum) :</label>			
			<input type="hidden" name="MAX_FILE_SIZE" value="500000"/>
			<input name="upload_localfile01" type="file" class="fondformulaire"/>
			<label>2eme Fichier joint ( 500Ko maximum) :</label>
			<input type="hidden" name="MAX_FILE_SIZE" value="500000"/>
			<input name="upload_localfile02" type="file" class="fondformulaire"/>
			<input type="submit" value="Envoyer" class="buttonSubmit" name='submit' onClick="this.value='titi '">
		</form>
	</div>

Mes questions sont les suivantes:
1/ Est ce autorisé de placer un formulaire (donc avec 1 seule requête de soumission, sur 2 DIV ?
(Dreamweaver me met une erreur mais ça fonctionne )

2/ Ma manière de procéder au niveau de la mise en forme CSS est elle correcte, et si non, que serait il préférable ?

Après avoir lu le livre de Zeldmann, je suis convaincu par le remplacement des tableaux par les CSS (de toute façon , je crois que cela n'aurait pas été possible avec un tableau), mais c'est quand même pas si simple à mon avis, et plein de chausses-trappes !

Alors, merci de vos conseils avisés et ne soyez pas trop dur envers un nouveau convaincu des CSS.

MErci
Furet

Je sais pas si c'est super méga top de chez nikel chrome etc, etc mais en tout cas c'est bien valide et accessible de faire un formulaire avec plusieurs <div> (mon formulaire valide en tableaux css).

Et par rapport à l'écriture de ton CSS (je ne suis pas un pro bien loin de là) mais je trouve ca très lisible et compréhensible !

;)

p.s : un formulaire fonctionne aussi bien en tableau css quand tableau à table
Modifié par Super_baloo8 (15 Oct 2005 - 05:16)

Attention à ne pas croiser les balises :

<div id="formulaire1">
[b][#red]<form action="<?php $_SERVER['../REQUEST_URI'] ?>" method="post" enctype="multipart/form-data">[/#][/b]
</div>
<div id="formulaire2">
[b][#red]</form>[/#][/b]
</div>

<form action="<?php $_SERVER['../REQUEST_URI'] ?>" method="post" enctype="multipart/form-data">
<div id="formulaire1">
</div>
<div id="formulaire2">
</div>
</form>

Bonjour,

Voir la FAQ du forum pour l'utilisation correcte de l'élément <label> (attribut for= manquant ici).

MErci pour vos remarques précises et pertinentes. et vos liens instructifs.
Au sujet de la balise <LABEL>, en effet, j'ai omis le FOR.

Si je ne me trompe pas, la balise <LABEL> permet d'activer le champ de saisie, si on clique sur le texte de l'item. C'est bien ce qui se passe dans mon cas, mais il n'active pas le champ déjà présent avec un background image, il en fait apparaître un nouveau, juste en dessous du champ existant, ce qui n'est pas terrible.

Savez-vous comment lui dire d'activer le champ de saisie, déjà présent avec le background image ?

MErci
Furet

Salut jp,

Désolé, j'ai envoyé par mégarde ma réponse avant de la terminer.... donc:

Au sujet des DIV:
Ta remarque fait suite à l'erreur que je signalais sous Dreamweaver ?
En fait, Dreamweaver avait raison, car comme me l'a fait justement remarqué Stephan, j'avais des balises imbriquées entre les DIV et le FORM.
Ma structure est donc désormais la suivante après correction:

<FORM>
  <div id="formulaire1">
  </div>
 <div id="formulaire2">
  </div>
</FORM>

Reste un autre détail: la validation W3C me met un avertissement car il considère que la balise FORM est vide.

En réalité, le code est:

		<form  action="<?php $_SERVER['../REQUEST_URI'] ?>" method="post" enctype="multipart/form-data">

mais si je regarde le code source de la page sur le site, en HTML cela devient évidemment

<form  action="" method="post" enctype="multipart/form-data">

et donc, la validation W3C émet logiquement un message d'avertissement
Je sais bien que c'est un peu HS mais y a t'il une solution pour empêcher cela ?

Furet