1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. P3 (cacher la moitié d'un formulaire)

P3 (cacher la moitié d'un formulaire)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 866 fois - Téléchargée 29 fois

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

Ajouter un commentaire Commentaire
ao2208 Messages postés 56 Date d'inscription mercredi 1 novembre 2000 Statut Membre Dernière intervention 30 novembre 2005
26 nov. 2005 à 23:38
La source est utile mais je trouve juste dommage de ne pas avoir mis que le principal car ce n'est pas evident du tout à l'integrer sur une page complexe.
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)