Condition HTML

R.Alexandre Messages postés 6 Statut Membre -  
R.Alexandre Messages postés 6 Statut Membre -
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 2445 Statut Membre 209
 
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 2445 Statut Membre 209
 
Mais attention position relative et absolute
0
R.Alexandre Messages postés 6 Statut Membre
 
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
Markaz
 
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 Statut Membre
 
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 Statut Membre
 
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