Et bon retour.
Nous allons entrer dans des balises plus avancées et probablement la balise la plus importante que vous utiliserez, à part celles que nous
avons couvertes jusqu'à présent, sont les balises dont nous avons besoin pour créer des formulaires.
Comme vous le savez, lorsque vous visitez des sites Web, il y a généralement une sorte de formulaire de connexion ou d'inscription.
Nous allons donc développer cela aujourd'hui pour commencer.
Créons simplement un nouveau fichier ici.
Nous allons l'enregistrer et l'appeler HTML enregistré sur notre bureau.
Parfait, et on sait qu'on veut aussi utiliser notre petit raccourci et on l'intitulera registre, sauf ça.
Et maintenant, dans le fichier d'index, ajoutons un autre lien.
Ces références enregistrent dot html et je dirai simplement ici, inscrivez-vous.
Très bien, nous allons enregistrer ces deux fichiers et actualisons, nous avons enregistré.
Cliquez sur s'inscrire.
Eh bien, nous n'avons encore rien, mais il semble que cela fonctionne, ajoutons ceci sur une nouvelle ligne simplement parce que cela semble
plus joli de cette façon.
Donc pour ce faire, si vous vous en souvenez, nous allons ajouter une étiquette de frein.
Alors rafraîchissons-nous.
Voilà.
Nous avons une nouvelle page et inscrivez-vous.
OK, créons donc ce formulaire si nous entrons pour enregistrer DOT.
La façon dont nous écrivons les formulaires en HTML, alors qu'il y a une balise de formulaire.
OK, mais cette balise de formulaire elle-même, elle doit contenir le formulaire réel.
Alors, quel genre d'éléments de formulaire avons-nous?
Eh bien, encore une fois, si nous nous souvenons de notre bon vieil ami W trois C, tapons des formulaires.
Et nous pouvons voir ici que nous avons une petite ferme.
Et l'actualisation fera ce plein écran et vous pouvez voir ici qu'il y a une tonne d'informations à ce
sujet, mais vous pouvez vérifier vous-même pour l'instant.
Je vais vous présenter les plus courantes, probablement celles que vous utiliserez 90 pour cent du
temps.
Le premier, comme nous le faisons avec n'importe quel formulaire et allons à cette base pour l'instant, est ce que nous voulons entrer notre
nom.
Alors comment fait-on ?
Nous avons une balise d'entrée.
Cela a un type de texte parce que, eh bien, notre nom sera sous forme de texte et nous pouvons le fermer et c'est en fait
une balise à fermeture automatique.
Alors maintenant, si je sauvegarde et rafraîchis, OK, nous avons une petite boîte ici.
J'espère que vous pouvez le voir.
Mais bon, nous devrions probablement l'intituler parce que nous ne saurons pas quoi répondre de cette façon.
Nous allons donc mettre ici.
On va dire le prénom.
Point-virgule et enregistrez, rafraîchissons-nous, nous avons le prénom et maintenant agrandissons-le un peu.
Voilà.
Vous pouvez maintenant entrer votre nom ici.
Impressionnant.
Eh bien, ajoutons un autre pour notre nom de famille.
Et encore une fois, nous aurons notre type d'entrée, c'est donc un attribut et une valeur de texte.
Et si nous actualisons, nous avons le nom de famille, d'accord, mais ça a l'air un peu moche, rappelez-vous que HTML ne fait que lire ligne
par ligne et ne sait pas vraiment que nous voulons un espace ici.
Donc, encore une fois, nous pouvons ajouter un.
Revenez ici et rafraîchissez-vous, et nous avons le prénom et le nom.
OK, c'est assez explicite.
Maintenant, qu'avons-nous d'autre dans une forme ?
Nous avons un e-mail.
Ajoutons donc un autre champ, qui est l'e-mail, et nous recommencerons la saisie.
Tapez des appels, du texte.
Eh bien, ajoutez une autre pause ici, car nous allons avoir besoin de cet espacement.
Et gardons le rafraîchissement, génial.
OK, nous avons donc notre formulaire d'inscription général.
Et évidemment, avec n'importe quel formulaire, nous avons besoin d'une sorte de boutons, d'accord, comme nous devons le soumettre quelque part afin que nous
puissions nous inscrire.
Eh bien, encore une fois, il y a un bel appétit pour ça.
Nous saisissons donc au lieu d'un type de texte.
Il existe un type de soumission.
Donc ça.
Si nous avions une autre pause ici.
Et je dis ça, je rafraîchis ça a un sommet.
Maintenant, d'où vient ce sommet ?
Eh bien, lorsque vous mettez un type d'entrée submit, il crée automatiquement un bouton.
Et si vous ne précisez pas quoi dire, j'aurai juste ce texte.
Mais nous pouvons changer cela pour pouvoir mettre de la valeur.
Et nous mettrons le registre.
Enregistrez cette actualisation, nous avons maintenant un bouton d'enregistrement.
OK, mais que se passe-t-il si nous faisons des erreurs dans ce domaine, nous écrivons des trucs et pourquoi nous voulons le réinitialiser, encore une fois, il
y a une entrée maintenant là pour cela.
Et le type de cette entrée, comme vous pouvez l'imaginer, est réinitialisé.
Alors maintenant, si nous fermons ceci à une autre pause ici, en fait, nous pouvons garder cela sur la même
ligne, nous enregistrerons l'actualisation.
Et nous avons réinitialisé, donc maintenant si je tape quelque chose ici et disons que je ne veux pas bien, je n'aime pas ça,
je dois réinitialiser le formulaire.
Je peux simplement cliquer sur réinitialiser et cela efface tout pour nous.
OK, vous vous demandez peut-être ce qui se passe lorsque nous cliquons sur s'inscrire avant d'entrer dans cela, je veux simplement passer en revue
tous les types d'entrée courants, puis nous cliquerons sur les registres pour voir ce qui se
passe avec l'e-mail.
Nous souhaitons idéalement, dans un premier temps, qu'il soit obligatoire afin que lorsque vous cliquez sur s'inscrire, si vous n'avez pas
renseigné d'email, il ne vous permette pas de vous inscrire.
Et il y a un attribut que nous pouvons utiliser pour cela et qui est requis.
Et ici, nous n'avons pas réellement besoin de spécifier une valeur car il est automatiquement supposé que required est égal à true,
ce qui signifie que ce champ de formulaire est obligatoire.
Donc, si je dis que je rafraîchis et que je le laisse vide et que je clique sur s'inscrire, je dirai, s'il vous plaît, remplissez ce
champ.
Maintenant, nous voulons également nous assurer qu'il s'agit d'un champ d'e-mail approprié, donc si je tape quelque chose comme ça, nous voulons
toujours nous assurer que, vous savez, il s'agit d'un e-mail incorrect.
Nous ne voulons pas nous inscrire.
Donc le type de texte d'entrée que je vous ai dit pour le courrier électronique est en fait erroné, il y en a un
spécifique que nous pouvons utiliser, qui est, comme vous pouvez l'imaginer, le courrier électronique.
Alors maintenant, si j'actualise et tape quelque chose qui n'est pas un e-mail et que je clique sur s'inscrire.
Je dirai s'il vous plaît inclure un et l'adresse e-mail.
Très agréable.
C'est un peu comme par magie, ça fait ça pour toi, ce qui est très, très gentil.
Développons notre connaissance des entrées et ajoutons quelques champs supplémentaires qui auront probablement besoin
de connaître l'anniversaire de quelqu'un.
Ajoutons donc l'anniversaire ici.
Et pour ce type d'entrée, faisons taper.
Date.
Donc, si je dis cela et que je rafraîchis le regard, nous avons un joli petit sélecteur de date pour que je puisse choisir n'importe quoi ici.
D'accord, de quoi d'autre avons-nous besoin ?
Nous avons également besoin de genre, nous allons donc saisir le type et le genre.
Eh bien, il n'y a pas d'appétit spécifique pour le genre, mais il y a quelque chose qui s'appelle la radio.
Et la radio est, comme son nom l'indique, des boutons radio.
Alors maintenant.
Cliquez sur Actualiser et, eh bien, j'ai un bouton radio, mais nous voulons idéalement avoir des options, n'est-ce pas ?
Alors comment fait-on ?
Donc pour la radio, il faut aussi dire si c'est masculin ou féminin, ayons dans le genre.
Nous allons faire une pause ici dans la file et nous dirons.
Et mets type radio et on va dire mâle et on veut aussi.
Femelle.
Et nous voulons aussi.
Autre.
Et lorsque nous actualisons cela, nous avons un homme, une femme et d'autres, mais vous voyez un problème ici, je clique simplement sur les boutons radio et
je ne peux pas les désélectionner et idéalement, vous le pouvez.
Vous ne devriez pouvoir en sélectionner qu'un.
Et pour le moment, vu la façon dont les boutons radio sont, ils ne connaissent pas l'existence de l'autre.
Nous voulons nous assurer qu'ils savent qu'ils sont connectés, qu'ils font partie de la famille et qu'un seul d'entre eux peut être
choisi.
Alors comment fait-on ?
La façon dont nous le faisons est à travers l'attribut name.
Donc pour le nom dira le sexe.
Et cet attribut de nom doit correspondre à tous les boutons radio afin qu'ils sachent qu'ils sont ensemble, ils font partie du
champ de saisie du genre.
Donc, si j'enregistre ici et que je rafraîchis.
Maintenant, vous pouvez voir que je ne peux en sélectionner qu'un.
D'accord, parfait.
Que devrions-nous avoir d'autre ?
Eh bien, disons que je veux vraiment savoir si vous avez des animaux de compagnie.
Donc avec les animaux.
Nous allons avoir un type d'entrée ou vous pouvez avoir plusieurs animaux de compagnie, donc ce ne sera pas des boutons radio, nous voulons une case à cocher.
Donc case à cocher, nous voulions avoir des chats ou des chiens, mais chat et nous voulons en avoir.
Impossible de taper aujourd'hui.
Cochez la case, et nous voulons avoir des chiens.
Alors gardons ça, rafraîchissons-nous et regardons ça, nous avons des animaux de compagnie, mais cette fois ce sont des cases à cocher, ce qui
signifie.
Je peux en sélectionner plusieurs.