[HTML] 1 meme champ dans 2 formulaires d'une meme page?

**loopx** · 16/02/2008, 20h46

Bonjour,

J'ai un ptit problème de conception web

C'est bête, mais je sais pas trop comment je dois m'y prendre ...

Je m'exlique:

Dans mon site web, j'ai une partie permettant de créer de la documentation. Qu'est-ce que de la documentation à proprement parler ? Pour mon site, c'est représenté par une page qui contient une série d'element.

Donc je fais click click et je tombe sur la page "add.jsp" (ou add.html, c'est juste que mon site dynamique) qui contient ceci:

- le nom de la page
- une zone pour ajouter un element texte à la page
- un bouton ajouter (pour ajouter la zone texte à la page)

Seulement voilà, j'ai un souci ...

Je vais vous montrer le code, parce que j'ai vraiment du mal à m'exprimer ... à expliquer ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/web_base/style/default.css" />
<title>PiX-MANIA :: DOCUMENTATION :: Ajout d'un document</title>
 
</head>
<body>
<center>
	<h1>Ajout d'un document</h1>
 
	<p class="info">
		Veillez saisir le nouveau document:
	</p>
 
	<form method="POST" action="DocumentationServlet">		    
	    <input type="submit" value="Terminer" />
		<input type="hidden" name="action" value="add-end"/>
	</form>
 
 
	<form action="DocumentationServlet" name="ajout">
		<label>Nom: </label>
	    <input type="text" name="name" value=""/><br>
 
		<label>Element a ajouter</label>
		<input type="text" name="content" value="" />
 
		<input type="submit" value="ajouter" />
		<input type="hidden" name="action" value="add-update"/>
		<input type="hidden" name="choice" value="add"/>
 
	</form>
 
 
 
<br><br>
<A HREF="/web_base/main.jsp">retour au main</A>
</center>
</body>
</html>

Le nom de la page est "sauvé" uniquement lors de l'utillisation du formulaire "ajout" (qui ajoute aussi un element à la page).

Quand j'ajoute un element à la page, celle-ci revient sous cette forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
	<form method="POST" action="DocumentationServlet">		    
	    <input type="submit" value="Terminer" />
		<input type="hidden" name="action" value="add-end"/>
	</form>
 
 
	<form action="DocumentationServlet">
		<label>Nom: </label>
	    <input type="text" name="name" value="nom de ma page"/><br>
 
		<label>Element a ajouter</label>
		<input type="text" name="content" value="" />
 
		<input type="submit" value="ajouter" />
		<input type="hidden" name="action" value="add-update"/>
		<input type="hidden" name="choice" value="add"/>
 
	</form>
 
 
		<form action="DocumentationServlet">
			<label>Element43</label>
			<input type="text" name="content" value="mon premier element"/><br>
 
			<label>que faire ?</label>
			<select name="choice">
				<option value="update">mise à jour</option>
 
				<option value="remove">suppression</option>
			</select>
 
			<input type="submit" value="faire!" />
			<input type="hidden" name="action" value="add-update"/>
			<input type="hidden" name="id" value="43"/>
		</form>

Donc, après ajout d'un element, je retombe sur la meme page MAIS avec un formulaire en plus (formulaire permettant de modifier l'élément précédement ajouté).

Jusque la, pas de problème ... Maintenant imaginer que, pour une modification de la doc (documentation représentée par une page ... donc modification de la page), je récupère exactement la meme page que pour l'ajout

(un peu comme le forum ici quoi).

Ok, vous suivez .. ben maintenant que vous modifier la page (vous etes à nouveau sur add.jsp ... vous avez le 2ème bout de code ci-dessus), comment faire pour MODIFIER LE NOM DE LA PAGE SANS être obligé de rajouter un element à cette meme page ?????

Parce que le problème, c'est que la propriété "nom" ne se trouve QUE dans le formulaire d'ajout d'un element. Pourquoi ai-je fais celà ? Simplement parce que suivant l'ordre des choses, l'utilisateur va entrer le nom de la page, puis entrer le premier element et faire ajouter ... Et la, paf, si je met pas le champ "nom" dans le formulaire d'ajout, ben lors du retour sur la page add.jsp (après avoir appuyer sur le bouton AJOUT), ben le NOM de la page à disparu (logique ...); c'est pourquoi j'ai ajouté le champ NOM au formulaire AJOUT...

Mais le problème d'une modification, c'est que si je modifie une propriété directement lié à la page (donc le nom de la page), et que je fais TERMINER (donc le tout premier formulaire) ben, le nom n'est pas mis à jour... parce que le champ nom est déjà présent dans le formulaire AJOUTER.

Donc voilà, j'en viens à ma question:

Comment faire pour que le bouton TERMINER et le bouton AJOUTER prenne compte du NOM de la page ?
Le truc, c'est que je ne veux pas avoir 2x le nom de la page inscrit sur la page web à deux endroit différent (celà preterait à confusion).

Donc, est-il possible d'ajouter un champ <input type="text" ... /> qui serait afficher 1x dans une page web mais qui pourrait être utiliser par plusieurs formulaire (par exemple, le premier et le deuxième dans mon code ci-dessus) ?

Ainsi, quand j'appuie sur le bouton TERMINER ou sur le bouton AJOUTER, le nom (qui sera présent à 1 seul endroit de la page web add.jsp) serait envoyé en paramètre.

J'ai pensé à des "formulaire imbriqué" mais je ne sais pas si cela existe ...

Mille merci pour votre future réponse

**Erwan31** · 16/02/2008, 21h02

Bonsoir,
désolé je n'ai pas le temps de me pencher sur ton problème mais
juste quelques remarques:
les éléments form ne peuvent contenir directement que des éléments de niveau block (en général un p)
Ne pas oublier de lier le label au champ associé via le couple for/id,
ce qui donnera par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
	<form action="DocumentationServlet">
<div>
<p>	
<label for="nom">Nom: </label>
<input type="text" name="name" value="nom de ma page" id="nom" />
</p>
<p>	
<label for="nom">Nom: </label>
<input type="text" name="name" value="nom de ma page" id="nom" />
</p>
</div>
	</form>

Pour des retour à la ligne, éviter les élément br (break) qui ne sont fait que pour forcer une coupure de ligne.
Insérer tout simplement le couple lable/input dans un p.

> ne pas oublier s'espace avant le slash de fermeture.
> le br en xhtml s'écrit <br />

**loopx** · 16/02/2008, 22h04

Ok, merci pour les infos concernant le formattage d'une page HTML, j'en ai besoin parce que je n'avais jamais fait de "vrai" html.

Donc, je vais insérer une balise type block dans le formulaire pour contenir le tout et éviter les break intenpestifs

Concernant l'espace entre "/" et ">", je ne comprend pas trop pourquoi ... et je ne pensais pas que c'était vraiment nécessaire ... Maintenant, il est vrai que j'ia oublié le "/" de fin de tag "br" (c'est eclipse qui ne le met pas en fait ...).

Pour les labels, pourquoi est-t'il nécessaire de préciser le "for" ? Je ne vois pas ce que cela change au niveau "logique" ou "design" ... Si tu pouvais m'expliquer ..... Est-ce que cela sert à mettre le input juste à droite de la label ?

Question:
- le "div" que tu as rajouté, c'est parce que il y a 2 paragraphe dans le formulaire ? Il faut alors mettre une balise "block" pour contenir tout ? Genre, dans la balise "form", tu ne peux avoir qu'un seul "block" ????

Donc, je vais tenir compte des modifs à apporter, mais le problème principal est toujours problématique ...

Comment faire 2 formulaires utilisant 1 meme champs déclaré une seule fois dans une page HTML ?

**Erwan31** · 16/02/2008, 23h22

Désolé pour la manque d'explication.
En fait le couple id/for présente un avantage en accessibilité et un autre en ergonomie.

Sur Accessiweb:

* Bénéfice 1 :
Dans le cas d'une page en HTML, la balise LABEL associée aux attributs id et for permet de relier directement le champ de saisie au texte qui lui est associé. Cela permet aux personnes navigant à l'aide d'un lecteur d'écran ou un navigateur vocal de définir sans ambiguïté à quel texte associé correspond le champ de saisie. En effet, lorsqu'ils passent de champ en champ en appuyant sur la touche "tabulation", la synthèse vocale annonce l'intitulé du champ courant.

* Bénéfice 2 :
Si la balise LABEL est présente, l'activation d'un élément du formulaire est rendue possible par un simple clic sur le contenu de l'intitulé. Cette activation par le biais de la balise LABEL offre un confort d'utilisation non négligeable aux utilisateurs ayant une vision réduite ou une mobilité limitée des membres supérieurs. En particulier sur les cases à cocher ou les boutons radio qui, du fait de leur taille réduite, sont difficiles à atteindre de manière précise avec la souris.

Pour le div englobant tu peux laisser tombé, une erreur de ma part.

**loopx** · 18/02/2008, 02h09

Voilà, j'ai trouvé ... faut (comme toujours quand html est pas assez puissant) utiliser du javascript ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script language="javascript">
	function finish() {
		name = document.getElementById("name").value;
		document.getElementById("name2").value=name;
		document.getElementById("FormFinish").submit();
	}
</script>

Pour deux formulaire, il faut un champ input qui sera visible dans le formulaire A, et dans le B, il sera hidden; leur nom doivent être identique (mais pas leurs id!).

Ici, j'ai utilisé pour les id "name" et "name2"...

Ce code va copier le input "visible" vers le input "invisible" de l'autre formulaire. Ensuite, j'envoye le formulaire 2 (FormFinish) (qui possède maintenant un input invisible dont la valeur est identique à l'input "name" visible).

Merci pour tout

[HTML] 1 meme champ dans 2 formulaires d'une meme page?

HTML

Vue hybride

Discussions similaires

Partager

Partager