28172 sujets
CSS et mise en forme, CSS3
Bonjour et bienvenue, 
j'ai pas tout compris mais avant de commencer : parles-tu de Java le langage qu'on ne peut plus exécuter dans une applet sans être un expert (merci Oracle, sincèrement, et RIP) ou fais-tu la confusion avec JavaScript (ECMAScript), le langage avec des getElementById dedans ?
Pour les lettres, pourquoi faudrait-il cocher quoi que ce soit ? Pourquoi pas un input de type text pour chaque lettre ? (pour faire au plus simple mais ça va être méga-lourd mais c'est très compliqué de faire mieux)
j'ai pas tout compris mais avant de commencer : parles-tu de Java le langage qu'on ne peut plus exécuter dans une applet sans être un expert (merci Oracle, sincèrement, et RIP) ou fais-tu la confusion avec JavaScript (ECMAScript), le langage avec des getElementById dedans ?
Pour les lettres, pourquoi faudrait-il cocher quoi que ce soit ? Pourquoi pas un input de type text pour chaque lettre ? (pour faire au plus simple mais ça va être méga-lourd mais c'est très compliqué de faire mieux)
Tu peux éventuellement en avoir mais plutôt cachés, du type:
L'idée, c'est d'avoir une classe selected/unselected sur le TD (en supposant que tu réalises l'affichage de ta grille avec un TABLE), qui te permet par exemple de changer couleur et image de fond de ta cellule, ce qui donne un look "sélectionné" et un look "normal" suivant la classe utilisée. Bien penser à avoir aussi une couleur de fond (pas juste une image de fond, au cas où l'image ne se charge pas…), et pourquoi pas une autre variation de mise en forme telle qu'une bordure, ou passer la lettre en gras par exemple.
Si tu veux utiliser des éléments INPUT, j'imagine en mettant ton tableau dans un FORM et en envoyant le résultat de la sélection avec une requête HTTP POST contenant les valeurs de tes champs de formulaire, il faut bien veiller à ce que la valeur de l’attribut "checked" (qui est un booléen: il est positif du moment qu'il est présent, qu'il soit écrit "checked" ou "checked=checked") correspond à ta classe "selected"/"unselected" sur le TD (élément parent). Le mieux est peut-être de passer par un gestionnaire d'évènement sur l'élément LABEL, observer l'évènement "click", et vérifier la classe sur le TD parent pour savoir quelle classe changer et quelle valeur de l'attribut "checked" utiliser.
Pour une meilleure accessibilité, en supposant que tu aies masqué les INPUT avec un display:none, tu peux t'assurer que les LABEL peuvent recevoir le focus lors de la navigation au clavier:
Le problème, c'est que l'évènement "click" n'est pas déclenchable au clavier sur un élément LABEL qui a le focus, contrairement à ce qui est possible avec un BUTTON. Donc, on change son fusil d'épaule:
Ici, le focus (au clavier) sur le bouton et un «clic» avec les touches Espace ou Entrée du clavier vont déclencher l'évènement "click", de la même manière qu'un click à la souris (ou sur écran tactile).
(on pourrait aussi mettre le BUTTON dans le LABEL, mais je suis pas sûr de l'intérêt en pratique…)
Le style par défaut des boutons peut être un peu chiant, donc un reset sera utile:
http://fvsch.com/code/button-css/
Pour JavaScript, il y a un cours d'introduction à ce langage ici:
http://fr.eloquentjavascript.net/contents.html
Les chapitres 2 à 4 pour les bases, puis 11 à 14 peuvent t'intéresser plus particulièrement.
<td class="letter unselected">
<input type="checkbox" name="letter13" id="c13" />
<label for="c13"> R </label>
</td>
<td class="letter selected">
<input type="checkbox" name="letter14" id="c14" checked />
<label for="c14"> B </label>
</td>L'idée, c'est d'avoir une classe selected/unselected sur le TD (en supposant que tu réalises l'affichage de ta grille avec un TABLE), qui te permet par exemple de changer couleur et image de fond de ta cellule, ce qui donne un look "sélectionné" et un look "normal" suivant la classe utilisée. Bien penser à avoir aussi une couleur de fond (pas juste une image de fond, au cas où l'image ne se charge pas…), et pourquoi pas une autre variation de mise en forme telle qu'une bordure, ou passer la lettre en gras par exemple.
Si tu veux utiliser des éléments INPUT, j'imagine en mettant ton tableau dans un FORM et en envoyant le résultat de la sélection avec une requête HTTP POST contenant les valeurs de tes champs de formulaire, il faut bien veiller à ce que la valeur de l’attribut "checked" (qui est un booléen: il est positif du moment qu'il est présent, qu'il soit écrit "checked" ou "checked=checked") correspond à ta classe "selected"/"unselected" sur le TD (élément parent). Le mieux est peut-être de passer par un gestionnaire d'évènement sur l'élément LABEL, observer l'évènement "click", et vérifier la classe sur le TD parent pour savoir quelle classe changer et quelle valeur de l'attribut "checked" utiliser.
Pour une meilleure accessibilité, en supposant que tu aies masqué les INPUT avec un display:none, tu peux t'assurer que les LABEL peuvent recevoir le focus lors de la navigation au clavier:
<label for="c14" tabindex="0">X</label>Le problème, c'est que l'évènement "click" n'est pas déclenchable au clavier sur un élément LABEL qui a le focus, contrairement à ce qui est possible avec un BUTTON. Donc, on change son fusil d'épaule:
<td class="letter unselected">
<input type="checkbox" name="letter13" id="c13" />
<button type="button"> R </button>
</td>Ici, le focus (au clavier) sur le bouton et un «clic» avec les touches Espace ou Entrée du clavier vont déclencher l'évènement "click", de la même manière qu'un click à la souris (ou sur écran tactile).
(on pourrait aussi mettre le BUTTON dans le LABEL, mais je suis pas sûr de l'intérêt en pratique…)
Le style par défaut des boutons peut être un peu chiant, donc un reset sera utile:
http://fvsch.com/code/button-css/
Pour JavaScript, il y a un cours d'introduction à ce langage ici:
http://fr.eloquentjavascript.net/contents.html
Les chapitres 2 à 4 pour les bases, puis 11 à 14 peuvent t'intéresser plus particulièrement.