Un guide étape par étape pour démarrer avec les formulaires HTML

Aperçu

Les formulaires HTML sont nécessaires lorsque vous souhaitez collecter des données auprès de la personne qui visite votre site Web. Par exemple, lorsque vous vous inscrivez / vous connectez à des applications comme Uber, Netflix ou Facebook, vous entrez des informations telles que le nom , l' adresse e - mail et le mot de passe via des formulaires HTML .

Nous allons maintenant apprendre tous les éléments nécessaires à la création d'un formulaire.

REMARQUE: j'ai déjà ajouté le style en utilisant CSS et mes éléments seront donc différents, mais ils fonctionneront exactement de la même manière.

Si vous voulez que vos éléments ressemblent aux miens, vous pouvez trouver mon fichier CSS dans les liens ci-dessous:

CSS personnalisé: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normaliser CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Élément de formulaire

C'est le premier élément que nous allons apprendre. Cet élément englobe tous les autres éléments qui entrent dans notre formulaire. Ceci est l'élément de formulaire.

Notre formulaire ne soumettra les données nulle part car il n'est pas connecté à un serveur. Pour connecter notre formulaire à un serveur et traiter nos données, nous pouvons utiliser n'importe quel langage côté serveur comme Node, Python, Ruby ou PHP. La partie du traitement des données implique deux attributs importants qui sont attachés à l'élément de formulaire. Jetons un coup d'œil à ces attributs.

Les attributs:

  1. action: l' attribut action est l'adresse Web (URL) d'un programme qui traite les informations soumises par notre formulaire.
  2. method: C'est la méthode HTTP que le navigateur utilise pour soumettre le formulaire, les valeurs possibles sont POST et GET.
  • POST - Les données du corps du formulaire sont envoyées au serveur.
  • GET - Les données sont envoyées à l'intérieur de l'URL et les paramètres sont séparés par un point d'interrogation.
Remarque: vous ne pouvez pas avoir de formulaires imbriqués dans un autre formulaire . Cela signifie que vous ne pouvez pas avoir d'élément à l'intérieur d'un autre élément.

Élément d'entrée

L'élément d'entrée est l'élément de formulaire le plus couramment utilisé. Il est utilisé pour créer un champ de texte dans lequel l'utilisateur peut saisir des informations, par exemple e - mail , mot de passe, etc.

Créons un champ de texte dans lequel l'utilisateur peut taper son nom.

Remarque: l'élément d'entrée est une balise à fermeture automatique, il n'est donc pas nécessaire de saisir une balise de fermeture correspondant à la balise d'ouverture.

J'ai ajouté trois attributs dans la balise d'entrée ci-dessus. Jetons un coup d'œil à chacun d'eux en détail.

type

L' attribut type indique le type d'entrée souhaité. Si nous donnons une valeur de texte à l' attribut type , ce que nous voulons dire ici, c'est que la valeur que nous entrons dans le champ de saisie est de type texte. Il existe de nombreuses valeurs possibles pour cet attribut particulier. Certaines valeurs possibles sont email, tel pour téléphone et mot de passe, etc.

Exemple: lorsque vous vous connectez à l'un de vos comptes (Amazon / Netflix), vous devez saisir deux choses: e - mail et mot de passe . Donc, dans ce cas particulier, l' élément d' entrée est utilisé. L' attribut type est donné avec la valeur de l' email et du mot de passe respectivement.

id

L'attribut ID n'est pas obligatoire, mais c'est une bonne idée d'en ajouter un. Dans certains cas, cela est utile pour cibler des éléments avec CSS / JavaScript. L'attribut ID est ajouté afin que nous puissions associer des étiquettes à des contrôles de formulaire spécifiques .

Nom

L'attribut name est nécessaire. Lorsqu'un formulaire est soumis au code côté serveur, le serveur peut comprendre les données du formulaire et traiter les valeurs de manière appropriée.

espace réservé

Il s'agit d'un bref indice qui s'affiche dans le champ de saisie avant que l'utilisateur n'entre une valeur. Lorsque l'utilisateur commence à taper dans le champ de saisie, l'espace réservé disparaît.

Voyons à quoi ressemblent quelques autres éléments d'entrée de base.

Remarque: l' utilisation de valeurs différentes pour l' attribut type produira des résultats différents. Par exemple, vous pouvez faire en sorte que l'entrée soit de type email, texte ou mot de passe, etc. Tous présentent un comportement légèrement différent, que vous verrez ci-dessous.

Éléments d'entrée multiples (texte, e-mail, mot de passe)

Élément d'entrée multiple (texte, e-mail, mot de passe)

Élément Textarea

Parfois, une seule ligne de texte ne suffit pas et un simple élément d'entrée ne fonctionnera pas. Par exemple, certains sites Web disposent d'un formulaire de contact permettant aux utilisateurs de saisir leurs requêtes ou leurs messages. Dans ces cas, il est préférable d'utiliser l' textareaélément.

le ea> n'est pas une balise à fermeture automatique, nous devons donc taper à la fois la balise d'ouverture et la balise de fermeture. ()

Les attributs:

  • id: identique à celui mentionné ci-dessus dans l'élément.
  • name: Identique à celui mentionné ci-dessus dans l'élément.
  • cols: spécifie la largeur visible d'une zone de texte.
  • lignes: spécifie le nombre de lignes visibles dans une zone de texte.

Original text


Vous pouvez voir que la zone de texte nous permet de taper sur plusieurs lignes. Une zone de texte est redimensionnable par l'utilisateur, vous pouvez voir dans l'illustration ci-dessus que je redimensionne la zone de texte.

Remarque: dans la plupart des navigateurs, l' élément textarea est redimensionnable.

Élément de bouton

L'élément bouton est l'un des éléments de formulaire les plus importants. Sans bouton, vous ne pouvez soumettre aucun formulaire au serveur pour traitement.

L'élément button accepte l'attribut appelé type. Cet attribut accepte trois valeurs soumettre , réinitialiser et bouton .

Les attributs:

  • type = "reset": Il effacera toutes les données du formulaire quand il sera cliqué.
  • type = ”button”: Il n'a pas de comportement par défaut et il est principalement utilisé avec JavaScript pour le programmer pour un comportement personnalisé .
  • type = ”submit”: Le comportement par défaut du type de soumission est, comme son nom l'indique, de soumettre le formulaire et d'envoyer toutes les données au serveur.

Élément d'étiquette

À l'heure actuelle, il est impossible pour l'utilisateur de dire quel contrôle de formulaire fait quoi. Il n'y a aucun moyen de savoir où vous allez entrer l'e-mail et où vous allez entrer le mot de passe. Le formulaire semble très incomplet et désordonné.

Nous pouvons étiqueter chacun de nos contrôles de formulaires à l'aide de l'élément label.

L'attribut le plus utilisé avec une étiquette est pour.

Les attributs:

  • pour: The pour l' attribut associe l'étiquette avec un élément de forme particulière. La façon dont il correspond est par ID . Comme vous pouvez le voir dans l'exemple ci-dessus, la valeur de l' attribut ID donné à l'élément d'entrée est email. La valeur de l' attribut for donné à l'élément label est également email, donc les deux sont associés l'un à l'autre.
Remarque: lorsque nous cliquons sur l'étiquette, nous obtenons automatiquement le focus sur le champ de saisie associé à l'étiquette. C'est un comportement par défaut.

Maintenant, notre formulaire semble très bon?.

Sélectionnez les menus

Parfois, lorsque vous créez un formulaire, vous ne souhaitez pas que l'utilisateur puisse saisir le texte. Au contraire, vous voudrez peut-être qu'ils choisissent parmi certaines options prédéfinies que vous fournissez .

Chaque fois que vous avez une liste d'options qui dépasse, disons, quatre ou cinq choses, il est préférable d'utiliser le menu de sélection car il économise de l'espace.

Disons que notre formulaire est destiné aux étudiants qui vont chercher à être admis dans une université. Nous voulons permettre aux étudiants de choisir parmi une liste prédéfinie de programmes universitaires.

L'élément de menu de sélection est fait en utilisant l'ouverture et la fermeture ct> balise.

ct> - L'élément de sélection rend un menu déroulant qui contient des options sélectionnables . L' élément select ne fera rien, par lui-même. Cet élément de forme a réellement besoin d' éléments supplémentaires à l' intérieur de celui - ci, exactement lik e

    ele ment les besoins
  • éléments. Les éléments que nous mettons à l' intérieur de la sélection e lement sont appelés éléments d'option.

    Les attributs:

    • name: Identique à celui mentionné ci-dessus dans l'élément.

    on> - L'élément option représente l'un des choix qu'un utilisateur peut choisir dans un menu de sélection . Le & l t; option> élém ent utilise un attri buer c valeur alled.

    Les attributs:

    • valeur: lorsque vous soumettez un formulaire au code côté serveur, chaque élément de formulaire a une valeur associée pour les entrées de texte et les zones de texte. Cette valeur est celle que l'utilisateur tape dans le champ. Cependant, puisque nous créons ces options prédéfinies, nous devons spécifier à quoi doit ressembler la valeur lorsqu'elle est soumise. Nous utilisons donc l' attribut value pour spécifier les valeurs des options prédéfinies.

    Maintenant, nous avons l'étiquette Select Courses avec le menu de sélection que nous venons de créer. Maintenant, nous pouvons également organiser notre liste en groupes logiques avec leup> élément.

    Les attributs:

    • label: le nom du groupe d'options. Dans l'exemple ci-dessous, notre liste d'options a été divisée en deux groupes avec le label Ingénierie et Management.

    Dans l'exemple ci-dessous

    Boutons radio

    Certains menus sont excellents si vous avez beaucoup d'options. Si vous avez quelque chose comme 5 options ou moins, il est préférable d'utiliser des boutons radio.

    La différence entre le menu de sélection et le bouton radio est que les boutons radio vous montrent toutes les options à la fois. Comme le menu de sélection, l'utilisateur ne peut choisir que parmi l'un d'entre eux.

    Les attributs:

    • name: Identique à celui mentionné ci-dessus dans l'élément.
    • value: Puisque nous créons ces options prédéfinies, nous devons spécifier à quoi doit ressembler la valeur lorsqu'elle est soumise. Nous utilisons donc l' attribut value pour spécifier les valeurs des options prédéfinies.
    Remarque: Si vous sélectionnez une option et que vous essayez de sélectionner une autre option, vous verrez qu'elle désélectionne l'option précédente. La façon dont il sait faire cela est parce que nous avons exactement le même attribut de nom . Il sait donc que ces deux boutons radio font partie du même groupe. Remarque: le nom doit être le même si nous voulons que les boutons radio fassent partie du même groupe de boutons radio.

    Cases à cocher

    Parfois, vous pouvez avoir un groupe d'options prédéfinies. Vous voulez que l'utilisateur puisse sélectionner plusieurs options et pas seulement l'une d'entre elles. C'est là que les cases à cocher sont utiles.

    Les attributs:

    • name: Identique à celui mentionné ci-dessus dans l'élément.
    • value: Puisque nous créons ces options prédéfinies, nous devons spécifier à quoi doit ressembler la valeur lorsqu'elle est soumise. Nous utilisons donc l' attribut value pour spécifier les valeurs des options prédéfinies.
    • cochée: par défaut, une entrée de case à cocher est décochée. Vous pouvez définir l'état par défaut sur vérifié à l'aide de l'attribut appelé vérifié . N'oubliez pas qu'il s'agit d'un attribut booléen.

    Dans l'exemple ci-dessous, j'ai utilisé l'étiquette pour chaque option individuelle. J'ai connecté la case à cocher et une étiquette en utilisant l' attribut for de l' étiquette et l' attribut id de la case à cocher .

    Remarque: il peut être difficile de cocher une petite case. Il est recommandé de placer un élément autour de la case à cocher. Si nous cliquons sur l'étiquette, notre case à cocher est également cochée ou décochée. Je ne l'ai pas fait ci-dessous, mais vous pouvez le faire pour rendre l'UX meilleur.

    Différence entre la case à cocher et le bouton radio

    1. La case à cocher peut exister seule , tandis que les boutons radio ne peuvent apparaître que sous forme de groupe (au moins 2 boutons radio doivent être présents).
    2. La sélection de la case à cocher est facultative, mais le choix de l'un des boutons radio est obligatoire .

    Le formulaire complet

    Nous avons découvert de nombreux éléments de formulaire HTML et avons couvert l'essentiel.

    Ne vous inquiétez pas de tout mémoriser. Presque aucun développeur Web professionnel ne peut nommer chaque attribut ou élément. Ce qui est plus important que la mémorisation, c'est d'apprendre à rechercher des éléments dans la documentation lorsque vous en avez besoin.

    Vous pouvez essayer d'ajouter votre propre CSS pour donner à ce formulaire l'apparence que vous souhaitez.

    Vous pouvez en savoir plus sur les formulaires dans le lien ci-dessous

    Formulaires HTML

    Ce module propose une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont un outil très puissant pour… developer.mozilla.org

    J'espère que vous avez trouvé ce message informatif et utile. J'aimerais beaucoup entendre vos commentaires!

    Merci pour la lecture!