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

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

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

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 L'internaute va saisir ses informations soit en remplissant des champs texte (input). une liste déroulante (select). une case à cocher (radio, checkbox).

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

Formulaire Un formulaire HTML se définit par la balise <form> </form> 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 <form action="mailto:votremail@machin.org" method="post" > </form>

Notion de programmation Une variable est un contenant dans laquelle on met une valeur (le contenu). Ex: Variable = valeur. La “valeur” est attribué dans la variable.

Réception L'attribut name des éléments de votre formulaire est très important. Il deviendra votre nom de variable une fois que votre formulaire sera soumis. 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. <input type="text" name="nom" value="" size="5" />

Effacer et envoyer le 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 <input type="reset" name="nom" value="Rétablir" /> <input type="submit" name="nom" value="Envoyer" /> Envoyer

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

Champ simple Exemple : <input type="text" name="nom" value="" size="5" /> type définit la forme de la balise <input>, 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.

Champ multi-lignes Exemple : <textarea name="nom" cols="30" rows="5"> </textarea> 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.

Cases à cocher et boutons radio 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 cases à cocher Exemple : Type définit la forme de la balise <INPUT>, 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. <input type="checkbox" name="nom" value="Nom_du_choix" />

Les boutons radio Exemple : Type définit la forme de la balise <INPUT>, 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. <input type="radio" name="nom" value="1" /> <input type="radio" name="nom" value="2" /> <input type="radio" name="nom" value="3" />

Les menus déroulant Exemple 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 <OPTION> 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. <select name="Nom_de_la_selection" size="1" multiple="multiple">   <option value="choix1">Premier_choix</option>   <option value="choix2">Deuxième_choix</option> </select>

Résultat par courriel Le résultat de l'envoi en mailto ne peut pas être formatté selon votre choix. 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 <label> pour assigner des étiquettes sur les divers éléments du formulaire. Ou <LABEL for="label_prenom">Prénom</LABEL> <INPUT type="text" name="prenom" id="label_prenom"> <LABEL>Prénom <INPUT type="text" name="prenom" id="label_prenom"> </LABEL>

Les éléments 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.

Exemple <form>   <fieldset>     <legend>Personne</legend>     Nom: <input type="text" size="30" /><br />     courriel: <input type="text" size="30" /><br />     Date : <input type="text" size="10" />   </fieldset> </form>

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. <FORM action="..." method="post"> <INPUT tabindex="1" type="text" name="champs1"> <INPUT tabindex="2" type="text" name="champs2"> <INPUT tabindex="3" type="submit" name="submit"> </FORM>

Le css appliqué au formulaire 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 }

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

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 protocole) pour placer les fichier de votre ordinateur vers le site web.

Logiciel FTP FileZilla : logiciel libre, très fonctionnel.