18041 sujets

Questions générales et questions de débutants

Contact form

Bonjour, j'ai un souci avec ma page contact. J'espère poster au bon endroit.
Je voudrais savoir si mon code est bon.
J'ai fait des essais, ça marche pas. Pouvez-vous m'aider ?
Manque-t-il quelque chose ? Si oui, ...quoi ? ...où ?
Merci.

Code page "contact" :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content=""/>
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>contact</title>
</head>

<body>

<form action="" method="post" id="reply">
<fieldset>

<div class="legend"><h3>Ecrivez-nous</h3></div>

<div class="form_row">
<div class="form_property form_required">Votre Nom</div>
<div class="form_value"><input type="text" size="32" name="name" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Votre Email</div>
<div class="form_value"><input type="text" size="32" name="email" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Au sujet de</div>
<div class="form_value"><input type="text" size="32" name="website" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Texte</div>
<div class="form_value"><textarea rows="8" cols="46" name="comment"></textarea></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row form_row_submit">
<div class="form_value"><input type="submit" class="button" value="Envoyez le tout" /></div>
<div class="clearer">&nbsp;</div>
</div>

</fieldset>
</form>

</body>
</html>
Je dirais qu'il manque le script PHP pour traiter et envoyer les informations.

<form action="" method="post" id="reply">


"action" doit donner l'adresse du script PHP par rapport à la page du formulaire.


En passant :

Quite à ne rien mettre dans les meta, ci-dessous
<meta name="description" content=""/>
<meta name="keywords" content="" />
<meta name="author" content="" />

autant ne pas les mettre (surtout les deux derniers, le premier est intéressant pour google).
Administrateur
Diagnostic: divite !

<form action="#" method="post" id="reply">
	<fieldset>
		<h3>Écrivez-nous</h3>

		<p>
			<label for="name">Votre Nom</label>
			<input type="text" size="32" name="name" id="name" value="" />
		</p>

		<p>
			<label for="email">Votre Email</label>
			<input type="text" size="32" name="email" id="email" value="" />
		</p>

		<p>
			<label for="website">Au sujet de</label>
			<input type="text" size="32" name="website" id="website" value="" />
		</p>
	
		<p>
			<label for="comment">Texte</label>
			<textarea rows="8" cols="46" name="comment" id="comment"></textarea>
		</p>
	
		<p class="submit">
			<input type="submit" value="Envoyez le tout" />
		</p>

</fieldset>
</form>


Au menu:
- Ecrivez --> Écrivez
- div class="...row..." devient un autre élément de type bloc comme un <p>aragraphe (une ligne, un paragraphe, faut pas chercher plus loin). Ajout de class="submit" pour le dernier qui est à part (peut-être aussi sur celui du textarea si tu en as besoin)
- <div><h3> ? <h3> suffira

- le texte devant un élément de formulaire, c'est en général un <label>. Ça ne sert même qu'à ça. Donc ajout de <label>s un peu partout
- un id sur chaque input pour être lié avec les <label> grâce au couple for/id. Clique sur un <label> et oh! le curseur se positionne dans l'élément correspondant (ça c'est ce qui se voit pour toi et moi mais ça apporte énormément en accessibilité en général)
- <div><input> ? <input> suffira
- pas de 
<div class="clearer">&nbsp;</div>
, on rajoutera s'il le faut en CSS un clear: both; sur les <p>aragraphes.
- tu n'as pas de <legend> dans ton <fieldset> et c'est dommage. M'enfin c'est difficile à styler donc je m'éternise pas dessus Smiley rolleyes

Et voilà un premier jet pour le code HTML brut.
Ensuite viendra le CSS mais je ne sais pas ce que tu veux visuellement obtenir.
Y a souvent des text-align: left ou right; du flottant pour les <label> et <input>, un 
<div class="clearer">&nbsp;</div>
après le dernier <p>aragraphe, moultes corrections de width, vertical-align et autres pour IE6 et IE7 via des commentaires conditionnels parce que les formulaires un peu trop stylés, c'est vite la m...

Lectures:
- http://openweb.eu.org/articles/formulaire_accessible
- http://www.alsacreations.com/astuce/lire/6-comment-utiliser-llment-label-dans-les-formulaires.html
- la doc (X)HTML, à lire une fois
- 456bereastreet pour les aspects CSS avancés et le support par les navigateurs
Ok, merci à tous ceux qui ont bien voulu se pencher sur la question.
J'avais pas vu qu'on pouvait mettre en forme les posts.
A l'avenir je ferai plus attention. Promis.
chrisd a écrit :

J'avais pas vu qu'on pouvait mettre en forme les posts.
A l'avenir je ferai plus attention. Promis.
Il est encore temps d'éditer ton post et de rajouter les balises manquantes. Smiley cligne
Et comment j'édite mon message original ?

Quan je clique sur tes liens, pour voir comment faire, j'obtiens une page avec "Ce document a été placé hors-ligne."
C'est con, je sais. Smiley cligne Mais là j'avance pas.

A tout de suite.
chrisd a écrit :
Et comment j'édite mon message original ?
Quand tu es connecté tu as un bouton "Editer" en haut à droite de chacun de tes posts.

chrisd a écrit :

Quan je clique sur tes liens, pour voir comment faire, j'obtiens une page avec "Ce document a été placé hors-ligne."
Ce sont les liens de la v2... mais normalement il y a une redirection vers la v3...

Quoi qu'il en soit voici les nouveaux (je me cite Smiley lol ) :

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne
[quote=chrisd]Bonjour, j'ai un souci avec ma page contact. J'espère poster au bon endroit.
Je voudrais savoir si mon code est bon.
J'ai fait des essais, ça marche pas. Pouvez-vous m'aider ?
Manque-t-il quelque chose ? Si oui, ...quoi ? ...où ?
Merci.

Code page "contact" :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content=""/>
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<title>contact</title>
</head>

<body>

<form action="" method="post" id="reply">
<fieldset>

<div class="legend"><h3>Ecrivez-nous</h3></div>

<div class="form_row">
<div class="form_property form_required">Votre Nom</div>
<div class="form_value"><input type="text" size="32" name="name" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Votre Email</div>
<div class="form_value"><input type="text" size="32" name="email" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Au sujet de</div>
<div class="form_value"><input type="text" size="32" name="website" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>
								
<div class="form_row">
<div class="form_property form_required">Texte</div>
<div class="form_value"><textarea rows="8" cols="46" name="comment"></textarea></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row form_row_submit">
<div class="form_value"><input type="submit" class="button" value="Envoyez le tout" /></div>
<div class="clearer">&nbsp;</div>
</div>
							
</fieldset>
</form>

</body>
</html>[/quote]
Ah ! Là tu as fait "citer" à la place de "éditer". Smiley langue

Mais c'est tout de même plus lisible.
Sujet clos
Aller à