Discussion :

[kewan]

Salut tout le monde,

j'ai besoin de votre aide.

Je voudrais créer dans un formulaire une liste d'options avec possibilité d'envoyer une réponse autre et libre :


Je l'ai réalisé comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<form method="post">
	<input type="radio" name="defaut" value="Choix1" id="Choix1" onClick="libre.disabled = true;" required><label for="Choix1">Choix1</label><br>
	<input type="radio" name="defaut" value="Choix2" id="Choix2" onClick="libre.disabled = true;"><label for="Choix2">Choix2</label><br>
 
	<input type="radio" name="defaut" id="Choix3" onClick="libre.disabled = false;">
 
	<input type="text" name="defaut" id="libre" onClick="Choix3.checked = true;" required/><br>
 
	<input type="submit" name="subChoix" value="Valider"/>
</form>

Comment le coder mieux que ça ?

[NoSmoking]

Bonjour,
tu peux effectivement simplifier tout cela en CSS uniquement ce qui va singulièrement alléger ton code

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#libre {
  display: none;
}
#Choix3:checked ~ #libre {
  display: block;
}

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<form method="post">
	<input type="radio" name="defaut" id="Choix1" value="Choix1"><label for="Choix1">Choix1</label><br/>
	<input type="radio" name="defaut" id="Choix2" value="Choix2"><label for="Choix2">Choix2</label><br/>
 
	<input type="radio" name="defaut" id="Choix3" value="Autre"><label for="Choix3">Autre</label> <input type="text" name="ChoixLibre" id="ChoixLibre"/><br>
 
	<input type="submit" name="subChoix" value="Valider"/>
</form>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#ChoixLibre { display:none; }
#Choix3:checked ~ #ChoixLibre {
  display:inline-block; 
}

une variante :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#ChoixLibre { visibility:hidden; }
#Choix3:checked ~ #ChoixLibre {
  visibility: visible;
}

Attention : l'input text doit avoir un name différent des boutons radio.