LeCompagnon.info

Internet

Internet: Les formulaires sur le Web

Avant de commencer
Introduction
Les éléments d'un formulaire

Le sondage

Avant de commencer

Le contenu sur le World Wide Web est maintenant divisé en plusieurs pages. La page d'introduction au World Wide Web contient une introduction et une description des éléments que l'on retrouve sur les pages Web et les sites Web. Il y a aussi une page contenant des conseils pour la conception de pages Web, la promotion du site et la publication. Les pages suivantes sont pour la conception de pages Web en utilisant Netscape Composer, Microsoft Word ou Microsoft FrontPage. Il y a beaucoup de petits conseils qui sont inclus sur ces pages. La prochaine page contient une description des éléments que l'on retrouve dans un formulaire d'une page Web (cette page) ainsi que ses avantages et ses limitations. Pour terminer, il y a une page qui contient les codes HTML que l'on retrouve sur toutes les pages du Web. En comprenant leur fonctionnement, vous pourrez composer de meilleures pages Web.

Cette page est pour vous démontrer qu'il est possible d'avoir de l'information sur les utilisateurs d'un site grâce aux formulaires. Ceci est un petit exemple de ce qui est possible d'accomplir.

Internet
La nétiquette
Courrier électronique
Courrier électronique (avec Netscape)
FTP (File Transfer Protocol)
Les newsgroups
Internet Relay Chat (IRC)
World Wide Web (WWW ou W3)
Conseils pour la conception de pages Web
Conception de page Web avec FrontPage
Conception de page Web avec Netscape Composer
Conception de page Web avec Word
Les formulaires
Les codes HTML
Les images animées
Autres formations

Word 2003
Word 2007
Excel
Excel 2007/2010/2013
VBA pour Excel
PowerPoint 2003
PowerPoint 2007
Access
Access 2010
Internet
Général
Intelligence financière
Vidéos

Navigation
Précédent
Suivant
Page Principale
FAQ
Nouveautés
Plan du site
Références
Motivations
Manuels de formation
Fichiers de démonstration
Droits d'auteur
Text in English
Nous rejoindre
Par courriel
Abonnez-vous à
l'infolettre LCI
Partager






Abonnez-vous à l'infolettre LeCompagnon.info

201 fonctions pour les pressés









Introduction

Il y a un code HTML qui permet de créer un lien sur une adresse de courrier électronique. Le seul problème avec cette commande est que l'utilisateur doit avoir auparavant fourni de l'information au fureteur qu'il utilise. Il doit fournir son nom, son adresse de courrier électronique, le nom du serveur qu'il utilise et possiblement le mot de passe pour se connecter à son compte de courrier électronique. Il y a des occasions où l'utilisateur accède à un site à partir d'un autre poste auquel il n'a pas entré ces informations. Donc, il ne peut pas rejoindre la personne qui a mis un lien sur une page Web. C'est pour cette raison que vous devriez toujours écrire l'adresse avec le lien. Par exemple, pour me rejoindre, vous pouvez cliquer sur le lien lecompagnon@lecompagnon.info. Vous pouvez aussi écrire sur un bout de papier l'adresse et contacter la personne plus tard.

L'autre manière de transmettre de l'information à travers une page Web est un formulaire. C'est une série d'instructions HTML qui permettent de communiquer sans avoir une adresse de courrier électronique. Ces instructions seront expliquées en plus de détails sur cette page.

Les éléments d'un formulaire

Les informations fournies par la personne qui rempli le formulaire sont conservées dans des variables. Il y a plusieurs types de variables, ou des "input" en anglais, dans le code HTML pour répondre à différents besoins. La partie qui suit vous donne une liste de ces variables ainsi qu'une courte description. Il y a aussi le code HTML et les options de chacune d'elle.

Zone de texte image de zone de texte

Variable dans laquelle vous pouvez entrer du texte. Vous devez déterminer la largeur en spécifiant le maximum de caractères pouvant entrer dans la variable.

<INPUT Type="text" Name="Nom de la variable. À votre choix" Size="Nombre de caractères affichées de la variable. Ex.: 50" Maxlenght="Taille maximale de caractères">

Type="text" Type de variable texte.
Name="À votre choix" Donnez un nom qui représente son contenu.
Size="Chiffre qui représente la longueur de la variable" Optionnel. Détermine la longueur de la variable affiché à l'écran.
Maxlenght="Chiffre qui représente le contenu maximum de la variable." Optionnel. Permet de déterminer la taille maximale de caractères que peut contenir la variable.

Zone de texte pour les mots de passe image d'une zone de texte pour mot de passe

Ceci est une variante de la zone de texte. Elle couvre le texte par des astérisques ( * ). Donc, le contenu est caché à l'écran. Elle a été conçue pour des mots de passe.

< INPUT Type="password" Name="Nom de la variable. À votre choix" Size="Nombre de caractères affichés de la variable." Maxlenght="Taille maximale de caractères">

Type="Password" Type de variable pour des mots de passe.
Name="À votre choix" Donnez un nom qui représente son contenu.
Size="Chiffre qui représente la longueur de la variable" Optionnel. Détermine la longueur de la variable affiché à l'écran.
Maxlenght="Chiffre qui représente le contenu maximum de la variable." Optionnel. Permet de déterminer la taille maximale de caractères que peut contenir la variable.

Zone de texte à lignes multiples (textarea) image zone de texte à ligne multiple

Variable dans laquelle on peut entrer plusieurs lignes de texte. Elle est surtout utilisée pour laisser les lecteurs laisser des commentaires. Vous déterminez le nombre de lignes et le nombre de caractères par ligne.

<INPUT Type="Textarea" Name="Nom de la variable. À votre choix" COLS="Longueur de la variable" ROWS="Nombre de lignes de la variable">

Type="Textarea" Type de variable texte à ligne multiple.
Name="À votre choix" Donnez un nom qui représente son contenu.
COLS="Longeur de la variable" Chiffre qui représente la largeur en nombre de caractères.
ROWS="Nombre de lignes" Chiffre qui représente le nombre de lignes qui sera affiché.

Bouton crochetImage de boutons crochets

Ce bouton est facile à comprendre et à utiliser. Il est idéal pour des situations Oui/Non. Elle indique si l'usager veut, s'accorde, choisi ou non cette option.

<INPUT Type="Checkbox" Name="Nom de la variable. À votre choix" Value="Valeur de votre choix lorsque choisi" Checked="Checked">

Type="Radio" Type de variable bouton radio.
Name="À votre choix" Donnez un nom qui représente son contenu.
Value="Contenu de votre choix" Ceci est la valeur ou le texte qui sera envoyé lorsque l'option est choisie.
Checked="checked" Optionnel. Ceci indique qu'il y a un crochet dans la boîte et donc choisi..

Bouton radioimage de boutons radios

Ce bouton indique si oui ou non l'usager veut cette option. Plusieurs boutons radio peuvent être utilisés pour donner une liste de possibilités à l'usager. Il suffit de donner le même nom à chacun des boutons radio mais une valeur différente. Seulement l'un des boutons peut être choisi à la fois.

<INPUT Type="Radio" Name="Nom de la variable. À votre choix" Value="Valeur de votre choix Checked="checked">

Type="Checkbox" Type de variable bouton à crochet.
Name="À votre choix" Donnez un nom qui représente son contenu.
Value="Contenu de votre choix" Ceci est la valeur ou le texte qui sera envoyé lorsque l'option est choisie.
Checked="checked" Optionnel. Ceci indique que le bouton est choisi. Seulement l'un des boutons peut avoir cette option parmi une sélection.

Liste d'options image de liste d'options

Comme pour un bouton radio, la liste d'options est utilisée lorsque l'usager doit choisir parmi plusieurs possibilités. Elle est encore plus avantageuse à l'utiliser pour de longues listes d'options; pour une liste de pays par exemple.

<SELECT Name="Nom de la variable. À votre choix">
<Option Value="Valeur de votre choix" Selected="selected"> Texte de votre choix </Option>
<Option Value="Autre valeur de votre choix"> Autre texte de votre choix </Option>
...
</Select>

<Select> </Select> Type de variable liste de choix.
<Option> </Option> Désigne l'une des sélections de la liste.
Value="Valeur de votre choix" Ceci est la valeur qui sera envoyé si la sélection est choisie.
Selected="Selected" Optionnel. Ceci désigne la sélection qui est choisi au départ. L'usager peut toujours la changer à une sélection qui répond mieux à ses besoins.

Autre liste d'options Image d'une liste d'option

Ceci est un autre genre de liste d'options qui permet à l'usager de voir plusieurs possibilités à la fois. Cependant, il peut seulement en choisir un.

<SELECT Name="Nom de la variable. À votre choix" Multiple="multiple" Size="Nombre de lignes visibles">
<Option Value="Valeur de votre choix" Selected="selected"> Texte de votre choix </Option>
<Option Value="Autre valeur de votre choix"> Autre texte de votre choix </Option>
...
</Select>

<Select> </Select> Type de variable liste de choix.
Multiple="multiple" Indique une liste d'options démontrant plusieurs possibilités. à la fois.
Size="Nombre de lignes visibles" Chiffre qui indique le nombre de lignes qui seront visibles à l'écran.
<Option> </Option> Désigne l'une des sélections de la liste.
Value="Valeur de votre choix" Ceci est la valeur qui sera envoyé si la sélection est choisie.
Selected="Selected" Optionnel. Ceci désigne la sélection qui est choisi au départ. L'usager peut toujours la changer à une sélection qui répond mieux à ses besoins.

Variable cachée (hidden)

Information nécessaire pour le concepteur de la page ou pour les scripts CGI mais pour les lecteurs de la page Web. Donc, ces informations sont cachées de la vue des lecteurs.

<INPUT Type="Hidden" Name="Nom de la variable. À votre choix" Value="Valeur de votre choix">

Bouton pour transmettreImage d'un bouton pour transmettre le contenu du formulaire

Ce bouton transfert le contenu des variables à l'adresse de courrier électronique déterminée.

<INPUT Type="Submit" Name="Nom de la variable. À votre choix" Value="Texte écrit sur le bouton">

Bouton pour vider le contenu des cellulesImage d'un bouton pour vider le contenu d'un formulaire

Ce bouton vide le contenu des variables. Ceci permet de recommencer l'entrée de données.

<INPUT Type="Reset" Name="Nom de la variable. À votre choix" Value="Texte écrit sur le bouton">

Les options de la commande <FORM>

Il ne suffit pas d'avoir juste des variables. Il faut encore savoir à qui envoyer ces données et de quelle façon cette personne veut recevoir l'information.

Les actions: POST et MAILTO.

MAILTO: Le lecteur de la page Web doit auparavant inscrit ses coordonnées dans le fureteur pour que le formulaire fonctionne. il y a cependant une grande limitation à cette technique. Le lecteur de la page Web doit avoir entrer ses coordonnées dans le fureteur (Nom, adresse de courrier électronique, nom du serveur où est situé sa boîte de courrier électronique, nom de la boîte, mot de passe).

POST: Les informations sont envoyées à un "script" PERL ou CGI qui les transfèrent ensuite à une adresse de courrier électronique.

Enctype,?subject=Nom de la ligne du sujet du message

Les scripts CGI

Ces scripts, de la programmation généralement en langage PERL, permettent d'automatiser certaines tâches pour un formulaire. Elle est plus souvent utilisée pour "nettoyer le contenu d'un formulaire". Lorsque le contenu d'un formulaire est envoyé, variables et contenu sont collés ensemble. De plus, les espaces sont remplacés par un "+". Ceci rend la lecture du formulaire difficile sans l'utilisation d'un script. Les scripts sont aussi utilisés pour valider le contenu des variables. Par exemple, pour s'assurer que certaines variables obligatoires ne soient pas vides.

Le sondage

S.V.P., prenez quelques instants pour remplir ce formulaire. Merci à l'avance.

Quel est votre niveau de scolarité actuel?

Environ combien d'années d'expériences avez-vous en informatique?
ans

Possédez-vous un ordinateur à la maison?
Oui Non

Si oui, depuis combien d'années avez-vous un ordinateur?
ans

Quelles sont vos connaissances en informatique dans ces catégories ?

Traitement de texte Internet
Chiffrier Réseaux
Logiciel de présentation Matériel (hardware)
Base de données

Quelle est votre adresse de courrier électronique (courriel)?

Avez-vous des commentaires constructifs à apporter au sujet de ce site?



 

Vous avez apprécié cette page?

Dîtes que vous l'aimez en utilisant le bouton Facebook, Twitter ou l'un des autres services sous le bouton "Share".

Cliquez sur le bouton de votre choix

Abonnez-vous à l'infolettre

Abonnez-vous à l'infolettre du site pour recevoir le manuel " 150 fonctions Excel expliquées ". Vous recevrez aussi les prochaines infolettres sur les nouveautés du site et des formations détaillées que vous ne trouverez nulle part ailleurs.



Cliquez ici pour vous abonner à l'infolettre





Ce site est hébergé par 1&1.com