P3 (cacher la moitié d'un formulaire)

Commenter

Contenu du snippet

Ce petit exemple vous permet de cacher la moitié d'un document HTML qui est affiché dans une page (afin de rendre l'affichage plus intérressant)...
Dans cette exemple, le formulaire est divisé en 2 partie...
La première partie est automatiquement affiché... tandis que la 2ème partie est caché... Pour l'afficher, il faut simplement cliquer sur le mot Partie 2... Et ainsi, la partie 1 se cacher pour afficher la 2ème...

Source / Exemple : 


<html>
<head>
<title>P3 (Cacher la moitié d'un formulaire)</title>
</head>
<style>
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: green;
}
.erreur {
font-weight: bold;
color: red;
}
</style>
<script>
function Changer(variable,valeur){
id = document.getElementById(variable);
        if(valeur=="0"){
id.style.display="none";
	}else{
                if(id.style.display=="none"){
id.style.display="";
		}
	}
}
function Menu(variable1,variable2,variable){
v1 = "blue";
v2 = "";
	if(variable=="0"){
variable1.style.background = v2;
variable1.style.cursor = "hand";
	}else if(variable=="1"){
                if(variable2.style.display=="none"){
variable1.style.background = v2;
variable1.style.cursor = "hand";
		}else{
variable1.style.background = v1;
variable1.style.cursor = "";
		}
	}
}
</script>
<body>
<center><form action="javascript:alert('Projet P3 --> HTTP://www.projet-p3.fr.st')">
        <table border="1">
                <tr><td class="titre" align="center" colspan="2">
Identifiant
                </td></tr><tr class="erreur" align="center"><td width="50%">
<div id="MenuPartie1" onclick="javascript:Changer('Partie1','1');Changer('Partie2','0');Menu(this,Partie1,'1');Menu(MenuPartie2,Partie2,'0')" style="background-color:blue">
Local
</div>
                </td><td>
<div id="MenuPartie2" onclick="javascript:Changer('Partie2','1');Changer('Partie1','0');Menu(this,Partie2,'1');Menu(MenuPartie1,Partie1,'0')" style="cursor:hand">
Internet
</div>
                </td></tr><tr><td colspan="2">
<center><b>
<div id="Partie1">Partie 1</div>
<div id="Partie2" style="display:none;position:static">Partie 2</div>
</b></center>
                </td></tr><tr><td colspan="2" align="center">
<input type="submit" value="Copyright">
                </td></tr>
	</table>
</form></center>
</body>
</html>

Conclusion :


Cette exemple est utilisé sur le portail CMS "Projet P3" dont la source est disponible sur Codes-Sources, rubrique PHP....

Aussi, j'ai oublié de vous signaler que par défaut, la partie 1 ou 2 est affiché, il n'est pas possible de cacher les 2 parties

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Toutoul)