Créer un formulaire web

1- Créer un formulaire web avec Dreamweaver
2- Créer un formulaire avec n'importe quel éditeur de pages web

Créer un formulaire avec Dreamweaver

Cette tutoriel va vous montrer comment créer un formulaire dans Dreamweaver.

Dans cette section, nous allons prendre notre premier aperçu des formulaires dans Dreamweaver.

Nous utilisons tous les formulaires sur les sites Web pour toutes sortes de raisons: pour faire des achats en ligne, pour s'enregistrer dans un site, pour envoyer un message ou pour participer à un sondage ou autres.... Nous entrons les données demandées dans les formulaires, puis les données sont stockées dans une base de données, ou transmise ailleurs et souvent envoyées de nouveau à nous pour vérifier.

Regardons comment nous pouvons créer un formulaire dans Dreamweaver.

A partir d'une page blanche, nous allons insérer un formulaire vide. Cliquez sur le menu Insertion, puis placez le curseur sur le formulaire. Vous voyez le menu flottant Insertion.

Insertion formulaire

A cette occasion, nous sélectionnons Formulaire puis Formulaire et une boîte en pointillé vide apparaît.

Insérer formulaire

Regardez le panneau Propriétés du formulaire sélectionné.

Tout d'abord, nous allons donner un nom au formulaire. Pour cet exercice, nous allons créer un formulaire pour saisir une commande pour les fleurs. Nous allons appeler le FormulaireFleurs1.

La boîte d'action précisera la page ou le script qui traite les données que nous entrons dans le formulaire. Nous ne les avons pas encore, nous allons donc le laisser vide pour le moment.

Maintenant, penchons-nous sur la méthode.

Méthode envoi formulaire

Le procédé se rapporte à la technique que le navigateur utilise pour envoyer les données du formulaire au serveur.

Les méthode GET: Obtenir les données à l'URL qui demande la page.
La méthode POST intègre les données du formulaire dans la requête HTTP.
Pour l'instant, nous nous en tiendrons à la valeur Par défaut. La valeur par défaut est généralement la méthode GET.

Nous n'avons pas besoin de s'inquiéter au sujet des autres propriétés pour le moment.

Donc, nous avons maintenant enregistrer le formulaire avec le nom en utilisant FormulaireFleurs1.html dans Fichier Enregistrer sous.

En termes généraux, l'approche de la création de formulaires est de créer d'abord le formulaire vide et de lui affecter certaines de ses propriétés, puis d'insérer les différents champs dans le formulaire. C'est à peu près l'approche que nous utilisons ici.

Cependant, il est très important de réaliser que le formulaire doit être conçu avec soin avant de commencer à le construire à l'aide de Dreamweaver. Une conception négligente et un manque de pensée signifiera probablement que votre formulaire ne fera pas le travail, et probablement ne sera pas utilisé. Combien de fois avez-vous utilisé un formulaire en ligne et êtes vraiment frustré et irrité par la façon dont il était difficile à l'utiliser?

Toujours commencer à construire un formulaire avec une disposition claire de travailler à partir de là, et avec tous les détails dont vous allez avoir besoin pour ce que chaque champ du formulaire peut contenir, comment vérifier les interdépendances, etc.

Suivant: Insertion d'objets dans le formulaire >>>

 

2- Créer un formulaire avec n'importe quel éditeur de pages web

Vous pouvez créer un formulaire Web visuellement dans Dreamweaver en insérant des éléments de formulaire dans une page, mais ce n'est qu'une partie de la tâche. L'autre partie, plus complexe est d'élaborer un mécanisme pour traiter les données de vos visiteurs pour soumettre le formulaire. Les données sont parfois enregistrées dans une base de données client, par exemple. En règle générale, la technologie d'application web comme PHP traite les données du formulaire.

Cet article décrit comment créer un simple formulaire Web.

Vous aurez besoin de deux fichiers:

1- La page où va être inséré le code du formulaire; c'est-à-dire la page de saisie des informations demandées par l'utilisateur,
2- La page de traitement de l'envoi du formulaire.

La première page peut être en HTML tandis que la deuxième doit être en PHP.

Le code du formulaire


Prenons un exemple de formulaire de contact simple comme celui-ci:

Pour me contacter, veuillez utiliser le formulaire suivant:
Votre nom :
Votre mail :
Sujet :
Message :
 

Le code à insérer dans la partie code de la page est:

<form action="traitement-contact.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire">
<tr>
<td colspan="3"><strong>Pour me contacter, veuillez utiliser le formulaire suivant:</strong></td>
</tr>
<tr>
<td><div align="left">Votre nom :</div></td>
<td colspan="2"><input type="text" name="nom" size="45" maxlength="100"></td>
</tr>
<tr>
<td width="17%"><div align="left">Votre mail :</div></td>
<td colspan="2"><input name="mail" type="text" value="Entrez une adresse e-mail valide" size="45" maxlength="100"></td>
</tr>
<tr>
<td><div align="left">Sujet : </div></td>
<td colspan="2"><input name="objet" type="text" value="Sujet de votre message" size="45" maxlength="120"></td>
</tr>
<tr>
<td><div align="left">Message : </div></td>
<td colspan="2"><textarea name="message" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td width="42%"><center>
<input type="reset" name="Submit" value="Réinitialiser le formulaire">
</center></td>
<td width="41%"><center>
<input type="submit" name="Submit" value="Envoyer">
</center></td>
</tr>
</form>

En parcourant attentivement les éléments de ce code, vous pouvez découvrir comment le modifier facilement ou en ajouter d'autres parties. Sachez tout de même que si vous y ajouter d'autres champs, il faut les ajouter aussi dans le fichier de traitement.

 

Le code du fichier de traitement du formulaire en PHP

Pour que le informations saisies dans le formulaire par l'utilisateur soit arrivées à bonne destination; c'est-à-dire à vous, il faut créer un autre fichier de traitement. Vous pouvez l'appelez comme vous voulez à condition de spécifier ce nom dans le code du formulaire: form action="traitement-contact.php"
Dans notre cas, c'est: traitement-contact.php
Remplacez donc traitement-contact par un autre nom si vous voulez. ne mettez pas toutefois d'espaces ni de caractères spéciaux (accents, guillemets...).

Dans le fichier de traitement, insérer le code suivant qui va traiter le formulaire et les envoyer à l'adresse e-mail qui va être spécifiée:

<?php
$nom=$HTTP_POST_VARS['nom'];
$mail=$HTTP_POST_VARS['mail'];
$objet=$HTTP_POST_VARS['objet'];
$message=$HTTP_POST_VARS['message'];

/////voici la version Mine
$headers = "MIME-Version: 1.0\r\n";

//////ici on détermine le mail en format text
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";

////ici on détermine l'expéditeur et l'adresse de réponse
$headers .= "From: $nom <$mail>\r\nReply-to : $nom <$mail>\nX-Mailer:PHP";

$subject="$objet";
$destinataire="webmaster@votre-site.com"; //remplacez "webmaster@votre-site.com" par votre adresse e-mail
$body="$message";
if (mail($destinataire,$subject,$body,$headers)) {
echo "Votre mail a été envoyé<br>";
} else {
echo "Une erreur s'est produite";
}
?>

Remplacez: webmaster@votre-site.com par votre adresse e-mail valide où vous recevrez les données contenues dans le formulaire envoyé.
Donc, copiez ce morceau de code dans une page et de préférence une page avec un style semblable aux autres pages de votre site et nommez-là: traitement-contact.php

Mettez les deux fichiers: contact.html et traitement-contact.php dans la racine de votre serveur distant.
Quand l'utilisateur ait entre les informations demandées dans le formulaire et ait appuyé sur le bouton envoyer, les données seront envoyées vers votre boîte e-mail spécifiée et la page traitement-contact s'affiche dans le navigateur de l'utilisateur avec: "Votre mail a été envoyé" si tout se passe bien et au contraire, il verra: "Une erreur s'est produite" au cas d'erreur.

Le formulaire a besoin de la fonction mail activée par le serveur et c'est activée par défaut par tous les hébergeurs de sites à moins que vous ne soyez chez un hébergeur gratuit que certains d'entre eux ne l'activent pas par défaut.

Réglez la présentation du formulaire. Utilisez les sauts de ligne, les sauts de paragraphe, du texte préformaté, ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insérer un formulaire dans un autre formulaire, mais vous pouvez inclure plus d'un formulaire dans une page. Lors de la conception des formulaires, n'oubliez pas d'étiqueter les objets de formulaire avec un texte descriptif pour permettre aux utilisateurs de savoir ce qu'ils répondent. Par exemple, «Tapez votre nom" pour demander des informations nom. Nuse tables pour fournir une structure pour les objets et les étiquettes. Assurez-vous que toutes les balises table sont incluses entre les balises form.

Il s'agit dans l'exemple en haut d'un formulaire simple. Vous pouvez créer des formulaires plus complexe au niveau du style comme au niveau du contenu. Par exemple, vous pouvez ajouter des cases à cocher, des listes où choisir un élément... Vous pouvez aussi ajouter des valeurs par défaut ou un nombre de caractères à respecter ou encore des valeurs obligatoires et d'autres facultatives comme vous pouvez ajouter une aide à la saisie expliquant ce qu'on doit ou peut écrire dans le formulaire.

 

 

   

 

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site