LES COMPOSANTS DU FORMULAIRE

Transcription

1 LES COMPOSANTS DU FORMULAIRE Nous allons répertorier les différents éléments graphiques disponibles en HTML4 : des boîtes de saisie de texte : <input type="text" /> des boîtes de saisie masquant le texte (password) : <input type="password" /> des cases à cocher : <input type="checkbox" /> des boutons radio : <input type="radio" /> un sélecteur de fichier : <input type="file" /> des listes de choix : <select> <option></option> </select> des champs de saisie : <textarea> </textarea> ces éléments qui correspondent à des balises spécifiques ont un comportement inlineblock. L'élément <fieldset> permet un regroupement de champs de saisie en catégories logiques ( thématiques ). L'élément <label> permet de donner un intitulé à un champ de formulaire, son utilisation permet aux navigateurs d'associer cet intitulé au champ de formulaire. Ainsi, un clic sur l'intitulé donnera le focus au champs de formulaire, ce qui est très pratique par exemple pour les boutons radio ou cases à cocher parfois trop petites. <label for="frm_nom">votre Nom * :</label> <input type="text" value="" name="nom" id="frm_nom" /> pour que le label soit explicite, il faut utiliser les attributs for (sur l'élément label) et id (sur le champ de formulaire) avec la même valeur. l'attribut name des champs de formulaire possède un rôle différent, il permettra de recueillir la valeur du champ après validation du formulaire, par exemple en PHP. On peut tout à fait utiliser la même valeur pour les attributs id et name d'un élément input, select ou textarea. Attention les labels ne doivent pas être utilisés pour les éléments input de type submit, reset ou image, ou encore pour les éléments button.

2

3

4 LA BALISE FORMULAIRE <form></form> : balise block <form method="post" name="formcontact" id="formcontact" action="traitement.php"> Les attributs : action="traitement.php" / action="mailto:test@mail.com" Cet attribut est obligatoire puisqu'il désigne le fichier chargé de traiter les infos récoltées, côté serveur. La valeur mailto: provoque l'envoi des données (noms+valeurs) par mail. method="post" cela détermine la méthode d'envoi des données vers le serveur. Deux valeurs possibles : get ou post. Le post est plus souvent utilisé car plus secure... name="formcontact" permet d'identifier le formulaire pour accéder à ses composants. enctype encodage des valeurs envoyées au serveur, par défaut : application/x-www-formurlencoded, si on souhaite envoyer un fichier (c.f. input type="file") il faut donner comme encodage multipart/form-data si la valeur de l'attribut action est un "mailto" l'encodage devra être "text/html". autocomplete permet l'autocomplétion, c'est à dire la saisie automatique de champs déjà remplis précédemment autocomplete="on".

5 LES BALISES INPUT

6

7 INPUT SUITE Données cachées : type="hidden" <input type="hidden" name="label" value="texte"> Envoi de données supplémentaires non affichées. Sélecteur de fichier : type="file" Envoi d'un fichier du client vers le serveur. <input type="file" name="fichier" value=""> Rappel : le type d'encodage du formulaire doit ètre : multipart/form-data.

8 SELECT : LISTE DE CHOIX

9 Exos - Créez un dossier formulaire et créez un fichier formulaire.html - Créez une structure HTML simple qui accueillera vos réponses textes ainsi que vos différents formulaires dans des espaces distincts. 1/ Exo 1 : quizz - L'attribut action de la balise <form> est-il obligatoire et quel est son rôle? - De quelle nature est la balise <form>? - Quelles sont les différentes applications qui correspondent aux valeurs de l'attribut enctype? - Avec quelles balises peut on créer des champs de saisie de texte? - Quelles sont les fonctionnalités des balises fieldset, legend et label? 2/ Exo 2 : création formulaire - Créez un formulaire d'un seul groupe nommé "accès backoffice" - Champs de saisie nom avec un maximum de 25 caractères. - Champs de saisie password avec un maximum de 8 caractères. - Champs de saisie mail avec un maximum de 40 caractères. - Ces champs de saisie doivent être uniforme en taille quant à l'affichage. - Créez des boutons de réinitialisation et d'envoi. 3/ Exo 3 : création formulaire - Créez un formulaire d'un seul groupe nommé "Laissez votre message" - Champs de saisie nom avec un maximum de 25 caractères. - Champs de saisie tel avec un maximum de 10 caractères. - Champs de saisie texte de 15 lignes et une largeur de 80 caractères. - Créez des boutons de réinitialisation et d'envoi. 4/ Exo 4 : création formulaire - Créez deux groupes de boutons radio avec une série de choix unique chacun. - Vous avez le choix dans l'écriture des légendes et labels de vos deux séries, intégrez au moins trois choix. - Créez des boutons de réinitialisation et d'envoi. 5/ Exo 5 : création formulaire - Créez un formulaire de recrutement pour un intégrateur comprenant les cases à cocher HTML5, CSS3, JQuery, PHP5, MySql, Javascript pour la sélection des langages maitrisés.

10 - Champs de saisie : Nom / Prénom / Numéro de téléphone / Date de naissance / / Message - Créez une liste de sélection de fourchette salariale (3 choix de fourchette) - Donner la possibilité d'envoyer un CV - Créez des boutons de réinitialisation et d'envoi.