Cours pdf les formulaires HTML, tutoriel & guide de travaux pratiques en pdf.
Introduction
Les documents HTML ne servent en général qu’à présenter de l’information à l’utilisateur. Rien n’était a priori prévu au départ pour que ce dernier puisse transférer de l’information dans “l’autres sens” (des utilisateurs vers le serveur de documents). Cependant, dès la version HTML 2.0, il existe une technique permettant une communication du client (utilisateur) vers le serveur : le formulaire. Associé à des scripts CGI (Common Gateway Interface), scripts JavaScript ou PHP (Personal Home Page), le formulaire permet une certaine interaction entre l’utilisateur final et le fournisseur de données grâce à des zones de saisie, boutons, etc.
Fonctionnement
Généralités
Un formulaire est défini par les balises <form> et </form>. Deux paramètres doivent en outre être défini à l’ouverture du formulaire (cf. Exemple 1) : action : adresse d’envoi du formulaire method : la méthode de transmission des données (get ou post). La méthode get s’est établie comme un standard mais ne convient pas au transfert de grandes quantités de données : il faut alors utiliser la méthode post.
<html> <head><title>Formulaire 1</title></head> <body> <form action=“mailto :truillet@irit.fr” method=post> Votre nom : <input name=“Nom” size=15> </form> </body> </html>
Exemple 1 : Exemple de formulaire simple
Saisie de données dans le formulaire
Il existe différents types de données que l’utilisateur est amené à saisir dans un formulaire : texte libre sur une ou plusieurs lignes, choix entre différentes options listées, etc.
Zones de saisie monolignes Ce type de zone de saisie est créé grâce à la balise <input>. Chaque zone de saisie doit avoir un nom unique !
<form action=“ http://perso0.free.fr/cgi-bin/form2mail.pl” method=post> Nom :<input name=“nom” size=15 maxlength=20> </form> Exemple 2 : bout de code de zone de saisie monoligne
Les attributs de la balise <input> sont : size : taille de la zone de saisie
maxlength : taille maximale acceptée type : o int : saisie de nombres entiers o float : saisie de nombres décimaux acceptée o date : saisie de dates o url : saisie d’une adresse internet o password : les caractères saisis ne sont pas visibles et sont remplacés par des astérisques.
Zones de saisie multilignes Les zones de saisie multilignes se réalisent à l’aide de la balise <textarea> et se terminent par </textarea>. Là aussi, chaque zone doit avoir un nom unique !
<form action=“ http://perso0.free.fr/cgi-bin/form2mail.pl” method=post> Votre opinion :<textarea name=“opinion” cols=15 rows=20> </form> Exemple 3 : bout de code de zone de saisie multilignes
Les attributs acceptés sont au nombre de deux : cols : nombre de colonnes rows : nombre de lignes
Liste d’options Un élément de liste est défini par la balise <option> (il se termine normalement par </option>).
<form action=“ http://perso0.free.fr/cgi-bin/form2mail.pl” method=post> <select name= »Level »> <option value= »First » selected>1<sup>er</sup> cycle <option value= »Second »>2<sup>ème</sup> cycle <option value= »Third »>3<sup>ème</sup> cycle </select> </form> Exemple 4 : bout de code avec liste d’options
Choix multiples Il est possible de spécifier la possibilité de choix multiples en ajoutant l’attribut multiple dans la balise <select>.
Eléments de liste sélectionnés par défaut Pour un choix sélectionné par défaut, l’attribut selected doit être rajouté dans la balise <option>.
Télécharger le cours complet
