Peut_on améliorer les cases à cocher ?

Dernière réponse : 3 Avril 2010 17:51 dans Programmation

yoann54

3 Avril 2010 11:18:12

Voila j'ai réalisé un site de chimie pour mes éléves avec des pages de cours qui apparaissent en fonction de ce que l'on a cocher. J'ai donc codé cela :

<form method="post" action="traitement.php" >
 
<INPUT type="checkbox" name="carbone" value="1"> carbone
<INPUT type="checkbox" name="cuivre" value="2"> cuivre
<INPUT type="checkbox" name="eau " value="4"> eau
<INPUT type="checkbox" name="fer" value="8">fer
<INPUT type="checkbox" name="sable " value="16">sable
<INPUT type="checkbox" name="feu " value="32">feu
<INPUT type="checkbox" name="pierre" value="64">pierre
 
<input type="submit" value="Ok">
 
</FORM>

Les cases à cocher font un peu site d'amateur je trouve et j'aimerai les rendre plus attrayantes..changer la couleur par exemple ou un effet ? et l'intitulé à côté de la case à cocher peut t-il être remplacé par une image (imagesrc) ? et peut on aligner les cases à cocher car elles sont vraiment éparpillés ?

Quelqu'un à t'il déja été confronté a ce genre d'action ?

merci

Autres pages sur : ameliorer cases cocher

| Etre averti des réponses
| Alerter

Répondre à yoann54

Lassé par la pub ? Créez un compte

PetitTigre

Expert Programmation

3 Avril 2010 11:22:28

Utilise le CSS ( http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html )

| Alerter

Répondre à PetitTigre

OmaR

Expert Programmation

3 Avril 2010 14:20:12

Les checkbox ne font pas parti des choses faciles à styler avec le CSS. Déjà, en fonction du navigateur et du système d'exploitation de la personne, elles sont complètement différentes.

Tu as quelques exemples sur ces 3 liens :

http://www.456bereastreet.com/lab/form_controls/checkbo...

http://www.456bereastreet.com/lab/styling-form-controls...

http://www.456bereastreet.com/archive/200409/styling_fo...

Avec le même code, tu vois quels sont les aperçus sur différents navigateurs avec différents OS.

Au final, généralement, le plus simple est de simuler ces contrôles, plutôt que d'utiliser une checkbox, on va créer un contrôle qui avec un peu de CSS et de JavaScript aura les mêmes fonctionnalités qu'une checkbox.
Tu as un exemple ici :
http://ryanfait.com/resources/custom-checkboxes-and-rad...

C'est une petite librairie javascript qui se charge de remplacer tous les éléments qui ont la class égale à "styled" (<input class="styled" ... />) par un élément équivalent avec un plus beau style.
J'imagine après que ça doit être assez simple de modifier le CSS de cette librairie pour donner à ces nouveaux contrôles l'aperçu que tu souhaites.