28173 sujets

CSS et mise en forme, CSS3

Formulaire Web

Bonjour!

J'essaie de rajeunir l'entreprise pour laquelle je travail en créant un beau modèle CSS pour les formulaires sans utiliser de tableau.

J'ai presque terminé mais j'ai un bug qui me bloque complètement. Je veux que le bouton "Envoyer" en bas soit centré! J'ai tout essayé et ça ne marche pas!

Aussi, vous pouvez me dire quoique ce soit que je ne respecte pas les standards, etc.! J'ai vraiment un gros trip de respecter les standards et je veux devenir la référence dans l'entreprise où je travail afin qu'un jour, l'entreprise les adopte par défaut!

Je vous remercie d'avance. Voici tout d'abord le code html suivi du code CSS. Veuillez noter que le code HTML n'est pas standard DU TOUT!!! mais qu'il le deviendra lorsque le CSS va fonctionner! 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="formulaire">
			<h3 class="titre">Mega</h3>
				
			<div id = "slide">
				<div id = "gauche">
					<label>Nom : </label>
					<input type="text" ></input>
				</div>

				<div id = "droite">
					<label>Adresse : </label>
					<input type="text" ></input>
				</div>
			</div>
			
			<div id = "slide">
				<div id = "droite">
					<label>Ville : </label>
					<input type="text" ></input>
				</div>
			</div>

			<div id = "slide">
				<div id = "droite">
					<label>Code Postal : </label>
					<input type="text" ></input>
				</div>
			</div>


			<input class="submit" type="button" value="Envoyer"></input>
		</div>
	</body>





* {
      margin: 0;
      padding: 0;
}

body {
     margin: 0; 
     padding: 0;
     color: #3399FF;
     text-align: center; /* pour corriger le bug de centrage IE */
     font-family: arial, helvetica, sans-serif; 
}

/* Représente l'objet au complet */
#formulaire {
	position:absolute;
	top: 60px;
    left: 50%; 
    width: 800px;
    margin-left: -400px;
	background-color: #003399;
    border: 1px solid #3399FF;
}

#slide {
	position: relative;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 800px;
	height: 50px;
}

#gauche {
	position: absolute;
	left: 30;
	text-align: left;
	width: 370px;
}

#droite {
	position: absolute;
	left: 430px;
	text-align: left;
	width: 370px;
}

.submit {
	border: 1px solid #3399FF;
	background-color: #003366;
	padding: 10px 10px 10px 10px;
}

/* Pour placer le titre du formulaire */

#formulaire .titre {
	border: 1px solid #3399FF;
	background-color: #003366;
	padding: 10px 10px 10px 10px;
}

#formulaire .button { 
	font-family: arial, helvetica, sans-serif; 
	font-size: 1.2em; 
	color: black; 
	background-color: #FFCC66; 
	color: #003366;
}

#formulaire label {
	font-weight: bold; 
}

#formulaire input {
	position: absolute;
	left: 150px;
	background-color: #FFCC66; 
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; 
}

#formulaire option { 
	background-color: #FFEFD5; 
}

#formulaire select { 
	background-color: #FFEFD5; 
}

#formulaire textarea { 
	background-color: #FFEFD5; 
	color: red; 
}
je t'ai défini certaine chose et corriger d'autre. Avec ma facon sa fonctionne, mais tu doit positionner le bouton Envoyer par toi même sous le formulaire. J'ai supprimer ta classe #formulaire input{} car elle affectait aussi ton bouton. Alors j'ai attribué une classe a tes textbox ainsi qu'un classe a ton bouton.

* {
      margin: 0;
      padding: 0;
}

body {
     margin: 0; 
     padding: 0;
     color: #3399FF;
     text-align: center; /* pour corriger le bug de centrage IE */
     font-family: arial, helvetica, sans-serif; 
}

/* Représente l'objet au complet */
#formulaire {
	position:absolute;
	top: 60px;
    left: 50%; 
    width: 800px;
    margin-left: -400px;
	background-color: #003399;
    border: 1px solid #3399FF;
}

#slide {
	position: relative;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 800px;
	height: 50px;
}

#gauche {
	position: absolute;
	left: 30;
	text-align: left;
	width: 370px;
}

#droite {
	position: absolute;
	left: 430px;
	text-align: left;
	width: 370px;
}

[#red].submit {
	border: 1px solid #3399FF;
	background-color: #FFCC66;
	padding: 10px 10px 10px 10px;
	left:46%;
	top:300px;
	position:absolute;
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; 
}[/#]

/* Pour placer le titre du formulaire */

#formulaire .titre {
	border: 1px solid #3399FF;
	background-color: #003366;
	padding: 10px 10px 10px 10px;
}

#formulaire .button { 
	font-family: arial, helvetica, sans-serif; 
	font-size: 1.2em; 
	color: black; 
	background-color: #FFCC66; 
	color: #003366;
}

#formulaire label {
	font-weight: bold; 
}
[#red].input{
	position: absolute;
	left: 150px;
	background-color: #FFCC66; 
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; 
}[/#]

#formulaire option { 
	background-color: #FFEFD5; 
}

#formulaire select { 
	background-color: #FFEFD5; 
}

#formulaire textarea { 
	background-color: #FFEFD5; 
	color: red; 
}

		</style>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css" />		
	</head>
	<body>
		<div id="formulaire">
			<h3 class="titre">Mega</h3>
				
			<div id = "slide">
				<div id = "gauche">
					<label>Nom : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>

				<div id = "droite">
					<label>Adresse : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>
			
			<div id = "slide">
				<div id = "droite">
					<label>Ville : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>

			<div id = "slide">
				<div id = "droite">
					<label>Code Postal : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>
		</div>
		[#red]<input class="submit" type="button" value="Envoyer"></input>[/#]
	</body>

Modifié par s_har_k (28 Jul 2006 - 17:30)
Salut!

Merci pour la réponse rapide!
Cependant, je voudrais que mon bouton soit à l'INTÉRIEUR de la boite bleu du formulaire.. Est-ce que tu crois que c'est possible?
JaffAJob a écrit :
Cependant, je voudrais que mon bouton soit à l'INTÉRIEUR de la boite bleu du formulaire.. Est-ce que tu crois que c'est possible?



Dans ce cas, je ne sais pas pourquoi, mais si tu rajoute un espace devant ton bouton avec ce que je t'ai fait et en modifiant un peut le .submit, ca va marché.

* {
      margin: 0;
      padding: 0;
}

body {
     margin: 0; 
     padding: 0;
     color: #3399FF;
     text-align: center; /* pour corriger le bug de centrage IE */
     font-family: arial, helvetica, sans-serif; 
}

/* Représente l'objet au complet */
#formulaire {
	position:absolute;
	top: 60px;
    left: 50%; 
    width: 800px;
    margin-left: -400px;
	background-color: #003399;
    border: 1px solid #3399FF;
}

#slide {
	position: relative;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 800px;
	height: 50px;
}

#gauche {
	position: absolute;
	left: 30;
	text-align: left;
	width: 370px;
}

#droite {
	position: absolute;
	left: 430px;
	text-align: left;
	width: 370px;
}

[#red].submit {
	border: 1px solid #3399FF;
	padding: 10px 10px 10px 10px;
	top:300px;
	background-color: #FFCC66; 
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; 
}[/#]

/* Pour placer le titre du formulaire */

#formulaire .titre {
	border: 1px solid #3399FF;
	background-color: #003366;
	padding: 10px 10px 10px 10px;
}

#formulaire .button { 
	font-family: arial, helvetica, sans-serif; 
	font-size: 1.2em; 
	color: black; 
	background-color: #FFCC66; 
	color: #003366;
}

#formulaire label {
	font-weight: bold; 
}
[#red].input{
	position: absolute;
	left: 150px;
	background-color: #FFCC66; 
	color: #003366;
	font-family: Arial, Helvetica, sans-serif; 
}[/#]

#formulaire option { 
	background-color: #FFEFD5; 
}

#formulaire select { 
	background-color: #FFEFD5; 
}

#formulaire textarea { 
	background-color: #FFEFD5; 
	color: red; 
}

		</style>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css" />		
	</head>
	<body>
		<div id="formulaire">
			<h3 class="titre">Mega</h3>
				
			<div id = "slide">
				<div id = "gauche">
					<label>Nom : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>

				<div id = "droite">
					<label>Adresse : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>
			
			<div id = "slide">
				<div id = "droite">
					<label>Ville : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>

			<div id = "slide">
				<div id = "droite">
					<label>Code Postal : </label>
					<input type="text" [#red]class="input"[/#]></input>
				</div>
			</div>
			[#red]<br>
			&nbsp;
			<input class="submit" type="button" value="Envoyer"></input>[/#]
		</div>
	</body>

Modifié par s_har_k (28 Jul 2006 - 17:35)
Bonjour,

Vous pensez à mettre des attributs for à vos labels, n'est-ce pas ? Et les id correspondant sur les contrôles ?

Parce que sinon, ça ne sert à rien, ces labels Smiley cligne
Laurent Denis a écrit :
Bonjour,

Vous pensez à mettre des attributs for à vos labels, n'est-ce pas ? Et les id correspondant sur les contrôles ?

Parce que sinon, ça ne sert à rien, ces labels Smiley cligne


Bien sur! Comme je disais, mon html n'est présentement PAS standards! Cependant, ce sera arrangé! Néanmoins, je sais qu'il faut mettre le "for" mais à quoi sert ce fort???

Merci!
Jaff
JaffAJob a écrit :
mais à quoi sert ce fort???


A lier fonctionnellement l'étiquette du champ (le <label>) et le champ (<input>, <textarea>, etc.). A condition que la valeur de "for" soit égale à la valeur de l'attribut "id" du champ (cf FAQ du forum pour les exemples). Et à condition d'utiliser la bonne syntaxe (cf FAQ encore) parmi les deux disponibles en HTML.

Concrètement, le label sera automatiquement lu par un lecteur d'écran lorsque la synthèse arrive sur le champ, quelque-soit la manière dont elle y arrive (par exemple en naviguant directement de champ en champ en sautant tout le contenu éventuel qui les sépare).

De la même manière, dans un navigateur graphique (IE, FF etc), il suffit de cliquer sur le texte du <label> pour que le champ acquiert le focus (ce qui facilite la vie aux personnes ayant des difficultés avec leur souris, ou à moi quand je n'ai que ce fichu portable sans la souris).

C'est le même principe qui justifie les <legend> des groupes de champs de formulaires <fieldset>: la "legend" est rappelée répétitivement par la synthèse avant chaque label inclus dans le <fieldset>, ce qui permet de préciser autant que nécessaire ce qui est attendu comme entrée dans le champ (pour différencier deux champs "nom" dans le même formulaire, par exemple : celui de l'expéditeur et celui du destinataire).

Dans tous les cas, il s'agit:
- de fournir l'information quelque-soit le mode de consultation
- de permettre des interactions quelque-soit les périphériques d'entrée et de sortie
Modifié par Laurent Denis (28 Jul 2006 - 18:59)
Salut.

Le "for" indique à quel élément le label est attaché. Par exemple, 
<label for="recherche">Chercher</label>
amène le curseur dans le champ de formulaire (input, textarea, select ...) qui possède l'id "recherche".

Remarque que j'ai bien dit l'id et pas le "name" Smiley lol

Sinon, pour centrer le bouton envoyer, voici ce que j'utilise :
<p class="submit" ><input type="submit" value="Envoyer" /></p>
.submit {
text-align: center;
}
Ca me semble une solution plus efficace que de placer le bouton en position absolue.

Grillé, je sais Smiley rolleyes Mais le centrage est bon qd même Smiley langue
Modifié par Sopo (28 Jul 2006 - 18:59)
Sujet clos
Aller à