Donc, dans cette vidéo, nous allons aller de l'avant et créer une solution pour ce formulaire d'inscription.
J'ai donc un nouveau fichier pour le sauvegarder.
Je vais juste appeler ce formulaire d'inscription que HDMI je vais utiliser mon raccourci sublime et obtenir notre plaque chaudière chaudière va.
Donc, lorsque nous sommes confrontés à un projet comme celui-ci il ya quelques endroits que nous pourrions commencer.
Et la première chose que je vais faire est d'ajouter la forme Tagen et puis je vais aussi ajouter ce H1 juste en haut ici et Louis mettre le registre.
Alors allons-y et ouvrez notre formulaire d'inscription ici et déplacez-le.
Ok, pas tout à fait là encore, mais au moins ou Chaque est une bonne mine.
Revenons donc au sublime et laissez-nous le bâton commençons par la chose la plus simple devrait être ces ce niveau supérieur des entrées.
Le prénom et le nom.
Nous allons commencer par les commentaires.
Et ceux-ci sont de type égal à ups de texte.
Et nous allons lui donner un espace réservé qui ressemble à ce que devrait être John laisser faire un autre placeholder Smith et ensuite nous devons donner deux étiquettes.
Nous pourrions donc utiliser la syntaxe pour les étiquettes.
Je vais utiliser les quatre.
Alors je vais appeler cela d'abord et nous allons nous assurer que nous obtenons un ID égal à la première.
Et puis cette étiquette dira le colon du prénom qui nous donnera cela et alors nous devons faire exactement la même chose.
Un autre label pour le dernier de dire un colon de nom de famille et puis nous avons besoin de donner cette ID est égal à la dernière.
Alors, nous allons vérifier et voir ce que nous avons.
Jusqu'ici tout va bien.
Il ya une petite chose que nous manquons, c'est-à-dire que nous n'avons pas donné un nom à ces entrées, il suffit de lui donner le nom d'abord et de nommer le dernier grand.
Passons donc à la partie suivante.
Ce qui nous manque en fait une chose qui est les validations.
Donc, alors que nous sommes ici, rappelez-vous que le prénom et le nom ne sont pas censés être vierges.
Donc, pour ce faire, il est très simple, nous ajoutons simplement l'attribut requis sur les entrées requises et définir cela pour être vrai.
Donc, je vais aller de l'avant et élargir ce juste afin que nous puissions voir un peu plus clair sur ce que nous travaillons.
Donc la prochaine chose si nous consulter le formulaire ici est le bouton radio genre.
Nous avons donc besoin de trois boutons radio.
Donc ceux-ci sont type d'entrée égale la radio.
Trois d'entre eux.
Et si nous jetons un coup d'oeil à ce qui nous donne première chose que vous verrez, c'est qu'ils sont en ligne avec les autres éléments qui n'est pas réellement ce que la forme que je vous ai donné est censé ressembler.
Nous avons donc quelques options pour que les choses se comportent.
Nous pouvons les jeter dans un paragraphe comme ceci juste ajouter un certain espacement.
Maintenant, nous les obtenons sur une ligne distincte.
Je vais juste utiliser un div ici.
Là vous allez dans un div.
N'a pas tout à fait le même espacement.
Un paragraphe a dans la vidéo C S S va vraiment parler de ce que l'espacement est.
Donc, maintenant, nous devons aller de l'avant et d'ajouter ou d'étiquettes et avant que nous ne commençons à leur donner le même nom afin que le nom sera de sexe ici.
Avançons et devrions avoir utilisé mon raccourci ici qui est de commander les curseurs multiples de clic ainsi nous les obtenons nommant le genre croisé et alors donnons-leur chacun une valeur.
Donc le premier, la valeur sera le mâle.
La deuxième sera féminine.
Le dernier est soit et rafraîchir.
Nous ne voyons pas tout cela bien sûr parce que c'est juste dans les coulisses.
Donc, ce que nous devons faire est d'ajouter dans nos étiquettes.
Nous allons donc vouloir trois étiquettes.
Le premier va dire l'étiquette quatre et nous appellerons juste ce mâle teated nous avons ici.
Non, le courrier juste de Colon, puis Id est égal au courrier.
Même chose.
Un autre label ici.
Celui-ci sera femelle.
Et puis nous allons vouloir dire Id me pour vous cause féminine.
Et puis vous continuez à dire ID vous cause féminine.
Ainsi que vous pouvez voir la construction de ces formes, il devient un peu fastidieux parfois.
Vous avez un tas d'étiquettes et beaucoup de choses de gâchis, vous avez juste à être très prudent que vous avez tout correspondant correctement.
Donc, nous voulons pour les autres je veux dire que nous voulons faire des égaux ID soit.
Nous allons vérifier ce que nous avons.
D'accord.
Cela ressemble beaucoup.
Nous ne pouvons en sélectionner qu'un qui est ce que nous voulons.
La prochaine chose que nous pouvons passer à laisser aller de l'avant et ajouter le bouton de soumettre à la fin juste pendant que nous sommes ici.
Donc, cela va être type de saisie égale à soumettre.
Et assurez-vous que la validation fonctionne.
Oui, il fait très bien en bonne forme.
Donc next up, nous avons un e-mail et un champ de mot de passe.
Et ceux qui sont sur la nouvelle ligne ainsi.
Alors allons de l'avant et ajouter un autre div et nous allons faire une entrée et cette fois c'est type est égal à e-mail.
Ce n'est pas seulement du texte et l'espace réservé ici était votre e-mail qui n'est certes pas le meilleur texte réservé mais nous allons nous en tenir à cette image assurez-vous que nous suivons la mission.
Donc, le type d'entrée est e-mail placeholder est votre e-mail et puis nous avons un autre pour le mot de passe et qui nous donne deux entrées.
Ensuite, nous pouvons soit aller avec le nom de façon à juste dire le nom est e-mail ici membre au cas où vous êtes confus.
Ce nom est purement utilisé dans les coulisses pour comprendre comment envoyer les données à quoi devrions-nous envoyer les données dans la requête sous Quel est le nom de celui-ci.
Donc, dans ce cas, tout ce que nous tapons dans ce champ va être appelé e-mail.
Nous ne voyons donc aucun impact au cas où.
Je pense que c'est l'une des parties les plus déroutantes parce que ce n'est pas très visuel.
Donc, celui-ci va dire nom était mot de passe, puis allons-y et ajouter ou des étiquettes.
Donc, juste pour le mélanger ici je vais utiliser l'autre type d'étiquette qui est où nous nicher les données à l'intérieur de l'étiquette elle-même.
Donc, dire e-mail colonnes plutôt que les quatre et la syntaxe Id.
Ils fonctionnent de la même manière que nous allons faire e-mail et mot de passe.
Soyons très précis.
Il y a deux points sur les deux.
Génial.
Mais sauf cela et il ya une autre chose que nous devrions jeter un oeil à et voir les validations sont en place remplissez-le.
Non.
Donc, une chose que nous manquons est que nous devons exiger le courrier électronique.
Donc, nous devons aller à notre e-mail et ajouter des exigences maintenant nous rafraîchir remplir ces.
Nous laissons un e-mail vierge si nous saisissons un e-mail non valide.
Nous recevons cette erreur.
Génial.
Donc, jusqu'à présent tout semble bien.
Nous allons revenir à la validation du mot de passe de bonus à la fin avant d'arriver là.
Passons à la sélection anniversaire.
Donc, trois menus déroulants.
Donc, encore une fois, vous pouvez ajouter un autre div et cette fois dans ce div, nous allons ajouter trois sélections différentes.
Alors un deux trois.
Commençons par cette première qui est de quatre mois et nous allons aller de l'avant et de commencer avec le label.
Il n'y a qu'une étiquette ici pour tout.
Donc, vous savez le faire comme ce label et mettre les trois sujets à l'intérieur et ce label allait dire un anniversaire et ça va ressembler à ça.
Donc, si nous voyons ce que nous obtenons, nous avons nos trois entrées sont trois étiquettes et tout ce que nous devons faire est d'ajouter dans les données correctes à l'intérieur.
C'est donc un tas d'options.
Donc, le premier, allons-y et j'ajouterai que je vais faire deux ou trois ici, donc ce sera pendant des mois.
Nous ferons donc Jan et Mars.
Le suivant fait la même chose.
Juste quelques options et ce sera pour la journée.
Nous allons donc commencer.
Faisons les doubles chiffres à 10 11 et 12.
Et le dernier sera l'année.
Il suffit de faire trois encore et de faire 1999 2000 2001.
Génial.
Et vous pouvez voir que nous avons notre tombé ici.
Il ya une petite différence cependant qui est que notre départ tout de suite avec Janvier et les chiffres et l'année.
Mais celui que je vous ai donné commence avec mois jour et année.
Donc, il ya quelques façons de le faire.
Le plus simple est juste de faire la toute première option de dire mois jour et année et en faisant que HDMI la forme choisit juste la toute première option et il décide que la valeur initiale.
C'est donc la façon la plus courante de le faire.
Donc, maintenant notre entreprise semble assez bonne.
Nous avons juste besoin de notre final Je suis d'accord aux termes et conditions case à cocher pour que nous puissions ajouter encore une autre div ici et puis c'est correctement div final au lieu de celui-ci nous allons commencer avec le label cette fois faisons quatre et celui-ci allons appeler Il faut l'appeler convenu.
J'ai accepté les termes et conditions et puis la prochaine chose que nous avons besoin est notre bande d'entrée tapez checkbox let's lui donner ID parce que j'ai accepté et le nom et aussi convenu.
Et c'est ce que nous obtenons semble bon pour moi.
Donc, une chose que nous devons également ajouter à nos balises de sélection est le nom.
Alors allons juste appeler ce mois-ci et celui-ci de la journée et celui-ci sera ici.
Et rappelez-vous que si nous ne voulions pas en Janvier et fab et Mar pour être ce qui a été réellement envoyé par si il voulait qu'il soit quelque chose de différent comme un nombre correspondant, nous mettre une valeur ici.
Donc, pour Jan, nous pourrions mettre la valeur 1 dans ce cas.
Je suis très bien d'avoir Jan ici.
Je n'ai pas précisé comment il doit se comporter.
Donc nous revenons ici il semble assez bon.
Tout semble le même.
La dernière chose que nous avons vraiment à discuter est la validation de mot de passe.
Donc, je veux juste vous montrer comment vous pourriez aller à trouver cela.
Donc, je vais juste ouvrir la validation de longueur HMO et essayons ça.
Comme vous pouvez le voir, j'ai déjà été ici.
C'est quelque chose que j'ai dû chercher récemment et il semble.
Donc c'est Stack Overflow par la façon dont si vous n'avez pas vu cela avant.
Cela permet à quelqu'un de poser une question.
Existe-t-il un autre attribut l'âge il là-bas avec l'aide de laquelle je peux définir la longueur minimale de la valeur pour les champs.
Et puis les gens fournissent des réponses et les réponses les plus votées apparaissent en premier.
Donc, cette réponse dit que vous pouvez utiliser l'attribut pattern, l'attribut requis est également nécessaire.
Sinon, un champ d'entrée avec une valeur vide sera exclu de la validation de contrainte.
D'ACCORD.
Donc, il semble que c'est tout ce dont nous avons besoin.
Donc, c'est une entrée que nous lui donnons patron égale cette chose bizarre regardant.
Et puis exigé, puis ce titre.
Donc, avant même de nous poser des questions sur ce que cela fait et ce que ce 5 commun 10 fait.
Voyons voir.
Alors allons de l'avant trouver notre mot de passe et c'est beaucoup de quoi.
Être un développeur, c'est beaucoup de copier et coller certaines choses ou trouver du code et le peaufiner.
Donc, nous devons faire ce que nous avons ce qui est un nom d'entrée est le type de mot de passe parce que mot de passe.
Il suffit donc de copier ces trois attributs.
Alors maintenant, nous avons le type de son mot de passe est de cinq et 10 requis.
Et le titre est égal à cinq à dix caractères.
Alors voyons ce que cela rafraîchit.
Assurez-vous d'avoir tout le reste rempli.
Je clique sur soumettre et il me dit s'il vous plaît remplir ce champ.
Cinq à dix caractères et type 2 et type 3 et le type plus de 10 ne fonctionne pas.
Mais si je tape cinq ou six il ne fonctionne.
Alors explorons un peu plus.
Commençons par celui-ci.
Changeons cela.
Le mot de passe doit avoir entre cinq et dix caractères et être actualisé.
Assurez-vous que nous remplissons tout le reste afin que nous puissions obtenir cette erreur.
Et je clique sur soumettre et vous pouvez voir que je reçois que le message que nous définissons le mot de passe doit être entre 5 et 10 caractères.
C'est ce que ce titre fait.
C'est essentiellement le message d'erreur qui s'affiche.
Donc, l'autre partie nouvelle est ce modèle et cela est certes un peu bizarre, mais en utilisant cette syntaxe, nous sommes juste la définition de la longueur d'une gamme de pleine longueur qui est acceptable pour cette entrée.
Donc, si nous changeons cela pour être de deux à trois, je soumets encore pas acceptables non acceptables, mais deux est acceptable.
Il s'agit donc simplement de définir une gamme ou un modèle que nous devons suivre.
Donc, il ya certainement plus à ce que vous pouvez faire d'autres choses en plus d'une longueur minimale ou une gamme de longueurs, mais c'est tout ce dont j'ai besoin que vous trouver ici.
Si vous étiez incapable de trouver qui ne panique pas il est encore très tôt.
Mais il va y avoir plus d'occasions pour vous d'essayer des choses comme ça.
Donc, j'ai une solution complète que j'ai rédigée qui est complète en ce qu'elle a la journée entière et l'année et les entrées de mois et vous pouvez voir c'est un peu un gâchis.
Je n'ai pas écrit ceci à la main et je ne m'attendais pas à ce que vous écriviez ceci à la main non plus.
Nous allons donc voir comment générer cela plus tard dans la classe.
Vous pouvez utiliser javascript pour le faire pour vous afin que vous n'avez pas vraiment à écrire cette off.
Alors jetez un oeil à la solution.