Valeur de cette activité : 5 points
Compétence :
09- Introduction aux éléments de formulaire

A-Module 01 : HTML : 5 points - difficulté : 2

Présentation


Les formulaires HTML servent à interagir avec les visiteurs de votre site internet et servent à transmettre de l'information d'une page à une autre.

Ils sont très utiles. Ils seront utilisés dans les modules Javascript, Asp et PHP.

Lorsque vous ajoutez une page à votre portfolio, vous utilisez un formulaire HTML.


Les éléments de formulaires sont nombreux :
- zone de texte
- zone de texte étendu
- case à cocher
- bouton radio
- boîte à liste déroulante
- image
- bouton
- mot de passe


La présente activité vous servira à maîtriser la construction des différents objets d'un formulaire HTML.

Pour des explications plus détaillées concernant les différents éléments de formulaire, consultez le site http://www.philgate.com/phil_Web/html3.2/frames.html dans la section Code formulaire.

Vous allez créer un formulaire qui pourrait servir à une inscription sur votre site.

Ce formulaire sera composé de :
- un champ TEXTE qui contiendra le nom du visiteur
- un champ MOT DE PASSE qui contiendra le mot de passe du visiteur
- d'un champ BOÎTE À LISTE DÉROULANTE afin de désigner le lieu de résidence du visiteur
- d'un champ CASE À COCHER qui indiquera les langages de programmation connus
- d'un champ BOUTON RADIO qui indiquera le sexe du visiteur

Le formulaire créé ne sera pas fonctionnel, vous allez seulement créer la présentation graphique du formulaire.

Dans les modules Javascript, Asp et Php, vous irez plus loin dans l'utilisation des formulaires.

Description

ATTENTION : Lorsque vous nommez un objet de formulaire, vous ne devez JAMAIS utiliser de caractères accentués, d'espace ou de caractères spéciaux (@,*,',",^,:,...).
Aide ? Cliquez ici pour mieux comprendre les différents objets d'un formulaire.

  1. Ajouter une page à votre portfolio
  2. Utilisez lesassistants HTML et FORMULAIRE et en affichant la directive 3663.
  3. Inscrivez dans le champ TITRE : Introduction aux formulaires HTML
  4. Inscrivez dans le champ Matière : Informatique
  5. Inscrivez dans le champ No de la directive : 3663
  6. Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
  7. Dans votre page, inscrivez "Veuillez compléter ce formulaire pour vous inscrire" en utilisant les balise de Titre de niveau 3.
  8. Ajoutez à la suite du titre, en utilisant le bouton FORMULAIRE, le code de votre formulaire

    Notez que le code de formulaire inscrit n'est pas complet.

    La balise FORM est accompagnée de 3 paramètres :

    - NAME : le paramètre NAME indique le nom du formulaire.
    Il est préférable de toujours nommer le formulaire
    Nommez donc ce formulaire du nom de FORMU

    - ACTION : l'action indique la page vers laquelle seront envoyées les données inscrites dans le formulaire.
    Vous utiliserez ce paramètre dans les modules Asp et Php.
    Pour l'instant, conservez ce paramètre vide.

    - METHOD : la méthode indique la façon avec laquelle seront envoyées les données inscrites dans le formulaire.

    Vous utiliserez ce paramètre dans les modules Asp et Php.

    Pour l'instant, conservez ce paramètre vide.

    La balise /Form indique le fin de votre formulaire.

  9. Placez votre curseur entre les balises FORM et /FORM

  10. Taper le mot " NOM : " et utilisez le bouton CHAMP TEXTE afin d'ajouter à votre formulaire le champ NOM.
    Répondez aux questions :
    - nom = nom
    - taille = 50
    - valeur = laissez vide
    Ces paramàtres désignent :
    Nom (name) : nom du champ
    Taille (size) : largeur du champ
    Valeur (value) : la valeur inscrite par défaut dans ce champ

  11. Insérez à la suite de ce champ un saut de ligne
  12. Taper les mots " MOT DE PASSE : " et utilisez le bouton CHAMP MOT DE PASSE afin d'ajouter à votre formulaire le champ MOT DE PASSE.
    Répondez aux questions :
    - nom = motpasse
    - valeur = laissez vide

    - taille = 50 Ces paramàtres désignent :
    Nom (name) : nom du champ
    Taille (size) : largeur du champ
    Valeur (value) : la valeur inscrite par défaut dans ce champ

  13. Insérez à la suite de ce champ un saut de ligne
  14. Taper les mots " LIEU DE RÉSIDENCE : " et utilisez le bouton BOÎTE À LISTE DÉROULANTE afin d'ajouter à votre formulaire le champ BOÎTE À LISTE DÉROULANTE. Répondez aux questions : - nom = LIEUDERESIDENCE
  15. Inscrivez entre OPTION ET /OPTION de la ligne 1 : Montréal
  16. Inscrivez entre OPTION ET /OPTION de la ligne 2 : Ottawa
  17. Copier cette ligne et collez-la afin d'en créer un troisième
  18. Inscrivez entre OPTION ET /OPTION de la ligne 3 : Vancouver
  19. Insérez à la suite de ce champ (APRÈS la balise /SELECT) un saut de ligne
  20. Tapez les mots " LANGAGES DE PROGRAMMATION CONNUS : " et insérez un saut de ligne
  21. Tapez HTML et utilisez le bouton CASE À COCHER afin d'ajouter à votre formulaire le champ CASE À COCHER en nommant ce champ HTML
  22. Insérez à la suite de ce champ un saut de ligne
  23. Tapez ASP et utilisez le bouton CASE À COCHER afin d'ajouter à votre formulaire le champ CASE À COCHER en nommant ce champ ASP
  24. Insérez à la suite de ce champ un saut de ligne
  25. Tapez PHP et utilisez le bouton CASE À COCHER afin d'ajouter à votre formulaire le champ CASE À COCHER en nommant ce champ PHP
  26. Insérez à la suite de ce champ un saut de ligne
  27. Tapez JAVASCRIPT et utilisez le bouton CASE À COCHER afin d'ajouter à votre formulaire le champ CASE À COCHER en nommant ce champ JAVASCRIPT
  28. Insérez à la suite de ce champ un saut de ligne
  29. Tapez AUTRES et utilisez le bouton CASE À COCHER afin d'ajouter à votre formulaire le champ CASE À COCHER en nommant ce champ AUTRES
  30. Insérez à la suite de ce champ un saut de ligne
  31. Taper les mots " SEXE : " suivi d'un saut de ligne
  32. Taper les mots " Masculin : " et utilisez le bouton BOUTON RADIO afin d'ajouter à votre formulaire le champ BOUTON RADIO.
    Répondez aux questions :
    - nom = sexe
    - valeur = masculin
  33. Insérez à la suite de ce champ un saut de ligne
  34. Taper les mots " Féminin : " et utilisez le bouton BOUTON RADIO afin d'ajouter à votre formulaire le champ BOUTON RADIO.

    Répondez aux questions :
    - nom = sexe
    - valeur = féminin

  35. Insérez à la suite de ce champ un saut de ligne
  36. Ajoutez maintenant un autre champ de formulaire de votre choix.
    Exemple : Quelle est votre matière scolaire préférée :
  37. Utilisez le bouton BOUTON afin d'ajouter à votre formulaire le champ BOUTON.
    Répondez à la question :
    - Valeur= Soumettre
  38. Votre formulaire est maintenant terminé. Cliquez le bouton ENREGISTRER
  39. Visualisez votre page et apportez les corrections au besoin
  40. POUR INFORMATION SEULEMENT : Si vous désirez produire un formulaire dont la fonction est d'envoyer le contenu via le courriel alors visitez ce site Cliquez ici. Il existe également d'autres façons de faire (ASP, PHP, CGI).