Formulaire css

bonjour,
je mis en place un mini formulaire qui permet à mes membres de se connecter.

je souhaiterai le mettre un peu en forme sans les tableaux afin qu'il soit un peu plus presentable. j'ai donc fais un css.

j'ai juste une petit question car dans mon formulaire j'ai un check box qui demande si on veu rester en connexion automatique que je n'arrive pas a mettre en forme.

mon css

/* Forulaire */
#monForm
{
	width: 400px;
	margin:auto;
}

/* fieldset , legend */
#monForm fieldset
{
	width: 160px;
	margin:auto;
	padding:15px 15px;	
	border: #CCC 1px solid;
}

#monForm fieldset legend
{
	padding: 0 5px;
	border-left: #CCC 1px solid;
	border-right: #CCC 1px solid;
	font-size: 1.2em;
	color: #999;
}


/* Label */
#monForm label
{
	display: block;
	width: 150px;
	text-align: left;
}

/* Input */
#monForm input
{
	width: 150px;
}

et mon formulaire :

<form id="monForm" action="http://<?= $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"]; ?>" method="post">
		<fieldset>
        <legend>Connexion </legend>
				<label>Nom d'utilisateur</label> <input type="text" name="TB_Nom_Utilisateur" />        
				<label>Mot de passe</label> <input type="password" name="TB_Mot_de_Passe" />
                Connexion automatique <input type="checkbox" name="CB_Connexion_Automatique" />  
				<input type="submit" name="BT_Envoyer" value="Envoyer" />
		</fieldset>
</form>

actuellemnt j'ai :
http://www.photos-vosges.fr/formactu.jpg

et je voudrai :
http://www.photos-vosges.fr/formfini.jpg

Comment faire en sorte que la case checkbox soit a coté du texte "connexion automatique" et pas en dessous

Bonjour,

Il faut mettre l'input avant l'intitulé dans le code HTML (ce qui est tout de même logique...). Il faudrait aussi utiliser un élément LABEL avec attribut for pour cet intitulé, pour que le clic sur l'intitulé permette de cocher/décocher la case.

Il faut aussi éviter d'appliquer un width:150px à tous les INPUT de ton formulaire, c'est une erreur!

qu'entends tu par "mettre l'input avant l'intitulé dans le code HTML ".

pourquoi mettre 150px est une erreur ? ou dois-je donné la valeur de longueur de mon champ ?

Je pense que Florent V. voulait te signaler que ton "checkbox" n'est pas au bon endroit dans ton html. Il devrait être placé avant "Connexion automatique".

En écrivant ceci dans ton css:

#monForm input{
       Width: 150px;
}

... tu donnes également cette largueur à ton "checkbox", ce qui fait revenir "Connexion automatique" à la ligne.

++
Modifié par Natas (29 Jan 2009 - 13:46)

ah ok.
je modifie mais si j'enleve mon 150 px mes champs ne seront plus au bon format .
comment attribué un format dans ce cas là ?

Tu pourrais par exemple faire:

#monForm input.normal{
width: 18px;
}

++
Modifié par Natas (29 Jan 2009 - 17:44)