[RESOLUT] Masqué un bloc de formulaire puis apparaît au :hover

bonjour a tous

comme dit dans le titre, je voudrais masqué mon bloc de formulaire et ensuite qui réapparaisse au :hover.

je viens de finir mon site, exercice en local (j’apprends le HTML5 et cc3), j'ai fait un <footer> en 2 partie, la première avec des images diverses, la seconde avec un formulaire de contact que je voudrais masqué pour le faire réapparaître au :hover en passent sur le <H2> contactez le webmaster</h2> .

voici le code de la seconde partie du <footer>

<div id="footer_bottom">
		
<h2>contactez le webmater</h2>
		
<form action="traitement.php" method="post">
<p>
	<label for="nom">Votre nom:</label>
		<input id="nom" name="nom" type="text" required/>
						
		<br/>
		<label for="prenom">Votre prénom:</label>
			<input type="text" id="prenom" name="prenom" required />
					
		<br/>
		<label for="email">adresse e-mail:</label>
		<input type="email" id="email" name="email" placeholder="Ex: nom.prénom@fai.fr"  required />
					
		<br/>
		<label for="password">mot de passe:</label>
			<input type="password" id="password" name="password" required />
					
		<label for="texta">Votre message:</label>
						
			<textarea name="texta" id="texta" rows="10" cols="50"></textarea>
					
		<br/>
				<input type="submit" value="Envoyé"/>
			</p>
		</form>
	</div>
<!-- footer_bottom -->

cordialement
Modifié par camox (25 Aug 2013 - 14:49)

Avec CSS tu masque ton form (display: none). Ensuite avec une règle CSS (:hover) tu fais en sorte qu'au survol il se ré-affiche. (y'a un truc que j'ai pas compris ?)
Modifié par MagicCarpet (22 Aug 2013 - 22:25)

(Je sais pas ce qui se passe mais apparemment je dois être déconnecté et chaque fois que je crois éditer mon message, je le cite et je dois me reconnecter. 3 fois au moins aujourd'hui !!! === fausse manip)
Modifié par MagicCarpet (22 Aug 2013 - 22:18)

salut,
si tu veux mon avis, ce n'est pas terrible comme idée de faire apparaître un formulaire au hover d'un titre ! Ça peut vite être très embêtant surtout quand on saisie.
Ce n'est encore pas bon de le faire avec "display:none" pour une question d'accessibilité et comme tu n'as rien donné comme CSS, on ne sait pas trop comment fais-tu pour le masquer.
Si non en gros c'est plutôt simple

form {display:none}
h2:hover+form {display:block}

Il faut modifier en fonction de ta mise en page.

Attends je te suis pas. Tu dis que c'est pas bon avec un display:none et tu donnes cet exemple ? (Parce que tu n'as pas son code CSS ? Et pourquoi pas accessible ?)

Après je suis d'accord que l'idée de masquer le formulaire et de le faire apparaitre au survol d'un titre est plutôt une mauvaise idée, à cause de ma fausse manip j'ai oublié de le préciser.

a écrit :
Attends je te suis pas. Tu dis que c'est pas bon avec un display:none et tu donnes cet exemple ? Smiley biggol (Parce que tu n'as pas son code CSS ? Et pourquoi pas accessible ?)

C'est uniquement pour comprendre le principe du "h2:hover+form {...}" et parce qu'il n'a fournit aucun code CSS.
Ce n'est pas accessible car les lecteurs d'écran et tout autre média ne les prendront pas en compte et ne signaleront leur présence. En gros, pour un non-voyant, le formulaire n'existe pas.
De plus c'est totalement incohérent d'afficher un formulaire au survol d'un titre !

NE jamais oublier de doubler les éléments réactifs aux survol d'une réaction au focus, et sur un élément focusable. Il en va d'une accessibilité de base.

Et dans le cas précis d'un formulaire, même focus ne suffit pas, puisque pour remplir le formulaire il faut placer le focus sur les champs et donc déplacer le focus de l'élément qui le fait apparaître.

Et même sans prendre en compte focus, le hover ici ne fonctionnera pas comme attendu: il faut nécessairement quitter le titre pour cliquer dans le champ... et donc le formulaire va disparaître précisément au moment où on s'apprête à cliquer dessus. Frustrant.

Bref, c'est beaucoup de prise de tête pour rien. Mieux vaut une page de contact classique à part entière, ou un bon vieux lien qui bascule l'état affiché/masqué du formulaire au clic. Les interfaces utilisateur les plus simples sont encore les meilleures.

Zelalsan a écrit :

C'est uniquement pour comprendre le principe du &quot;h2:hover+form {...}&quot; et parce qu'il n'a fournit aucun code CSS.
Ce n'est pas accessible car les lecteurs d'écran et tout autre média ne les prendront pas en compte et ne signaleront leur présence. En gros, pour un non-voyant, le formulaire n'existe pas.
De plus c'est totalement incohérent d'afficher un formulaire au survol d'un titre !

Ok, QuentinC m'a communiqué quelques programmes, faut que je regarde tout ça de plus près. Merci pour toutes ces infos.
Modifié par MagicCarpet (23 Aug 2013 - 10:13)

slt a tous
merci pour vos réponse.

c vrais que le rendu n'est pas bon:)
merci pour les conseil en accessibilité.

@+