HTML Création et mise en page de formulaire Cours 3

Retour sur la semaine dernière Les CSS selecteur { propriété : valeur; propriété : valeur; etc... } Exemples: h1 { color: red }.truc { color: red } #machin { color: red } Les balises div et span

Aujourd’hui Les formulaires et les CSS Pour mettre son site en ligne Filezilla

Les formulaires

Le formulaire Le formulaire HTML va vous permettre de récupérer des informations que va saisir l'internaute sur votre site. Il permet aussi de passer des données au serveur.

Le formulaire Une fois les informations entrées, l'internaute va l’envoyer en cliquant sur un bouton. Il transmet ses informations à une adresse (mailto) un CGI (Common Gateway Interface) une page web

Le formulaire Un serveur HTTP utilisant une interface CGI exécute un programme puis retourne le contenu généré, comme s'il s'agissait d'un contenu de fichier.

Le formulaire L'internaute va saisir ses informations soit en remplissant des champs texte (input). une liste déroulante (select). une case à cocher (radio, checkbox).

Formulaire Un formulaire HTML se définit par la balise Elle contient des attributs indispensables. action qui définit la destination où sont envoyées les donnés: un cgi, une page php ou asp ou un mail (mailto). method qui définit la méthode d'envoi (POST et GET).

Formulaire Exemple

Formulaire Une variable est un contenant dans laquelle on met une valeur (le contenu). Ex: Variable = valeur. La “valeur” est attribuée dans la variable. En HTML, width=“500” signifie que la valeur 500 est attribuée à la variable width.

Formulaire L'attribut name des éléments de votre formulaire est très important. Il deviendra votre nom de variable une fois que votre formulaire est envoyé. L’attribut value (la valeur entrée par l’utilisateur) sera attribué à la variable. Veillez à ce que l’attribut name soit significatif et ne comporte pas d'accent, de virgule, de caractères spéciaux ou d’espace.

Les balises du formulaire

Il existe deux types de boutons. Value correspond au texte affiché sur le bouton. Type définit pour ces deux boutons l'action à exécuter : - reset pour réinitialiser - submit pour envoyer. Rétablir Envoyer

Les balises du formulaire Il existe deux types de champs de texte le champ simple d'une ligne le champ multi-lignes.

Les balises du formulaire Champ simple type définit la forme de la balise, donc pour une zone de texte simple c'est "text". name est très important puisque c’est associé au nom de la variable. value définit le texte mis au départ dans le champ. size correspond à la largeur du champ.

Les balises du formulaire Champ multi-lignes cols correspond à la largeur du champ. rows correspond à la hauteur du champ (le nombre de ligne). name est le nom de la variable Vous pouvez mettre une valeur par defaut à l’intérieur de la balise.

Les balises du formulaire La case à cocher permet de faire plusieurs choix sur un ensemble de propositions. Le bouton radio permet de faire un choix sur un ensemble de propositions.

Les balises du formulaire La case à cocher Type définit la forme de la balise, pour une case a cocher, c'est "checkbox". Name est le nom de la variable. Value retournera la valeur dans la variable si la case est cochée.

Les balises du formulaire Les boutons radio Type définit la forme de la balise, pour un bouton radio, c'est "radio". Name. Les boutons radio du même groupe auront la même valeur. Value c'est la valeur de la sélection.

Les balises du formulaire Les menus déroulant Name est le nom de la variable. Size détermine le nombre d'options visibles. Multiple signifie que l'on peut faire plusieurs sélections avec la touche ctrl enfoncée. La balise correspond à un élément de la liste. Vous pouvez en avoir un nombre illimité. Value est la valeur renvoyée dans la variable selon l’option sélectionnée. Premier_choix Deuxième_choix

En résumé Pour faire un formulaire il vous faut les ingrédients suivants: 1. La balise correctement configurée 2. Un ou plusieurs éléments (,, etc). 3. Un piton d’envoi

Laboratoire Faire un formulaire avec Un bouton radio fonctionnel avec les choix oui et non Deux champs simples pour le nom et le prénom Un bouton pour envoyer le résulat par courriel à l’adresse

Résultat par courriel Le résultat de l'envoi en mode mailto, par courriel, ne peut pas être mis en forme si facilement. Il s’affiche de façon légèrement indigeste. Exemple : nom=Caron&prenom=Roger De plus, vous devez avoir un engin d’envoi de courriel correctement configuré sur votre poste, ce qui n’est pas toujours le cas (comme dans le cas de vos ordinateurs en ce moment même).

Les labels On utilise la balise pour assigner des étiquettes sur les divers éléments du formulaire. Ou Prénom

Les balises FIELDSET et LEGEND Très utiles avec les css La balise FIELDSET permet aux auteurs de regrouper thématiquement les commandes et les labels apparentés. Pas obligatoire mais permet une meilleure usabilité et accessibilité. La balise LEGEND permet aux auteurs d'assigner une description à un élément FIELDSET.

Les balises FIELDSET et LEGEND Personne Nom: courriel: Date :

La navigation par tabulation L’attribut tabindex définit l'ordre dans lequel les éléments vont recevoir l'attention lorsque l'utilisateur navigue avec le clavier (touche tab). Pas obligatoire.

CSS

Principales balises pouvant être modifiées –form –fieldset –legend –label –input –select –option –textarea

CSS Il est possible d’ajouter des filtres permettant d’appliquer des règles de style CSS en des situations plus spécifiques. Exemples de sélecteurs input[type=radio] input[type=submit] input[type=reset]:hover Exemple: input[type=radio] { margin: 3px }

CSS Exemple: form { border: solid 5px; } test

Pour publier votre site web

Un espace web sur un serveur (Un hébergement) Une adresse URL (un nom de domaine) Un logiciel FTP (File Transfert Protocol) pour placer les fichier de votre ordinateur vers le site web.

Pour publier votre site web FileZilla

Laboratoire Faire le laboratoire 1.Reproduisez le formulaire 2.Une fois validé par le prof, modifiez son apparence avec les CSS.