5568 sujets

Sémantique web et HTML

Checkbox cliquable via son <div>

Bonjour,

je pensais que ce serait assez simple mais je bloque.
Je voudrais que ma checkbox soit cliquable via son <div> qui contient du texte ainsi qu'une image.

J'ai pense faire un <label for = "x"> qui englobe le div entier, avec a l'intérieur input id ="x" cependant cela ne marche pas ...

Une solution ?
Bonsoir bledfeet,

a écrit :
Une solution ?


Avant de poser cette question, as-tu essayer de coder quelque chose ? Si oui, peux-t-on voir ton code ?
Chez Moi Ça Marche™.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Lol, what?</title>
	<style>
	label {
		display: block;
		margin: 50px;
		padding: 50px;
		background: #DDD;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	label > input {
		float: left;
		margin: 10px 0 0 0;
		padding: 0;
	}
	label > span {
		display: block;
		margin-left: 50px;
		font-size: 2em;
	}
	</style>
</head>
<body>

<label for="test">
	<input type="checkbox" id="test" />
	<span>Du texte qui va bien.</span>
</label>

</body>
</html>

Testé avec: Firefox 3.5, et rien d'autre.
Problème rencontré: petit manque de réactivité lors d'un double-clic par exemple.

Il me semble que pour un résultat compatible dans tous les navigateurs, il faudra plutôt se reposer sur JavaScript (gestionnaire d'évènement onclick qui passe la valeur de element.checked de true à false et inversement).
Oui oui je peux vous montrer la partie concernee et les différentes tentative :
Retranscrit en html sa donne a peu pres ca :

La premiere :

<label for = "toto">
<div>
  <img src = "toto.png" />
  <h3>blabla</h3>  
   <input type = "checkbox" id = "toto" />
</div>
</label>


La deuxieme :


<div>
<label for = "toto">
  <img src = "toto.png" />
  <h3>blabla</h3>  
   <input type = "checkbox" id = "toto" />
</label>
</div>


Ce que je cherche a faire c'est de rendre cliquqble tout le contenu du div, afin que la checkbox soit coche/decoche
Mettre des éléments de type bloc dans un label (élément de type en-ligne), ça va pas le faire. C'est juste comme qui dirait invalide. Smiley cligne

Mettre des espaces autour du signe égale qui sépare attribut et valeur de l'attribut, c'est juste invalide aussi.

Laisse-moi deviner... tu n'as pas essayer de valider ta page, hum?
Modifié par Florent V. (12 Aug 2009 - 20:32)
Florent V. a écrit :
Mettre des éléments de type bloc dans un label (élément de type en-ligne), ça va pas le faire. C'est juste comme qui dirait invalide. Smiley cligne

Mettre des espaces autour du signe égale qui sépare attribut et valeur de l'attribut, c'est juste invalide aussi.

Laisse-moi deviner... tu n'as pas essayer de valider ta page, hum?


Je ne savais pas que metter des espaces autour du signe égale était invalide en html Smiley decu
C'est juste que c'est un petit peu plus lisible pour moi,, et a force de coder de cette maniere en C Smiley smile Je dormirais moins bete ce soir.

Sinon oui, je ne suis pas encore a l'aise avec ces histoire de inline et block.
J'essaierais de m'informer quand je serais moins dans l'urgence .

Merci encore, ton bout de code marche parfaitement Smiley ravi
Sujet clos
Aller à