Formes

Tutoriaux, Sommaire Html

1. Définition
     Les formes permettent de bâtir des formulaires de saisies tel que celui ci-dessous. Les données saisies dans ces formulaires peuvent être transmis à un serveur internet ou sur un compte d'e-mail. Dans le cadre du html nous ne traiterons que la transmission par e-mail. Cette étude des formes sera reprise dans le cours de Javascript, celui de Php, de Java, etc.
Identification
Entrez votre prénom

Entrez votre nom

Entrez votre mot de passe

Cochez les cases qui vous concerne
J'aime la musique
J'aime le ciné      
Genre
    Féminin       
    Masculin     
    Ne sait pas  
J'aimerais être,


                                                       

    Exemple de données transmises par cette forme, vous recevriez sur votre e-mail, (à condition d'avoir donné comme adresse celle de votre mail) :
        Prénom=Jean-Pierre
        Nom=Le Pichon
        pass=tutoriaux
        Musique=ON
        Genre=Masculin
        Souhaits=Gontran la chance
    Observations,
        La case Musique à été coché, elle est donc transmise, la case Ciné n'aurait pas été coché, elle n'apparaît pas.
        Si un champ de texte est vide, il est quand même transmis, comme,
            Nom =
2. Structure
    Tous les éléments d'une forme doivent se trouver entre les tags, <form> </form>.
    Dans le tag form on doit trouver,
        l'action qui doit être effectuée quand le formulaire est rempli, ce peut être,
            le lancement d'un programme informatique, Cgi, java, javascript, etc. Nous le traiterons dans d'autres tutoriaux.
            L'envoi des données par e-mail, nous écrirons,
                action="mailto:nom@mail.com"
        la méthode d'envoi des données,
            Get, les données seront ajoutées à l'adresse d'une page internet comme,
                http://server.com/cgi-bin/validation.htm?nom=Duron&prenom=jean.....
                Ce qui explique les très longues adresses que vous pouvez voir sur votre navigateur.
            Post, les données sont expédiés directement, c'est l'action dont nous nous servirons pour un envoi par mail,
            action="nom@mail.com" method="Post"
            enctype="text/plain", indique que les données expédiées doivent être considérées comme du texte.
    Voici donc le squelette d'une forme expédiant les données sur l'e-mail nom@mail.com
    <form action="nom@mail.com" method="Post" enctype="text/plain">
        Eléments de saisies de données...
    </form>
3. Eléments de saisies
    Dans une forme on peut trouver,
        Du texte caractérisant les données à saisir comme, (Votre nom),
   Votre nom    
        Des éléments de texte, permettant  de saisir un texte comme celle ci-dessus.
    Des éléments de mots de passe
        Mot de passe       
        Si vous tapez du texte dans l'élément ci-dessus, il apparaîtra sous forme de *. Attention, ceci a pour but d'éviter que quelqu'un puisse lire par dessus l'épaule de l'internaute le mot de passe mais ne signifie pas que le mot de passe est crypté.
        Des case à cocher, si elles sont cochées elles sont "ON", on peut décider si à l'affichage du formulaire elles sont cochés ou non,
        Exemple,
        Je désire m'abonner
            au News Economiques     à la lettre hebdo     aux offres promotionnelles
        Des boutons radio, ainsi nommés par référence aux appareils de radio où quand vous enfoncez un bouton tous les autres se lèvent. L'idée c'est de grouper un certains nombre de ces boutons pour permettre de choisir une option et une seule.
        Genre,
    Féminin     Masculin     Ne sait pas     Cela n'a aucun sens dans mon système, (ma galaxie)
        Liste déroulante,
        faites un choix,
       

        Elément de texte multiligne, semblable à l'élément texte à ceci près que vous pouvez choisir le nombre de lignes affichées et la longueur des lignes
        donnez vos commentaires,
       

        Boutons,
       
        Bouton, sert normalement à déclencher une action programmée, sans objet en html.
        Reset, efface les données entrées dans la forme
       
        Envoyer, permet d'expédier le contenu de la forme, exemple; expédie un e-mail avec le contenu de la forme,
       

        Eléments cachés,
        permet de transmettre des éléments en rapport avec la forme, par exemple, le nom de la page d'origine, sur quel site la page est-elle installée, etc.

        Les éléments suivants ont besoin d'un programme sur le serveur, ils sont donc donnés ici à titre indicatif, car non utilisable directement en html.
        Elément Fichier, vous pouvez transmettre un fichier. C'est de cette instruction dont se servent les fournisseurs de home page pour vous permettre de transmettre vos fichier, (pages, images), dans votre répertoire sur leur serveur. Je ne vois pas d'application de cet élément en Html.
       Ecrire le nom du fichier ou naviguez jusqu'à lui
       
        Elément image, cet élément agit comme une image map, si vous cliquez sur l'image ci-dessous vous provoquez l'envoi de la forme, (comme par le bouton Envoyer, mais dans le cas présent cette page est renvoyée sur elle-même).
        Si vous regardez la barre d'adresse de votre navigateur après avoir cliqué sur cette image, vous verrez quelque chose qui finit comme cela,
           Tutors/HtmlTutorNew/Html7.htm?Sorce.x=89&Sorce.y=116
        L'image s'appelle "Sorce", les coordonnées en x,y sont celles du curseur dans l'image au moment du click. Ceci permet donc de savoir quelle portion de l'image vous avez choisi, à condition d'avoir le bon programme sur le serveur, non utilisable en html pur.


4. Syntaxe des éléments

    Le type caractérise l'élément.
    Type Text,
    <Input Type="Text" Maxlength="n" name="nom" size="n" value="Texte initial">
    n est un nombre entier.
    Maxlength caractérise le nombre maximum de caractères que l'élément peut accepter, par exemple, la première fois que vous définissez un mot de passe le nombre de caractères est le plus souvent limité. Si le nombre de caractères entré atteint ce nombre vous ne pouvez plus en entrer d'autres.
    size est la longueur de la zone affichée, en nombre de caractères, si le nombre de caractères entré excède ce nombre, le texte est décalé vers la gauche.
        données transmise, texte présent dans l'élément.
    Exercice,
        dans la forme ci-dessous,
        créer une forme, nom "Eltext",
        créer un élément texte taille, (size), 10,
        nom, (name), "nom",
        faites précéder cet élément du texte "Nom : "
        Vérifiez que la longueur du texte que vous pouvez entrer n'est pas limitée.
        Passez la taille à 40
        Correction 
        Dans une forme,
        Ecrire "Entrez un mot de passe de 8 caractères maximum",
        créer un élément texte taille, (size), 10,
        nom, (name), "motpass",
        limiter la taille du texte entré à 8 caractères.
        Correction 
Code de la page:

     

    Type Password,
        même caractéristiques que le type "text" mais affiche des * à la place des caractères entrés.
    <Input Type="Password" Maxlength="n" name="nom" size="n">
        données transmise, texte présent dans l'élément.
    Exercice,
        dans la forme ci-dessus,
        créer une forme,
        Ecrire "Entrez un mot de passe ",
        créer un élément password taille, (size), 10,
        nom, (name), "motpass",
        Corrigé 


    Type Checkbox, (case à cocher),
    <Input Type="Checkbox" Checked name="nom" value="valeur">
        Si Checked est présent la case est cochée à l'affichage de la page.
        La valeur retournée par la case est ON si elle est cochée, seul la valeur des cases sélectionnées est transmise,
        Exemple de données transmise, nom = On
        Cette valeur peut être changée par value="valeur".
        données transmise, nom = valeur
    Exercice, dans la forme ci-dessous,
        créer une forme,
        créer 2 élément case à cocher,
        nom,  "Musique" et "Cinema"
        Précéder ces éléments des phrases "Aimez vous la musique", "Aimez vous le cinéma"
        Corrigé 
        Introduisez le mot clé checked dans le tag de l'un de des cases à cocher, vérifiez qu'elle apparaît bien coché au chargement de la fenêtre.
Code de la page:

     

    Type Radio,
        Ce type d'élément s'emploie en groupe. Pour définir un groupe de boutons radio, on leur donne tous le même nom. Dans un groupe un seul bouton radio peut-être sélectionné.
        <Input Type="radio" Checked name="nom" value="valeur">
        Si le mot checked est présent dans un tag le bouton est sélectionné à l'affichage.
        Dans les données transmises quand vous envoyer la forme, seul la valeur du bouton sélectionné est transmise, sous la forme,
        nom = valeur
        Exercice, dans la forme ci-dessus,
            Texte dans la forme "Précisez votre genre",
            Créer un groupe de 4 boutons radio,
            nom "Genre",
            précédés des textes,
                Féminin
                Masculin
                Ne sait pas
                Cela n'a aucun sens dans mon système, (ma galaxie)
            Trouver des valeurs pour value appropriées aux textes précédent.
            Organisez votre présentation en 4 lignes, (<br>)
        Corrigé 
        Ce serait plus joli si les boutons étaient alignés dans le plan vertical, on peut réaliser cela avec une table.
        Exercice, dans la forme ci-dessus,
            Incluez les éléments de la forme dans une table de 4 lignes et 2 colonnes. La table est incluse dans le tag <form> </form>
        Corrigé 
           

    Type Select, Liste déroulante.
        Vous pouvez voir un exemple sur cette page.
        Permet de dérouler un liste d'options, on peut choisir une ou plusieurs option dans une liste.
        Structure,
    <Select name="nomlist" Multiple>
            <option> texte de l'option 1 </option>
            <option> texte de l'option 2 </option>
            <option> texte de l'option 3 </option>
            ...... ...... .....
    </Select>
        La liste est définit par les tags <Select></Select>.
        La présence du mot clé Multiple signifie que l'on peut sélectionner plusieurs options. dans ce cas la liste affiche par défaut toutes les options, on peut limiter cet affichage par size="n", où n est le nombre de ligne affichée.
        Les données transmises sont
        nomlist = text de l'option sélectionné
        Si la liste comporte le mot Multiple et que plusieurs options ont été sélectionnées elles seront transmises sous la forme ci-dessus.
        Le mot clé value permet de remplacer dans les données transmises, le texte de l'option par la valeur de value, syntaxe,
        <option value="nomOption"> texte de l'option </option>
        Données transmises,
            nomlist = nomOption
        Mot clé, selected,
            si une option, (ou plusieurs avec multiple), sont affectées du mot selected elles seront sélectionnées au chargement de la page.
        Exemple,
           Ecrire "Faites un choix",
            Créer une forme,
            Créer un liste déroulante, nom Film,
            Créer 5 options avec les textes suivant ou d'autres,
                Sans opinion, Jamais le dimanche, La mariée était en noir, Les héros sont fatigués, Tant qu'il y aura des hommes
            Sélectionnez au chargement la première option.
        Corrigé
            Ajoutez le mot multiple dans le tag select, affichez la page puis limitez l'affichage à 2 lignes.
        Corrigé 
Code de la page:

     

        Type Textarea, élément de texte multilignes,
        On peut décider de la largeur de l'élément, (nombres de colonnes), de sa longueur, (nombre de lignes) et de la façon dont sont gérés les retours à la ligne.
        Syntaxe,
        <Textarea name="nomArea" cols="n" rows="m" wrap="RAL">
            Texte à afficher au chargement...
        </Textarea>
        cols impose le nombre de caractères par ligne,
        rows, le nombre de lignes,
        wrap, gère les retours à la ligne, à l'aide de trois options,
            Off, condition par défaut, l'élément ne gère pas les retours à la ligne, si vous continuez à entrer du texte, celui ci se décale, vous devez faire "Entrée" pour passer à la ligne suivante.
            Hard, les retours à la ligne s'effectue automatiquement et leurs codes sont inclus dans les données transmises.
            Soft, les retours à la ligne s'effectue automatiquement mais leurs codes ne sont pas inclus dans les données transmises.
         Exemple, dans la forme ci-dessus,
            Créer une forme,
            Créer un élément textarea,
            nombre de colonnes 20,
            nombre de lignes 3,
            pas de wrap, équivalent à wrap="off"
            Essayer de rentrer un texte.
            Corrigé 
            mettre le wrap à hard, si vous entrez du texte en tapant des lettres au claviers, pensez a faire des espaces tous les 5 à 6 caractères pour simuler des mots, le saut de ligne se faisant sur un espace.
            Corrigé 
            Essayez wrap="soft", vous ne verrez pas de différences comportementales.

            Essayer différentes valeurs pour cols et rows.

        Type Button, boutons poussoirs, se subdivisent en trois types.
        Button,
        Syntaxe,
        <Input type="Button" name="nomBouton" value="Texte" onclick="instructions">
        Value contient le texte affiché par le bouton.
        Cliquer sur un bouton déclenche l'événement onclick, nous verrons son traitement dans le tutorial JavaScript.
        Reset, efface les informations entrées dans la forme,
        Syntaxe,
        <Input type="Reset" name="nomBouton" value="Texte">
        La fonction du bouton est pré-programmée, remettre la forme à blanc, généralement en value vous avez "Effacer".
        Exercice,
            Créer une forme,
            Créer un élément text,
            Créer un élément password
            Créer un élément reset, nommé Effacer
            Tester que quand vous appuyer sur Effacer tout ce que vous avez entré dans la forme s'efface.
            Corrigé 
Code de la page:

     

        Submit, expédie la forme,
        Syntaxe,
        <Input type="submit" name="nomBouton" value="Texte">
        La fonction du bouton est pré-programmée, envoyer la forme, généralement en value vous avez "Envoyer".
        Exercice,
            Créer une forme,
                nom="essaiMail" enctype="text/plain" method="Post"  action="mailto:nom@mail.com"
            Créer un élément text,
            Créer un élément password
            Créer un élément submit, nommé Envoyer
            Corrigé 
            Essai à faire en étant déconnecté d'internet.
            Quand vous pressez le bouton submit, un message s'affiche vous prévenant que vous allez révéler à votre correspondant votre adresse e-mail et que les données ne sont pas cryptées.
           Si votre programme de messagerie, (e-mail), est Outlook le message sera mis en réserve dans la boite d'envoi et vous pourrez le lire et le détruire. Je ne l'ai pas testé sous Outlook Express. Sur Netscape vous aurez un message d'erreur.
            Si vous êtes connecté, le message sera envoyé, nom@mail.com à ma connaissance n'existe pas!
        Type Hidden, éléments cachés,
            Cet élément sera transmis avec les données de la forme, il n'est pas affiché ce qui peut éviter qu'il ne soit modifié par le visiteur,
        Syntaxe,
        <Input type="Hidden" name="nom" value="data">
        exemple si vous avez la même forme sur différends sites :
        <Input type="Hidden" name="Site" value="Multimania">
        Données transmise,
        Site=Multimania
Sommaire
Précédent Suivant