Formulaire php javascript html et css

meunier_anthony · 28/11/2011, 21h05

Voilà, je commence par le début.
Je fais une page de contact (contact.html) dans laquelle se trouve un formulaire de contact qui dans mon idéal m'envoi un mail pour une commande ou un renseignement.
Je sui un peut perdu et je ne connais pas le javascript, ni le php pour le moment.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd. ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />
 
	<link rel="stylesheet" type="text/css" href="style/style_contact.css" media="screen" />
 
 
<script type="text/javascript" language="Javascript" >
<!--
function verification()
{
}
 
 
if(document.formulaire.nom.value == "") {
  alert("Veuillez entrer votre Nom svp");
  document.formulaire.nom.focus();
  return false;
 }
  else
return true;
 
else
if(document.formulaire.email.value == "") {
  alert("Veuillez entrer votre adresse electronique svp");
  document.formulaire.email.focus();
  return false;
 }
 
 
 else
if(document.formulaire.email.value.indexOf('@') == -1) {
  alert("Ce n'est pas une adresse electronique, verifiez la svp");
  document.formulaire.email.focus();
  return false;
 }
 
 
else
   sujetoption = -1
   for (i=0; i<formulaire.sujet.length; i++)
   {
   if(document.formulaire.sujet[i].checked){
   sujetoption = i
   }
  }
   if (sujetoption == -1) {
  alert("Veuillez choisir un sujet pour votre mail svp");
  return false;
 }
 
else
if(document.formulaire.texte.value == "") {
  alert("Veuillez entrer le texte de votre message svp");
  document.formulaire.texte.focus();
  return false;
 }
 
//-->
</script>
 
 
</head>
 
 
 
 
<body>
 
	<div id="wrapper">
 
 
 
 
		<div id="header">
			<h1><img src="img/logo.png" alt="Logo Plaque de Rallye" /></h1>
			<ul id="nav">
				<li><a href="index.html">accueil</a></li>
				<li><a href="materiel.html">matériel</a></li>
				<li><a href="a_propos.html">à propos</a></li>
				<li><a href="contact.html">contact</a></li>
			</ul> <!-- #ul -->
		</div> <!-- #header -->
 
 
 
 
 
		<blockquote>
			<p>N'hésitez plus ! Prenez contact dès à présent. Remplissez le formulaire suivant et nous vous recontacterons le plus rapidement possible afin de satisfaire votre demande.</p>
		</blockquote> <!-- #blockquote -->
 
 
 
		<div id="titre_formulaire" class="font">
			<h2>C'est par ici !</h2>
		</div> <!-- #h2 -->
 
 
 
		<div id="formulaire">
			<form name="formulaire" action="traitement.php" method="post" onSubmit="return verification()">
			<table>
			<tr><td>Nom : </td><td><input name='nom' type='text' size='50'></td></tr>
			<tr><td>Prénom : </td><td><input name='prenom' type='text' size='50'></td></tr>
			<tr><td>E-mail :</td><td><input name='email' type='text' size='50'></td></tr>
			<tr><td>Motif de votre message :</td><td><input name='sujet' type='radio' 					value='renseignement'> Renseignements<br>
			<input name='sujet' type='radio' value='partenariat'> Commande</td></tr>
			<tr><td>Message :</td><td><textarea name='texte' cols='75' rows='22'></textarea></td></tr>
			<tr>
			<td><input name='soumettre' type='submit' value='Envoyer'></td></tr>
			</table>
			</form>
		 </div> <!-- #formulaire -->
 
 
 
	</div> <!-- #wrapper -->
 
 
 
 
 
		<div id="footer">
			<a href="index.html" title="Retour à l'accueil"><img src="img/petit-logo.png" alt="Logo Plaque de Rallye" /></a>
		</div> <!-- #footer -->
 
 
</body>
 
</html>

Enfin voilà j'ai suivi quelques exemples sur le net. J'en sui là avec le HTML puis la suite avec la page : traitement.php

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
<?
$adresse="votreadresse@votrefai.com";
$from="From: $prenom $nom<$email>\r\n";
$from.="Reply-To: $prenom $nom <$email>\n";
$from.="X-priority:3\n";
$texte="<html>";
$texte.="$texte";
$texte.="</html>";
$from.="MIME-Version: 1.0\r\n";
$from.="Content-Type: text/html";  
if (mail($adresse,$sujet,$texte,$from))
echo("<center><font color=green><br><br><br><h2>Formulaire envoy&eacute; ! Je vous r&eacute;pondrais rapidement. Merci!</h2></font><br><a href=/>Cliquez ici pour revenir &agrave; l'accueil</a></center>");
else
echo("<center><font color=red><br><br><br><h2>Probl&egrave;me &agrave; l'envoi du mail...d&eacute;sol&eacute; nous ne pouvons actuellement traiter votre demande</h2></font><br>Contactez nous plus <a href=\"mailto:$adresse\">classiquement</a>");
?>

Je ne comprends pas de trop ou je vais avec tout ça. Je débute dans tout ça et je ne suis pas certain de ce que je fais.

Merci d'avance et bonne soirée
Anthony

EIN-LESER · 29/11/2011, 10h45

Pour commencer il faudrait placer toutes tes if else dans ta function verification.

Ensuite tu place l'appel a ta function dans la balise de ton formulaire pour l’exécuter a la validation.

Personellement je prefere avoir une function par champ a verifier ce qui permets de vérifier que personne ne saisit quelque-chose de non approprié dans une case comme des chiffres quand on attends des lettres par exemple mais bon ^^

Mais si tu dois te servir de PHP et javascript

il serait bien d'en apprendre au moins les fondements sinon tu t'en sortiras pas

Courage

meunier_anthony · 29/11/2011, 18h33

Oui je pense que tu as raison sur le fait que je devrais commencer à apprendre le php et javascript. Je vais sauter le pas d'ici quelques jours.

Il faut que je tente de faire mon formulaire avant car je dois le rendre fonctionnel pour le milieu de semaine prochaine.

En fait j'ai compris ce que tu disais. J'ai remis mes if et else dans la fonction vérification. Sinon après quand je suis en local et que je simule un formulaire, je clique sur "envoyer" le navigateur (firefox pour l'éssai), m'ouvre mon code php tout simplement. Est ce normal ?

Si je ne rempli pas tout les champs je n'ai aucun message d'erreur non plus.

Merci…

Bovino · 29/11/2011, 18h48

Citation:

Sinon après quand je suis en local et que je simule un formulaire, je clique sur "envoyer" le navigateur (firefox pour l'éssai)

C'est normal si tu n'as pas de serveur local : un navigateur ne sait pas interpréter PHP et franchement, ce genre de connaissance, c'est le B.A BA quand on utilise PHP, je t'invite donc vivement à suivre les conseils de EIN-LESER...

Citation:

Si je ne rempli pas tout les champs je n'ai aucun message d'erreur non plus.

Ben... c'est qu'il y a des erreurs dans le code de vérification...

La première des choses est de récupérer Firebug pour Firefox et de regarder ce que te dit la console d'erreurs.

EIN-LESER · 30/11/2011, 09h08

Écoute bovino il est généralement de très bon conseil.

Pour commencer télécharge et installe un easyphp. Il est gratuit et en + il te fourniras ton serveur php et un serveur mysql (que tu t'en serve ou pas)

Il existe de tutoriels très bien pour les débutants qui sont très accessibles. Jette y un coup deuil.

Je veux bien te filer un exemple de l’utilisation d'un formulaire avec verif mais si tu y comprends rien cela risque de pas t'aider beaucoup

EIN-LESER · 30/11/2011, 09h15

Voici un petit exemple (a adapter si tu veux t'en servir) comme promis:

Pour commencer le script de ferif a mettre dans le head

Code html :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
 
<script type="text/javascript">
date_du_jour=new Date();
 
<!--Fonction permettant d'appeler le focus sur le premier champ du formulaire. -->
function focus_on_load()
{
document.getElementById('nom').focus();
 
}
 
<!--Fonction appelant les differentes fonctions de verifications-->
function verifications(){
	if (verificationDate()==true&&verification_nom()==true&&verification_prenom()==true&&verification_numrue()==true&&verification_nomrue()==true&&verification_code_postal()==true&&verification_ville()==true&&verification_mail()==true&&verification_pseudo()==true&&verification_pass()==true){
		return true;
	}
	else{		
		return false;
	}
}
 
/*Fonction permetant de passer automatiquement au textfield suivant quand la longueur maximal du dextfield est ateint.*/
function Autotab(box, longueur, texte)
{
 
    if (texte.length == longueur-1) {
		document.getElementById(box).focus();
    }
}
 
<!--Fonction verifiant si la date de naissance est renseigné et si cette date est valide-->
function verificationDate(){
	<!--Verification si annee renseigné-->
	if(document.getElementById('Annee').value == "AAAA"){
		alert ('La saisie de l\'année est obligatoire!!!!');
		return false;
	}
	else{
		<!--Verification si l'année est superieur a l'an 1600 et non superieur a l'année en cours.-->
		if(document.getElementById('Annee').value < 1600||document.getElementById('Annee').value >date_du_jour.getFullYear()){
		alert ('La saisie de l\'année doit etre superieur a 1600 et inferieur a '+(date_du_jour.getFullYear()+1));		
		return false;
		}
		else{
		<!--Verification si le mois est bien renseigné-->
			if(document.getElementById('Mois').value == "MM"){
				alert ('La saisie du mois est obligatoire!!!!');				
				return false;
		}
			else{
		<!--Verification si le mois est bien superieur a 0-->
				if(document.getElementById('Mois').value <1){
					alert ('Le mois saisi doit etre superieur a zero!!!!');
					return false;
				}
				else{
		<!--Verification si le mois est bien inferieur a 13-->
					if(document.getElementById('Mois').value >12){
						alert ('Le mois saisi doit etre inferieur a 13!!!!');
						return false;
					}
					else{
		<!--Verification si le jour de parution a bien été renseigné.-->
						if (document.getElementById('Jour').value =="JJ"||document.getElementById('Jour').value ==""){
							alert ('La saisie du jour est obligatoire!!!!');				
							return false;						
						}
						else{
		<!--Verification de la validité de la date en tenant compte des années bisextiles.-->
							if(document.getElementById('Jour').value <1){
								alert ('La jour doit étre supperieur a zero!!!!');				
								return false;							
							}
							else{
								if((document.getElementById('Mois').value==1||document.getElementById('Mois').value==01||document.getElementById('Mois').value==3||document.getElementById('Mois').value==03||document.getElementById('Mois').value==5||document.getElementById('Mois').value==05||document.getElementById('Mois').value==7||document.getElementById('Mois').value==07||document.getElementById('Mois').value==8||document.getElementById('Mois').value==08||document.getElementById('Mois').value==10||document.getElementById('Mois').value==12 )&&document.getElementById('Jour').value>31){
									alert ("Il n'existe pas "+document.getElementById('Jour').value+" jours dans le mois choisi!!!!");		
									return false;	
								}
								else{
									if((document.getElementById('Mois').value==4||document.getElementById('Mois').value==04||document.getElementById('Mois').value==6||document.getElementById('Mois').value==06||document.getElementById('Mois').value==9||document.getElementById('Mois').value==09||document.getElementById('Mois').value==11)&&document.getElementById('Jour').value>30){
										alert ("Il n'existe pas "+document.getElementById('Jour').value+" jours dans le mois choisi!!!!");		
										return false;
									}
									else{
										if((document.getElementById('Mois').value==2||document.getElementById('Mois').value==02)&&(document.getElementById('Annee').value%4==0)&&document.getElementById('Jour').value>29){
											alert("Il n'existe pas "+document.getElementById('Jour').value+" jours dans le mois choisi!!!!");
											return false;
										}
										else{
											if((document.getElementById('Mois').value==2||document.getElementById('Mois').value==02)&&(document.getElementById('Annee').value%4==1)&&document.getElementById('Jour').value>28){
												alert("Il n'existe pas "+document.getElementById('Jour').value+" jours dans le mois choisi!!!!");
												return false;										
											}
											else{
												<!--Si toutes les verifications sont correctes on passe a la page suivante avec le submit.-->
												return true;															
											}									
										}	
									}	
								}							
							}
						}				
					}					
				}			
			}			
		}	
	}
}
 
<!--Fonction verifiant si le nom a été renseigné-->
function verification_nom(){
	if(document.getElementById('nom').value == ""){
		alert ('La saisie du nom est obligatoire!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
<!--Fonction verifiant si le prenom a été renseigné-->
function verification_prenom(){
	if(document.getElementById('prenom').value == ""){
		alert ('La saisie du prenom est obligatoire!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
<!--Fonction verifiant si le numéro de rue a été renseigné-->
function verification_numrue(){
	if(document.getElementById('numero').value == ""){
		alert ('La saisie du numéro de rue est obligatoire!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
<!--Fonction verifiant si le nom de rue a été renseigné-->
function verification_nomrue(){
	if(document.getElementById('nom_de_rue').value == ""){
		alert ('La saisie du nom de rue est obligatoire!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
<!--Fonction verifiant si le code postal a été renseigné-->
function verification_code_postal(){
	if(document.getElementById('code_postal').value == ""){
		alert ('La saisie du code postal est obligatoire!!!!');
		return false;
	}
	else{
		if(document.getElementById('code_postal').value<10000 || document.getElementById('code_postal').value > 95999)
		{
			alert ('Le code postal saisi n\'existe pas en france metropolitaine!!!!');
			document.getElementById('code_postal').value=='';
			document.getElementById('code_postal').focus();
			return false;
		}
		else
		{
		return true;
		}
	}
}
 
<!--Fonction verifiant si la ville a été renseigné-->
function verification_ville(){
	if(document.getElementById('ville').value == ""){
		alert ('La saisie de la ville est obligatoire!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
<!--Fonction verifiant si l'email a été renseigné corectement-->
function verification_mail(){
	if(document.getElementById('mail').value == ""){
		return true;
	}
	else{
		if (((document.getElementById('mail').value).indexOf('@',0)==-1) || (email.indexOf('.',0)==-1)) {
		// l'adresse entrée est incorrecte
			alert("adresse email incorrecte")
			return false;
		}
		else
		{
		// l'adresse est correcte
		return true;
		}		
	}
}
 
/*Fonction qui ne permettra que la saisie de chiffres dans un input*/
function chiffres(objInput){
   var reg = /^[0-9]*$/;
 
   if(!reg.test(objInput.value)){
      objInput.value = objInput.value.substring(0,objInput.value.length-1);
   }
}
 
/*Fonction qui ne permettra que la saisie de chiffres er lettres dans un input*/
function chiffreslettres(objInput){
   var reg = /^[0-9a-zA-Z]*$/;
 
   if(!reg.test(objInput.value)){
      objInput.value = objInput.value.substring(0,objInput.value.length-1);
   }
}
 
<!--Fonction verifiant si le pseudonyme a été renseigné-->
function verification_pseudo(){
	if(document.getElementById('pseudo').value == "" || document.getElementById('pseudo').value.length<3){
		alert ('La saisie du pseudo est obligatoire et doit comporter au moins 3 caracteres!!!!');
		return false;
	}
	else{
		return true;
	}
}
 
 
<!--Fonction verifiant si le mot de pass a été renseigné-->
function verification_pass(){
	if(document.getElementById('pass').value == "" || document.getElementById('pass').value.length<6){
		alert ('La saisie du mot de pass est obligatoire et doit comporter au moins 6 caracteres!!!!');
		return false;
	}
	else{
		return true;
	}
}
</script>

Apres tu les appele dans les formulaires comme suit:

Code html :

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
43
44
 
<body onLoad="javascript:focus_on_load();">
 
<h1>Enregistrement d'un nouveau membre:</h1>
 
<form action="Action_enregistrement_nouveau_membre_confirmation.php" method="post" onSubmit="return verifications();">
 
NOM<sup>*</sup>:  <input type="text" name="nom" id="nom"/> <br/>
 
PRENOM<sup>*</sup>:  <input type="text" name="prenom" id="prenom"/><br/>
 
DATE DE NAISSANCE<sup>*</sup>: 
<input type="text" name="Jour" value="JJ" onfocus="javascript:if(this.value=='JJ')this.value=''; " title="Jour" maxlength="2" id="Jour" onblur="if(this.value.length==0){this.value='JJ'}" onkeypress="javascript:Autotab('Mois', 2 , this.value);" onkeyup="chiffres(this)" onkeydown="chiffres(this)"/>
<input type="text" name="Mois" value="MM" onfocus="javascript:if(this.value=='MM')this.value=''; " title="Mois" maxlength="2" id="Mois" onblur="if(this.value.length==0){this.value='MM'}" onkeypress="javascript:Autotab('Annee', 2 , this.value);" onkeyup="chiffres(this)" onkeydown="chiffres(this)"/>
<input type="text" name="Annee" value="AAAA" onfocus="javascript:if(this.value=='AAAA')this.value=''; " title="Annee" maxlength="4" id="Annee" onblur="if(this.value.length==0){this.value='AAAA'}" onkeyup="chiffres(this)" onkeydown="chiffres(this)"/>
<br/>
 
ADRESSE: <br/>
N° DE RUE<sup>*</sup>: <input type="text" name="numero_rue" id="numero"/><br/>
 
NOM DE RUE<sup>*</sup>: <input type="text" name="nom_de_rue" id="nom_de_rue"/><br/>
 
CODE POSTAL<sup>*</sup>: <input type="text" name="code_postal" id="code_postal" maxlength="5" onkeyup="chiffres(this)" onkeydown="chiffres(this)"/><br/>
 
VILLE<sup>*</sup>: <input type="text" name="ville" id="ville"/><br/>
 
EMAIL: <input type="text" name="mail" id="mail" maxlength="30"/> <br/>
 
FAMILLE: <input type="text" name="famille" id="famille" maxlength="6" onkeyup="chiffres(this)" onkeydown="chiffres(this)"/><br/>
 
PSEUDONYME<sup>*</sup>: <input type="text" name="pseudo" id="pseudo" maxlength="30" onkeyup="chiffreslettres(this)" onkeydown="chiffreslettres(this)"/><br/>
 
MOT DE PASS<sup>*</sup>: <input type="password" name="pass" id="pass" maxlength="10"onkeyup="chiffreslettres(this)" onkeydown="chiffreslettres(this)"/><br/>
 
<!--Bouton de validation du formulaire -->
<input type="submit" value="Valider" id="valider"/>
<br/>
<br/>
</form>
<br/>
<br/>
<br/>
<h4 id="adroite">Les champs suivis par un <sup>*</sup> sont oblogatoire </h4>
</body>

Voila

have fun

29/11/2011, 10h45	#2
EIN-LESER Membre éclairé Sebastian Développeur Web Inscription : mai 2008 Messages : 380 Détails du profil Informations personnelles : Nom : Sebastian Âge : 35 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2008 Messages : 380 Points : 318 Points : 318	Pour commencer il faudrait placer toutes tes if else dans ta function verification. Ensuite tu place l'appel a ta function dans la balise de ton formulaire pour l’exécuter a la validation. Personellement je prefere avoir une function par champ a verifier ce qui permets de vérifier que personne ne saisit quelque-chose de non approprié dans une case comme des chiffres quand on attends des lettres par exemple mais bon ^^ Mais si tu dois te servir de PHP et javascript il serait bien d'en apprendre au moins les fondements sinon tu t'en sortiras pas Courage __________________ Spécialiste des questions bêtes L'urgent est fait, l’impossible est en cour, pour les miracles prévoir un délai Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour
	00

30/11/2011, 09h08	#5
EIN-LESER Membre éclairé Sebastian Développeur Web Inscription : mai 2008 Messages : 380 Détails du profil Informations personnelles : Nom : Sebastian Âge : 35 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2008 Messages : 380 Points : 318 Points : 318	Écoute bovino il est généralement de très bon conseil. Pour commencer télécharge et installe un easyphp. Il est gratuit et en + il te fourniras ton serveur php et un serveur mysql (que tu t'en serve ou pas) Il existe de tutoriels très bien pour les débutants qui sont très accessibles. Jette y un coup deuil. Je veux bien te filer un exemple de l’utilisation d'un formulaire avec verif mais si tu y comprends rien cela risque de pas t'aider beaucoup __________________ Spécialiste des questions bêtes L'urgent est fait, l’impossible est en cour, pour les miracles prévoir un délai Si une reponse vous plait ou vous a aidé n'hesitez pas a voter pour
	00

29/11/2011, 18h33	#3
meunier_anthony Invité de passage Anthony Meunier Infographiste Inscription : novembre 2011 Messages : 5 Détails du profil Informations personnelles : Nom : Anthony Meunier Localisation : France, Vosges (Lorraine) Informations professionnelles : Activité : Infographiste Secteur : Communication - Médias Informations forums : Inscription : novembre 2011 Messages : 5 Points : 0 Points : 0	Oui je pense que tu as raison sur le fait que je devrais commencer à apprendre le php et javascript. Je vais sauter le pas d'ici quelques jours. Il faut que je tente de faire mon formulaire avant car je dois le rendre fonctionnel pour le milieu de semaine prochaine. En fait j'ai compris ce que tu disais. J'ai remis mes if et else dans la fonction vérification. Sinon après quand je suis en local et que je simule un formulaire, je clique sur "envoyer" le navigateur (firefox pour l'éssai), m'ouvre mon code php tout simplement. Est ce normal ? Si je ne rempli pas tout les champs je n'ai aucun message d'erreur non plus. Merci…
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email