Testé avec Firefox v72
Création de trois cases à cocher
Code HTML :
<div>
<input type="checkbox" name="case1" value="1">
<input type="checkbox" name="case2" value="2">
<input type="checkbox" name="case3" value="3">
</div>
L’attribut value indique la valeur retournée si la case est cochée. Si elle n’est pas cochée, aucune valeur n’est transmise.
Association d’un label à chaque case
Code HTML :
<div>
<input type="checkbox" id="identifiant1" name="case1" value="1">
<label for="identifiant1">Image 1</label>
<input type="checkbox" id="identifiant2" name="case2" value="2">
<label for="identifiant2">Image 2</label>
<input type="checkbox" id="identifiant3" name="case3" value="3">
<label for="identifiant3">Image 3</label>
</div>
L’association permet de cocher la case en cliquant sur le libellé ou la case. Elle nécessite l’utilisation de l’attribut id pour lier le label et la case.
Mise en forme du label pour placer une image de fond
Code CSS :
input#identifiant1 + label {
background-image :url("image1.jpg");
background-repeat:no-repeat;
background-size :150px 250px;
display :inline-block;
height :250px;
width :150px;
}
input#identifiant2 + label {
background-image :url("image2.jpg");
background-repeat:no-repeat;
background-size :150px 250px;
display :inline-block;
height :250px;
width :150px;
}
input#identifiant3 + label {
background-image :url("image3.jpg");
background-repeat:no-repeat;
background-size :150px 250px;
display :inline-block;
height :250px;
width :150px;
}
+ est l’opérateur d’adjacence directe. Il permet de s’assurer que le style ne s’appliquera qu’au label précédé de l’élément input. Cet élément input est lui-même ciblé par un identifiant.
Affichage d’un cadre rouge lorsque la case est cochée
Code CSS :
input#identifiant1:checked + label {
border-color:red;
border-style:solid;
}
input#identifiant2:checked + label {
border-color:red;
border-style:solid;
}
input#identifiant3:checked + label {
border-color:red;
border-style:solid;
}
L’attribut booléen checked indique si la case est cochée.
Application d'une bordure lorsque la case n'est pas cochée
Si les images sont sur une seule ligne, la sélection ne pose pas de problème. En revanche, sur plusieurs lignes, elle induit un décalage dans l'alignement.
Pour éviter un décalage horizontal entre une image sélectionnée et une image non sélectionnée, une bordure est ajoutée à l’image non sélectionnée. Sa couleur est identique à celle du fond dans l'exemple ci-dessous.
Code CSS ajouté pour la mise en forme du label :
border-color:white;
border-style:solid;
Masquage des cases à cocher
Code CSS :
input[type=checkbox] {
display:none;
}
Ajout du formulaire
Le code HTML complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">@import url(selection_image.css);</style>
</head>
<body>
<div>
<form action="./resultat.php" method="get">
<input type="checkbox" id="identifiant1" name="case1" value="1">
<label for="identifiant1">Image 1</label>
<input type="checkbox" id="identifiant2" name="case2" value="2">
<label for="identifiant2">Image 2</label>
<input type="checkbox" id="identifiant3" name="case3" value="3">
<label for="identifiant3">Image 3</label>
<p> <input type="submit" value="Valider"> </p>
</form>
</div>
</body>
</html>
Le code CSS complet :
input#identifiant1 + label {
background-image : url("image1.jpg");
background-repeat: no-repeat;
background-size : 150px 250px;
border-color :white;
border-style :solid;
display :inline-block;
height : 250px;
width : 150px;
}
input#identifiant2 + label {
background-image : url("image2.jpg");
background-repeat: no-repeat;
background-size : 150px 250px;
border-color :white;
border-style :solid;
display :inline-block;
height : 250px;
width : 150px;
}
input#identifiant3 + label {
background-image : url("image3.jpg");
background-repeat: no-repeat;
background-size : 150px 250px;
border-color :white;
border-style :solid;
display :inline-block;
height : 250px;
width : 150px;
}
input#identifiant1:checked + label {
border-color:red;
border-style:solid;
}
input#identifiant2:checked + label {
border-color:red;
border-style:solid;
}
input#identifiant3:checked + label {
border-color:red;
border-style:solid;
}
input[type=checkbox] {
display:none;
}
Ci dessous le formulaire avec les images 1 et 3 sélectionnées
Après avoir cliqué sur le bouton Valider, les valeurs GET retournées par le formulaire sont : case1=1&case3=3
