Comment superposer les champs d'un formulaire

Créer un site internet » CSS » Codes, trucs et astuces CSS » Comment superposer les champs d'un formulaire

Comment superposer les champs d'un formulaire

0 commentaire

Peut être vous êtes vous déjà posé la question : "Comment fait on pour superposer proprement les champs d'un formulaire les un en dessous des autres?"
Vous allez voir, ce n'est pas très compliqué

!

Dans un premier temps, on créé un simple formulaire en prenant soins d'utiliser l'élement « label » :

<form action="#" method="post">
<fieldset>

  <label for="nom">Nom</label>
  <input id="nom" name="nom"/><br/>
 
  <label for="addresse">Addresse</label>
  <input id="addresse" name="addresse"/><br/>
 
  <label for="ville">Ville</label>
  <input id="ville" name="ville"/><br/>
 
  <label for="choix1">choix1</label>
  <input name="choix1" value="choix1" type="checkbox" id="choix1"/>
 
  <label for="choix2">choix2</label>
  <input name="choix2" value="choix2" type="checkbox" id="choix2"/><br/>
 
  <label for="choix3">choix3</label>
  <input name="ma selection" value="choix3" type="radio" id="choix3"/>
 
  <label for="choix4">choix4</label>
  <input name="ma selection" value="choix4" type="radio" id="choix4"/><br/>
 
  <label for="selection">Sélection</label>
  <select name="selection" id="selection">
  <option value="Choix">Faite un choix dans cette liste.</option>
  <option value="choix1">choix1</option>
  <option value="choix2">choix2</option>
  <option value="choix3">choix3</option>
  <option value="choix4">choix4</option>
  </select><br/>
 
  <label for="texte">Texte</label>
  <textarea name="texte" rows="3" cols="30" id="texte"></textarea><br/>
 
  <label for="fichier">Fichier</label> 
  <input id="fichier" name="fichier" type="file"/><br/>
 
  <label for="valider">Action</label>
  <input type="submit" name="Valider" value="Valider" id="valider"/>
  <input name="Effacer" value="Effacer" type="reset" id="effacer"/>

</fieldset>
</form>

Puis on applique un style css aux éléments du formulaire :

label,input,textarea{
display: block;
width: 250px;
float: left;
margin-bottom: 10px;
font-weight:bold;
}
label {
text-align: right;
width: 100px;
padding-right: 20px;
}
br {
clear: left;
}
input[type=submit],input[type=reset]{
width: 70px;
margin-right:5px;
}
input[type=checkbox],input[type=radio]{
margin: 0 -150px 0 -110px;
}

Le résultat :

L'"astuce" réside dans le faite que tout les éléments de type input et label sont de type block (display:block;) et flottants (float:left;). La propriété css clear attribué à la balise <br/> permet quand à elle de spécifier les côtés d'un ou des éléments qui ne doivent pas être adjacents. En gros, l'élément sera affiché au dessous de l'élément précèdent si celui-ci utilise la propriété (float:left;).

Catégorie CSS

Commentaire sur : Comment superposer les champs d'un formulaire

Signaler une erreur

Comment placer une image dans un élément de type « input » d'un formulaireCodes, trucs et astuces CSS