Les langages de programmation

Venez apprendre les langages de programmation à votre rythme
 
AccueilGalerieCalendrierFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Cour n°10

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Sprider
Fondateur
Fondateur
avatar

Nombre de messages : 285
Localisation : sur Terre !
Réputation : 9
Date d'inscription : 23/06/2007

MessageSujet: Cour n°10   Lun 29 Nov - 10:38

Les formulaires
Ils constituent un élément important du développement Web, puisqu'ils permettent de pouvoir recueillir certaines informations utiles auprès des visiteurs.

Définir la feuille de formulaire :

La feuille de formulaire remplit deux fonctions. La première consiste à délimiter les éléments constituant le formulaire. Ainsi, le navigateur pourra identifier l'endroit où débute le formulaire et où il prend fin, en repérant les balises <FORM> et </FORM>.
La deuxième fonction consiste à spécifier les paramètres du formulaire que sont le nom, l'action, la méthode d'envoi et le type d'encodage. Tous ces paramètres se juxtaposent à l'intérieur de la balise <FORM>.

Un bon formulaire doit être accessible :

- mise en page simple (p. ex., sur une seule colonne) des contrôles et des zones de saisie;
- Explications ou étiquettes claires (significatives) associées aux zones et aux contrôles;
- Vérification et validation côté serveur de la saisie des données;
- Proposition d'autres méthodes pour communiquer avec une personne-ressource et/ou transmettre de l'information. Balises et attributs : La balise FORM :

possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

Attribut ACTION :

<FORM ACTION="url"...> permet d'indiquer l'URL (de protocole : http, ftp, file, mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsque l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.
Attribut METHOD

L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire.
Il y en a deux :
La méthode GET:
méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ.
On obtient alors une requête adressée au serveur, du genre :http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&....
La méthode POST :
génére une requête HTTP spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST.
l'action MAILTO:
C'est le moyen le plus simple pour faire expédier les informations du formulaire par l'utilisateur.
Il consiste à utiliser automatiquement le courrier électronique.
Il suffit de spécifier l'adresse électronique (e-mail) du destinataire après le nom du protocole MAILTO:
Si le serveur de messagerie est accessible, (si l'utilisateur est bien connecté), le corps du message acheminé contiendra la liste des couples champ1=valeur1. par exemple : <FORM action="mailto:caroca@test.be" method=post enctype="text/plain" NAME="Fiche_inscription">
Les éléments d'un formulaire : Les différents élements d'un formulaire sont à insérer à l'interieur des balises <FORM>...</FORM> 1.- La boîte texte :

La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur. Exemple:

Nom:
code source : <FORM>
Nom:
<br>
<INPUT TYPE="text" NAME="Nom" SIZE="40" MAXLENGTH="40" VALUE="voilà une boîte texte">
</p>
</FORM>

Explication de la syntaxe : INPUT TYPE="text" Cela définit le type de boîte, ici texte en entrée.
NAME="nom idenficateur" Nom de la boîte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.
2.- La boîte mot de passe :
La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. Les caractères tapés sont représentés par des astérisques. Exemple : Entrez votre mot de passe: code source : <FORM>
Entrez votre mot de passe:
<INPUT TYPE="password" NAME="motdepasse" SIZE="20" MAXLENGTH="20">
</FORM> Explication de la syntaxe : INPUT TYPE="password" Cela définit le type de boîte, ici mot de passe en entrée.
NAME="nom idenficateur" Nom de la boîte.
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.
3.- Les cases radio :

Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste. Exemple : dans quel groupe d'âge se trouve le visiteur 16-25 ans
26-35 ans
36-45 ans
46-65 ans
65 ans et plus
code source : <FORM>
<INPUT TYPE="radio" NAME="Groupedage" VALUE="16-25 ans" CHECKED> 16-25 ans<BR>
<INPUT TYPE="radio" NAME="Groupedage" VALUE="26-35 ans"> 26-35 ans<BR>
<INPUT TYPE="radio" NAME="Groupedage" VALUE="36-45 ans"> 36-45 ans<BR>
<INPUT TYPE="radio" NAME="Groupedage" VALUE="46-65 ans"> 46-65 ans<BR>
<INPUT TYPE="radio" NAME="Groupedage" VALUE="65 ans et plus"> 65 ans et plus<BR>
</FORM> Explication de la syntaxe : INPUT TYPE="radio" Cela définit le type de case, ici case radio.
NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est le même mais il peut être différent .
VALUE="valeur" Contenu par défaut ici les tranches d'âge.
CHECKED indique que l'item est sélectionné par défaut au chargement de la page.

4.- Les cases à cocher : Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix. Réalisation
Image
Son
Montage scripte
Multimédia
Théâtre code source : <FORM>
<INPUT TYPE="checkbox" NAME="option1" Value="réalisation">
Réalisation<BR>
<INPUT TYPE="checkbox" NAME="option2" Value="image">
Image<BR>
<INPUT TYPE="checkbox" NAME="option3" Value="son">
Son<BR>
<INPUT TYPE="checkbox" NAME="option4" Value="montage scripte" >
Montage scripte<BR>
<INPUT TYPE="checkbox" NAME="option5" Value="multimédia">
Multimédia<br>
<INPUT TYPE="checkbox" NAME="option6" Value="théâtre">
Théâtre
</FORM> Explication de la syntaxe : INPUT TYPE="radio" Cela définit le type de case, ici case à cocher.
NAME="nom idenficateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut ici les options.
5.- La boîte liste : La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL. Exemple : une liste de livres parmi lesquels l'utilisateur peut choisir:
Apprendre le HTML Créez vos pages pour le Web La bible du flash Le livre sur Director Programmer en Java code source : <FORM>
<SELECT NAME="Livres" SIZE="5" MULTIPLE>
<OPTION VALUE="HTML"> Apprendre le HTML
<OPTION VALUE="DREAMWEAVER" SELECTED> Créez vos pages pour le Web
<OPTION VALUE="FLASH"> La bible du flash
<OPTION VALUE="DIRECTOR"> Le livre sur Director
<OPTION VALUE="JAVA"> Programmer en Java
</SELECT>
</FORM> Explication de la syntaxe :
<SELECT NAME="nom de la liste" SIZE="nombre" MULTIPLE> L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut MULTIPLE, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection.
<OPTION VALUE="Texte à définir par le concepteur"> Les entrées de la liste sont décrites par l'attribut OPTION, VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur" SELECTED> SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.
6.-La boîte liste déroulante :
La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste. exemple : Quel est votre pays d'origine Allemagne Chili Belgique Canada Argentine France Grande-Bretagne Suisse code source : <FORM>
<SELECT NAME="Pays">
<option value="Question" selected>Quel est votre pays d'origine </option>
<option value="Allemagne">Allemagne </option>
<option value="Chili">Chili </option>
<option value="Belgique">Belgique </option>
<option value="Canada">Canada </option>
<option value="Argentine">Argentine </option>
<option value="France">France </option>
<option value="Grande-Bretagne">Grande-Bretagne </option>
<option value="Suisse">Suisse </option>
</SELECT>
</FORM>
Explication de la syntaxe : NAME= nom de la liste
<OPTION VALUE="Texte à définir par le concepteur"> Les entrées de la liste sont décrites par l'attribut OPTION, VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur" SELECTED> SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.
7.- La boîte texte multilignes : La boîte texte multilignes, à l'instar de la boîte texte, permet à l'utilisateur d'inscrire plus d'une ligne de texte. exemple : Donnez-nous vos commentaires:
Veuillez écrire ici... code source : <FORM>
Donnez-nous vos commentaires:<BR>
<TEXTAREA NAME="Commentaires" COLS=30 ROWS=5 WRAP=virtual>
Veuillez écrire ici...
</TEXTAREA>
</FORM> Explication de la syntaxe :
NAME="nom identificateur"
COLS=nb colonnes .
ROWS=nb rangées.
WRAP détermine la façon dont les lignes sont traitées lors d'un changement de ligne. La liste ci-dessous donne une description des différentes possibilités :
- OFF : aucun changement de ligne.
- VIRTUAL :les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.
- PHYSICAL : les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.

8.- Les boutons envoyer et recommencer : Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup. code source : <FORM> ICI tous les élements de votre formulaire, cases à cocher, boîte de texte, boutons radio ... <INPUT TYPE="submit" VALUE="Envoyer">
<INPUT TYPE="reset" VALUE="Recommencer">
</FORM> Le bouton Envoyer est celui dont l'attribut TYPE est submit, tandis que le bouton Recommencer est reset.
9.- Exemple complet : Nom : Prénom :

Mot de passe :
- Vous êtes à l' IAD au :

Type long Type court Théâtre (Type long) - Quelle est votre discipline préférée ?

acoustique Informatique Histoire du cinéma Mathématiques Anglais Ecriture de scénario Histoire de l'art sociologie - Vous voulez des renseignements sur les options :

Réalisation
Image
Son
Montage scripte
Multimédia
Théâtre
Ecrivez ci-dessous le sujet de votre demande de renseignements :

Voici ma demande concernant... <table border="0" width="100%"> <tr> <td align="left" height="39" valign="top" width="50%">
Envoyer les informations </td> <td align="left" valign="top" width="50%">
Pour récommencer</td> </tr> </table>
code source : <FORM action="mailto:caroca@test.be" method=post enctype="text/plain" NAME="Fiche_inscription">
<strong><font color="#996600">Nom :</font></strong>
<INPUT TYPE ="text" NAME="Nom" VALUE="" >
<strong><font color="#996600">Prénom :</font></strong>
<INPUT TYPE ="text" NAME="Prenom" VALUE="" >
<strong><font color="#996600"><br><br>Mot de passe :</font></strong>
<INPUT TYPE="password" NAME="Pass" SIZE=5>
<p> - Vous êtes à l' IAD au :<br>
<br><INPUT TYPE="radio" NAME="option" VALUE="Type long" checked>
Type long
<INPUT TYPE="radio" NAME="option" VALUE="Type court">
Type court
<INPUT TYPE="radio" NAME="option" VALUE="Théâtre">
Théâtre (Type long)</p>
<p> - Quelle est votre discipline préférée ?<br>
<br>
<SELECT NAME="disciplines" MULTIPLE SIZE=3>
<OPTION>acoustique
<OPTION SELECTED>Informatique
<OPTION>Histoire du cinéma
<OPTION>Mathématiques
<OPTION>Anglais
<OPTION>Ecriture de scénario
<OPTION>Histoire de l'art
<OPTION>sociologie
</SELECT>
</p>
<p> - Vous voulez des renseignements sur les options :<br>
<BR>
<INPUT TYPE="checkbox" NAME="réalisation" >
<strong><font color="#996600">Réalisation</font></strong><BR>
<INPUT TYPE="checkbox" NAME="image">
<strong><font color="#996600">Image</font></strong><BR>
<INPUT TYPE="checkbox" NAME="son">
<strong><font color="#996600"> Son<BR>
<INPUT TYPE="checkbox" NAME="montage scripte">
Montage scripte<BR>
<INPUT TYPE="checkbox" NAME="multimédia">
Multimédia<br>
<INPUT TYPE="checkbox" NAME="théâtre">
Théâtre</font></strong> </p>
<p> <strong><font color="#990000">Ecrivez ci-dessous le sujet de votre
demande de renseignements :</font></strong><br>
<BR>
<TEXTAREA NAME="demande" ROWS=8 COLS=55>
Voici ma demande concernant...
</TEXTAREA>
</p>
<table width="100%" border="0">
<tr>
<td width="50%" height="39" align="left" valign="top"><input name="SUBMIT" type="SUBMIT" value="Envoyer" >
<br>
<font size="1">Envoyer les informations </font></td>
<td width="50%" align="left" valign="top"><input name="RESET" type="RESET" value="Effacer">
<br>
<font size="1">Pour récommencer</font></td>
</tr>
</table>
</FORM >

et voila , techniquement vous maitriser le HTML Félicitation !!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://rider.keuf.net
 
Cour n°10
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» A LIRE : Info pratique pour les debutants
» Etudiant demande aide en fortran
» Problème sur l'arret en cours
» Ma cuisine en cour de réalisation
» message "initialisation en cours sur la télé, affichage BBOX sur le boitier

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Les langages de programmation :: Les Cours de Programmation :: Cours de HTML-
Sauter vers: