Condition HTML

Fermé
R.Alexandre Messages postés 6 Date d'inscription mardi 12 juin 2012 Statut Membre Dernière intervention 12 juin 2012 - 12 juin 2012 à 14:51
R.Alexandre Messages postés 6 Date d'inscription mardi 12 juin 2012 Statut Membre Dernière intervention 12 juin 2012 - 12 juin 2012 à 18:39
Bonjour, voici mon formulaire en html je voudrais que la partie 2 soit masquée et que lorsque je clique sur "oui" dans la partie 1 elle apparaisse. Pouvez-vous m'aider s'il vous plaît ? merci :)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>infos</title>
</head>
<body>
<form action= "nom" method="get">
<fieldset style="width:700px;">
<legend>infos</legend>
<table style="border=0;">
<tr><td> <colspan="2"><h1>partie 1:</h1></td></tr>
<tr>
<td style="width:185px;">
<label for="passion">Avez-vous déjà joué au baseball ?</label>
</td>
<td>
<label for="oui" >oui<input id="oui" name="experience" type="radio" /> </label>
<label for="non">non<input id="non" name="experience" type="radio" /> </label>
</td>
</tr>
<div id="id_div_1" style="display:none;">
<tr><td> <colspan="2"><h1>partie 2 :</h1></td></tr>
<tr>
<td style="width:185px;">
<label for="passion">Style de batteur :</label>
</td>
<td>
<label for="d" >droitier<input id="d" name="position" type="radio" /> </label>
<label for="g">gaucher<input id="g" name="position" type="radio" /> </label>
</td>
</tr>
<tr>
<td>
<input id="validator" name="submit" type="submit" />
</td>
</tr>
<tr>
<td>
<input id="remise" name="reset" type="reset" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

1 réponse

Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
Modifié par Fallentree le 12/06/2012 à 15:21
bonjour,
il faut que modifie le style
<label for="oui" >oui<input id="oui" name="experience" type="radio" onclick="document.getElementbyId('id_div_1').style.visibility=visible;" /> </label>
<div id="id_div_1" style="visiblity:hidden;">
0
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
12 juin 2012 à 15:21
Mais attention position relative et absolute
0
R.Alexandre Messages postés 6 Date d'inscription mardi 12 juin 2012 Statut Membre Dernière intervention 12 juin 2012
12 juin 2012 à 15:34
Merci mais je ne suis pas très bon à ce niveau donc je voies à peut près ce qu'est le positionnement relatif / absolu mais je n'y arrive toujours pas ^^

ps: Je dois faire une page en CSS si j'ai bien compris ?
0
Bonjour, tu n' as pas besoin d'une page css , tu fais mets le code css entre les balise <head></head>.
Sinon avec du javascript tu peux réaliser les actions afficher/cacher sans problème.

<head>
<script language="javascript">
function choix(chaine)
{
var a = document.getElementById("oui");
var b= document.getElementById("non");

if (chaine == 'cacher1'){

a.style.display = "block";
b.style.display = "none";
}
else if (chaine == 'cacher2'){

a.style.display = "none";
b.style.display = "block";
}}
</script>
</head>



<body>
<label for="oui" >oui<input id="oui" name="experience" type="radio"  onchange="choix('cacher1') /> </label> 
<label for="non">non<input id="non" name="experience" type="radio" onchange="choix('cacher2')" /> </label>	
</body>
0
R.Alexandre Messages postés 6 Date d'inscription mardi 12 juin 2012 Statut Membre Dernière intervention 12 juin 2012
12 juin 2012 à 16:07
Là quand je clique sur non le "non" disparaît ^^ mais la partie est toujours visible (Faut il que je je réexplique ce que j'essaie de faire ou pas ? je me suis peut-être mal exprimé :/ )
0
R.Alexandre Messages postés 6 Date d'inscription mardi 12 juin 2012 Statut Membre Dernière intervention 12 juin 2012
12 juin 2012 à 16:58
En fait lorsque je clique sur le "oui" le oui et le non se mettent l'un en dessous de l'autre et le bouton radio du "non" disparaît (désolé je débute ^^)
0