Statistiques| Inscription| Espace privé
Développement Web
Accueil > CSS > retour au formulaire
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mai 2019   >>
Lu Ma Me Je Ve Sa Di
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2



Habillage du formulaire inopérant.
On se contente ici de donner à titre d’exemple de règles de style, un habillage possible du formulaire envisagé précédement.
 
 
 
 
Habillage du formulaire inopérant.
On se contente ici de donner à titre d’exemple de règles de style, un habillage possible du formulaire envisagé précédement.
Le code et la feuille de style
 
 
 
 

Le code html est celui que l'on a déjà considéré dans l'exemple intitulé "un formulaire inopérant", à ceci près qu'il faut rajouter des classes et des identifiants, et que l'on a enlevé tout ce qui a trait à la présentation.

<form action="">

<p id="civil">
Nom : <input type ="text" name="nom" value="" /><br/>
Prénom : <input type ="text" name="prenom" value="" /><br/>
Mot de passe : <input type="password" name="secret"  />
</p>

<p class="clair un">
Vous êtes  :
<input type="radio" name="genre" value="un homme" checked="checked" />Un homme
<input type="radio" name="genre" value="une femme" />Une femme
</p>

<p class="clair deux">
<label
for="loisir">
Quel est votre loisir préféré ?
</label>
<select
name="loisir" id="loisir" >
 <option selected="selected">informatique </option>
 <option >sport</option>
 <option> cinéma</option>
 <option >musique</option>
</select>
</p>

<p class="clair un">
Quelle langue parlez-vous ?<br/> 
<input type="checkbox" checked="checked" name="français" value="français" />français
<input type="checkbox" name="anglais" value="anglais" />anglais
<input type="checkbox" name="allemand" value="allemand" />allemand
<input type="checkbox" name="espagnol" value="espagnol" />espagnol
</p>

<p class="clair deux">
Ecrivez ci-dessous un petit texte :</p>

<div class="flotdroite">
<textarea
name="projet" rows="5" cols="33">
</textarea>
</div>

<table class="formulaire">
 <tr >
  <td >Valider ces informations <br/>
 <input type="button" class="bouton" value="Enregistrer" />
 </td>
 <td >
Recommencer la saisie<br/>
 <input
type="reset"  class="bouton" value="Effacer" />
  </td> 
 </tr>
</table>

</form>

Ainsi les attributs width, border et align des balises <table width="80%" border="1"> et <tr align="center">, vont être remplacés par les règles CSS suivantes :

table.formulaire{
width:80%;
border:1px solid gold;
text-align:center;

}
table.formulaire td{
border:1px solid gold;
}

La feuille de style complète est la suivante :

body{
background:#222222;
color:gold;
text-align:center;
font-size:17px;
padding:20px;

}

#civil{
background:#63020a;
border:5px double gold;
width:80%;
margin:10px auto;
padding:15px;
font-weight:bold;
line-height:35px;

}

.clair{
margin:0 10px;
padding:15px;

}

.un{
background:#555555;
}

.deux{
background:#333333;
}

.flotdroite{
float:right;
margin-right:10px;
_margin-right:5px;

}

table.formulaire{
clear:both;
width:80%;
border:1px solid gold;
color:gold;
margin:15px auto;
background:#555555;
text-align:center;

}

table.formulaire td{
border:1px solid gold;
background:#63020a;
padding:0px 0px 10px;
line-height:50px;
font-weight:bold;

}

.bouton {
border: 2px solid gold;
width: 100px;
font-weight: bold;
color: gold;
height: 40px;
font-size: 16px;
margin: 0px auto;
padding:5px;
background-color:#2b3030;

}

 
 
 
 
 
Le résultat
 
 
 
 

Nom :
Prénom :
Mot de passe :

Vous êtes : Un homme Une femme

Quelle langue parlez-vous ?
français anglais allemand espagnol

Ecrivez ci-dessous un petit texte :

Valider ces informations
Recommencer la saisie

Si vous voulez voir le résultat dans une nouvelle fenêtre, cliquez ici .