LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


LES FORMULAIRES HTML

SOMMAIRE
  • <form>
  • <fieldset>
  • <legend>
  • <label>
  • <button>
  • <input>
  • <option>
  • <select>
  • <textarea>


  • <form...> </form> : Cette balise encapsule le formulaire.
    Vous pourrez utiliser les formulaires dans de nombreuse applications :
  • Formulaire mail
  • Formulaire de login
  • Formulaire d'inscription
  • Formulaire de sélection
  • ...
  • Les formulaires sont très souvent associé à des scripts (en PHP, ASP, CGI, Perl,...) pour en traiter le contenu
    action="..." : Vous y placerez l'adresse du script qui va traiter les données.
    Vous pouvez aussi renseigner une adresse mail (ex : mailto:votremail@votredns.tld) dans ce cas les champs remplis seront envoyés par l'intermédiaire de votre client mail.
    enctype="..." : Spécifie le type de données et comment elles seront encodées.
    Les valeurs acceptées sont : "text/plain", multipart/form-data, ....
    methode="..." : Spécifie la méthode de requète HTTP pour assurer le transfert des données du formulaire.
    2 valeurs sont permises : post et get.
    name="..." : Attribue un nom au formulaire.
    target="..." : Défini le mode d'ouverture de la page résultat. Les valeurs possible sont : "_self", "_blank", "_parent" et "_top".
    Dans l'exemple ci-dessous, entrez un petit texte de quelques caractères et cliquez sur le bouton "Envoyer".
    Ensuite, observez la barre d'adresse de votre navigateur, vous y verrez : "http://www.guide-code-html.com/les-formulaires-html.php?champs=test".
    Nous avons utilisé la méthode "get" qui passe les paramètres et leur valeur dans dans l'adresse.
    Ex :
    <form action="" method="get"
        enctype="text/plain">
      <input type="text" name="champs">
      <input type="submit">
    </form>
    Résultat :

    Dans l'exemple ci-dessous, entrez un petit texte de quelques caractères et cliquez sur le bouton "Envoyer".
    Ensuite, observez la barre d'adresse de votre navigateur, vous n'y voyez plus que l'adresse : "http://www.guide-code-html.com/les-formulaires-html.php".
    Nous avons utilisé la méthode "post" qui passe les paramètres et leur valeur au travers de la requète HTTP, les variables sont donc discrètes.
    Ex :
    <form action="" method="post"
        enctype="text/plain">
      <input type="text" name="champs">
      <input type="submit">
    </form>
    Résultat :

    Compatibilité : IE Firefox
    Top of Page

    <fieldset> </fielset> : Cette balise encapsule les éléments d'un formulaire et entoure graphiquement les balises inclues.
    Ex :
    <form action="" method="get"
        enctype="text/plain">
      <fieldset>
        <input type="text" name="champs">
        <input type="submit">
      </fieldset>
    </form>
    Résultat :


    Compatibilité : IE Firefox
    Top of Page

    <legend> </legend> : Cette balise affiche une légende sur le cadre "fieldset".
    Ex :
    <form action="" method="get"
        enctype="text/plain">
      <fieldset>
        <legend>Titre du formulaire</legend>
        <input type="text" name="champs">
        <input type="submit">
      </fieldset>
    </form>
    Résultat :

    Titre du formulaire
    Compatibilité : IE Firefox
    Top of Page
    <label> </label> : Cette balise affiche un label à un élément du formulaire.
    Ex :
    <formaction="" method="get"
        enctype="text/plain">
      <fieldset>
        <legend>Titre du formulaire</legend>
        <label>Champs : </label>
        <input type="text" name="champs">
        <input type="submit">
      </fieldset>
    </form>
    Résultat :

    Titre du formulaire
    Compatibilité : IE Firefox
    Top of Page
    <button>...</button> : Cette balise permet de créer un boutton personnalisable avec un texte approprié tout en lui donnant une fonction type Submit, Reset.
    Ex :
    <form action="" method="get"
        enctype="text/plain">
      <input type="text" name="champs"><br>
      <button type="submit"
        value="BouttonSubmit"
        name="expedier email">
        Envoyer email</button>
      <button type="reset"
        value="BouttonReset"
        name="ResetChamps">
        Vider les champs</button>
    </form>
    Résultat :


    Compatibilité : IE Firefox
    Top of Page
    <input...> : Élément d'acquisition du formulaire.
    Pas de balise de fermeture !!!!
    Sans attribut, cette balise prendra le mode d'acquisition de texte (par défaut).
    Il est bon d'utiliser conjointement l'attribut "Name", afin que le contenu soit associé à une variable et ainsi permettre un traitement ultérieur.
    type="text" : La balise <input> prend le mode d'acquisition de texte.
    Ex :
    <input type="text"
      name="nom_variable">
    
    Résultat :

    type="button" : La balise <input> prend la forme d'un bouton.
    L'attribut "value" y est associé pour inscrire sur le bouton un texte.
    N'ayant pas de comportement, il sera associé à un fonction javascript pour déclencher une action ou un évènement.
    Ex :
    <input type="button"
      name="nom_variable"
      value="Mon bouton">
    
    Résultat :

    type="checkbox" : La balise <input> prend le mode de carré cochable.
    "name" peut porter le même nom de variable si besoin est.
    Ex :
    <input type="checkbox"
      name="nom_variable_1"
      value="choix1"> Choix 1
    <input type="checkbox"
      name="nom_variable_2"
      value="choix2"> Choix 2
    Résultat :

    Choix 1
    Choix 2
    type="file" : La balise <input> prend le mode d'explorer de fichier.
    Ex :
    <input type="file"
      name="nom_variable_1">
    Résultat :

    type="hidden" : La balise <input> prend le mode variable cachée, c'est à dire que l'on va par ce moyen transmettre une variable non visible qui servira à prendre des décision lors du traitement du formulaire.
    Ex :
    <input type="hidden"
      name="nom_variable_1"
      value="variable_1">
    Résultat :

    Cette balise associée à l'attribut "hidden" ne donne aucun resultat visible. Par contre, si vous regardez le code source de la page, vous la retrouverez.
    type="image" : La balise <input> prend la même fonction que "submit".
    Il a l'avantage de pouvoir personnaliser le bouton.
    Ex :
    <input type="image"
      src="images-doc/bouton-image.gif"
      name="nom_variable">
    
    Résultat :

    type="password" : La balise <input> prend le mode d'acquisition de mot de passe.
    Les caractères entrés dans cette case seront remplacés par "*" pour garder la discrétion.
    Ex :
    <input type="password"
      name="nom_variable">
    
    Résultat :

    type="radio" : La balise <input> prend le mode de sélection d'option de type "radio".
    Une seule option ne peut être sélectionnée.
    "name" doit porter le même nom de variable.
    Ex :
    <input type="radio"
      name="nom_variable"
      value="choix1"> Choix 1
    <input type="checkbox"
      name="nom_variable"
      value="choix2"> Choix 2
    Résultat :

    Choix 1
    Choix 2
    type="reset" : La balise <input> prend le mode effacement de tous les champs du formulaire
    Tapez quelques caractères ensuite cliquez le bouton "Effacer" ou "Reset". Le champs rempli s'effacera.
    Ex :
    <form>
      <input type="text" name="test">
      <input type="reset">
    </form>
    
    Résultat :

    type="submit" : La balise <input> prend le mode d'envoi de tous les champs du formulaire vers le serveur pour traitement.
    Ex :
    <input type="submit">
    Résultat :

    AUTRES ATTIBUTS DE LA BALISE "INPUT"
    accept="..." : Spécifie le type de contenu pouvant être traité par le formulaire.
    S'applique seulement au "type" : File.
    Ex. :
    ... accept="liste de type de fichier accepté" ...
    checked : S'applique aux "type" : Checkbox et Radio. Lorsque cet attribut est placé l'option est sélectionnée.
    Ex. :
    ... checked ...
    maxlength="..." : Défini le nombre de caractères maximum qui peut être entré par un utilisateur.
    S'applique aux "type" : Password, Text.
    Ex. :
    ... maxlength="30" ...
    name="..." : Donne un nom de variable à la balise <input> utile lors de la transmission au server pour traitement.
    S'applique aux "type" : Button, Checkbox, File, Hidden, Image, Password, Radio, Text.
    Ex. :
    ... name="test" ...
    size="..." : Exprimé en nombre de caractères, défini la taille de la boîte d'acquisition.
    S'applique aux "type" : Password, Text.
    Ex. :
    ... size="30" ...
    src="..." : Spécifie l'URL de l'image qui sera utilisée comme bouton.
    S'applique seulement au "type" : Image.
    Ex. :
    ... src="URL de l'image" ...
    value="..." : Précharge un contenu dans le champ concerné de la balise <input>
    S'applique aux "type" : Button, Checkbox, File, Hidden, Password, Radio, Reset, Submit, Text.
    Ex. :
    ... value="contenu valeur" ...
    Compatibilité : IE Firefox
    Top of Page
    <option>...</option> : Défini les options ou item dans un menu à choix multiple (aussi appelé liste déroulante).
    Cette balise doit être encapsulée dans des balises <select>.
    La balise de fermeture est facultative mais fortement suggérée.
    selected : Préselectionne l'option ou item du menu à choix multiple ou liste déroulante.
    Ex :
    <select size="1">
      <option value="chat">chat</option>
      <option value="chien">chien</option>
      <option value="oie" selected>oie</option>
      <option value="poule">poule</option>
      <option value="vache">vache</option>
    </select>
    Résultat :

    value="..." : Attribue un contenu à la balise <option> sélectionnée, utile lors de la transmission au server pour traitement.
    Ex. :
    ... value="test" ...
    Compatibilité : IE Firefox
    Top of Page
    <select>...</select> : Élément d'acquisition du formulaire.
    Cette balise génère un menu à choix multiple, elle est aussi appelée liste déroulante.
    Cette balise doit encapsuler des balises <option> pour qu'elle puisse afficher une liste.
    multiple : Permet à l'utilisateur de pouvoir sélectionner une ou plusieurs options de la liste déroulante.
    Ex. :
    ... multiple ...
    name="..." : Attribue un nom de variable à la balise <select>, utile lors de la transmission au server pour traitement.
    Ex. :
    ... name="test" ...
    size="..." : En l'absence de cet attribut, "size" est forcé à la valeur "1" (valeur par défaut).
    Si "size" a pour valeur "1", la fenêtre ne présentera qu'une option. Dès que vous cliquerez la fenêtre une liste déroulante s'affichera. L'utilsateur pourra sélectionner l'option souhaitée.
    Ex :
    <select size="1">
      <option>chat</option>
      <option>chien</option>
      <option>oie</option>
      <option>poule</option>
      <option>vache</option>
    </select>
    
    Résultat :

    Si "size" a une valeur supérieure à "1", la fenêtre présentera un nombre d'option égal à la valeur de "size". Si le nombre d'options est supérieur à "size" des boutons pour monter et descendre parmi les options apparaîtront.
    Ex :
    <select size="2">
      <option>chat</option>
      <option>chien</option>
      <option>oie</option>
      <option>poule</option>
      <option>vache</option>
    </select>
    
    Résultat :

    Compatibilité : IE Firefox
    Top of Page
    <textarea>...</textarea> : Élément d'acquisition du formulaire.
    Assez similaire à la balise "input type=text", il a une possibilité supplémentaire de s'ouvrir sur plusieurs ligne.
    Si vous placez un texte entre les balises <textarea>...</textarea>, il sera affiché dans la fenêtre.
    Ex :
    <textarea>
    Texte inséré dans les balises
    <textarea>...</textarea>
    </textarea>
    Résultat :

    cols="..." : Défini la largeur de la fenêtre
    Ex :
    <textarea
      cols="25">
    </textarea>
    Résultat :

    rows="..." : Defini la hauteur de la fenêtre, exprimée en nombre de lignes
    Ex :
    <textarea
      rows="5">
    </textarea>
    Résultat :

    name="..." : Attribue un nom de variable à la balise <select>, utile lors de la transmission au server pour traitement.
    Ex. :
    ... name="test" ...
    wrap="..." : Défini la méthode de césure dans la fenêtre.
    Les valeurs possible sont : "off", "virtual", "physical", "soft" et "hard".
  • off : le mode de césure automatique est désactivé. Lors de l'acquisition, l'utilisateur devra entrer lui même les retour à la ligne
  • virtual : Les fins de ligne seront affichées et transférées au serveur pour traitemant
  • physical :
  • soft : identique à "virtuel"
  • hard : identique à "physical"
  • Compatibilité : IE Firefox
    Top of Page
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007 ;© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 10/02/2016
         image