Dus in deze video gaan we om verder te gaan en een oplossing voor dit inschrijfformulier.
Dus ik heb een nieuw bestand gaan om het op te slaan.
Ik ga gewoon dit inschrijfformulier noemen HDMI ik mijn sublieme snelkoppeling zult gebruiken en onze boiler ketel plaat gaan.
Dus als we geconfronteerd met een project als dit is er een flink aantal plaatsen die we konden beginnen.
En het eerste wat ik ga doen is de vorm Tagen en dan ga ik ook naar deze H1 gewoon top hier toevoegen en Louis gezet te registreren.
Dus laten we gaan door en opent ons inschrijfformulier hier en verplaats het over.
Ok, nog niet, maar in ieder geval of Ieder ziet er goed uit niet helemaal.
Dus laten we terug naar subliem te gaan en laten we steken laten we beginnen met de eenvoudigste ding dienen deze dit hoogste niveau van ingangen.
De voornaam en achternaam.
Dus we beginnen met input.
En dat zijn soort gelijken tekst ups.
En laten we het eens een placeholder die eruit ziet zoals het hoort John laten we nog een placeholder Smith en dan moeten we twee labels geven.
Dus konden we ofwel syntax voor labels gebruiken.
Ik ga naar de vier te gebruiken.
Dus ik zal dit eerst bellen en we zullen ervoor zorgen dat we een ID gelijk is aan de eerste.
En dan is dit label zal zeggen voornaam colon die ons dat zal geven en dan moeten we precies hetzelfde doen.
Een ander label voor de laatste van zeggen een achternaam dikke darm en dan moeten we geven dit ID is gelijk aan de laatste.
Dus laten we in te checken en te zien wat we hebben.
So far so good.
Er is een klein ding dat we missen wat we niet deze ingangen een naam hebt gegeven, zodat geef het eerst de naam en de naam van de laatste grote.
Dus laten we verder gaan naar het volgende stuk hier.
Wat we eigenlijk ontbreekt een ding dat is de validaties.
Dus terwijl we hier niet vergeten dat de voornaam en achternaam niet verondersteld leeg te zijn.
Dus om dat te doen is het heel simpel we de vereiste attribuut toe te voegen aan de vereiste inputs en zet dat om waar te zijn.
Dus ik ga om verder te gaan en uit te breiden dit gewoon zo dat we een beetje duidelijker waar we mee bezig zijn kunnen zien.
Dus de volgende ding als we het formulier hier te raadplegen is het geslacht radioknop.
Dus moeten we drie radio knoppen.
Dus dat zijn input type gelijk radio.
Drie van hen.
En als we een kijkje te nemen bij dat geeft ons eerst wat je ziet is dat ze in lijn met de andere elementen die niet is eigenlijk wat de vorm die ik je gaf verondersteld wordt te lijken.
Dus we hebben een paar opties om dingen te gedragen te krijgen.
We kunnen ze gooien in een paragraaf als deze slechts enkele afstand toe te voegen.
Nu krijgen we ze op een aparte regel.
Ik ga gewoon naar een div hier te gebruiken.
Daar ga je in een div.
Niet helemaal dezelfde afstand.
Een paragraaf heeft in de C S video daadwerkelijk zal praten over wat die afstand is.
Dus nu moeten we verder gaan en toe te voegen of etiketten en voordat we dat doen laten we daadwerkelijk beginnen geef ze dezelfde naam, zodat naam geslacht hier zal zijn.
Laten we doorgaan en moet mijn shortcut heb gebruikt hier namelijk het commando klik op meerdere cursors zodat we ze benoemen van cross-gender en dan laten we geven ze elk een waarde.
Zodat de eerste de waarde mannelijk.
Tweede zal vrouwelijk zijn.
De laatste is ofwel en refresh.
We zien niet een van die natuurlijk, want dat is net achter de schermen.
Dus wat we moeten doen is aan onze labels.
Dus we gaan drie labels willen.
Eerste één gaan label vier te zeggen en we zullen gewoon noemen mannelijke teated we hier hebben.
Geen Colon's dus gewoon mailen en dan Id gelijk mail.
Hetzelfde.
Een ander label hier.
Deze zal vrouwelijk zijn.
En dan gaan we willen zeggen Id me voor u vrouwelijke veroorzaken.
En dan ga je naar ID zeggen dat je vrouwelijke veroorzaken.
Dus zoals je kunt zien de bouw van deze formulieren wordt het soms een beetje vervelend.
Je hebt een heleboel labels en een heleboel rotzooi dingen die je alleen maar extra voorzichtig zijn dat je alles goed overeenkomt met zijn.
Daarom willen wij voor andere Ik bedoel, we willen ID doen gelijken niet.
Dus laten we gewoon inchecken op dit te zien wat we hebben.
Okee.
Dat ziet er goed uit.
We kunnen alleen maar kiezen een die is wat we willen.
Volgende wat kunnen we overgaan tot laten we gaan door en voeg de submit knop op het einde net terwijl we hier zijn.
Dus dat gaat input type zijn gelijk aan te leggen.
En laten we maar zorg ervoor dat de validatie werken.
Ja, het doet grote in goede vorm.
Dus de volgende up hebben we een e-mail en een wachtwoord veld.
En die zijn op de nieuwe lijn ook.
Dus laten we gaan door en voeg een andere div en we gaan op een ingang te doen en dit keer is het soort gelijk aan e-mail.
Het is niet alleen tekst en placeholder was hier uw e-mail, die weliswaar niet de beste placeholder tekst maar we gaan vast te houden aan dat het ervoor zorgen dat we de opdracht te volgen.
Dus input type is e-mail placeholder is uw e-mail en dan hebben we een andere voor het wachtwoord en dat geeft ons twee ingangen.
Next up kunnen we ofwel gaan met de naam dus om gewoon te zeggen naam email hier lid voor het geval dat je in de war bent.
Die naam wordt uitsluitend gebruikt achter de schermen om erachter te komen hoe u de gegevens wat moeten we de gegevens in het verzoek op grond Wat is de naam van het te verzenden stuur.
Dus in dit geval wat we typen op dit gebied zal worden genoemd e-mail.
Dus we hebben geen gevolgen voor het geval zien.
Ik denk dat dit een van de meest verwarrende delen, want het is niet erg visueel.
Dus dit zal men zeggen naam was vergeten en laten we dan ga je gang en toe te voegen of labels.
Dus gewoon om het te mengen hier zal ik de andere soort label te gebruiken dat is waar we het nest van de gegevens in het label zelf.
Dus zal zeggen e-mail colon in plaats van de vier en Id syntax.
Ze werken op dezelfde manier laten we het e-mailadres en wachtwoord te doen.
Laten we zeer nauwkeurig.
Er zijn zuilen op beide.
Grote.
Maar behalve dat en er is een ander ding dat we een kijkje nemen op moet nemen en te zien zijn validaties worden op hun plaats deze in te vullen.
Nee.
Dus een ding dat we missen is dat we nodig hebben om de e-mail nodig.
Dus moeten we naar onze e-mail en voeg nu verplicht we frissen vullen deze uit.
We verlaten e-mail leeg als we type in een niet-valide e-mail.
Wij krijgen deze fout.
Grote.
Tot nu toe ziet alles er goed uit.
We gaan terug naar de bonus wachtwoord validatie komen aan het einde voordat we er zijn.
Laten we verder gaan om de verjaardag te selecteren.
Dus drie dropdown menu's.
Dus nogmaals kunt u een andere div en deze keer toe te voegen in deze div gaan we drie verschillende selecteert toe te voegen.
Dus een twee drie.
Laten we beginnen met de eerste die vier maanden en laten gaan en beginnen met het label.
Er is maar één label hier voor alles.
Zo weet u doen als dit label en zet alle drie onderwerpen binnen en dit label zou gaan om een ​​verjaardag te zeggen en het gaat om te kijken als dat.
Dus als we zien wat we krijgen hebben we onze drie ingangen zijn drie labels en alles wat we moeten doen is toe te voegen in de juiste gegevens in.
Dus dat is een heleboel opties.
Dus de eerste laten we gaan door en voeg ik ga gewoon doen twee of drie hier dus dit zal zijn voor maanden.
Dus we zullen doen Jan en maart.
De volgende hetzelfde doen.
Slechts een paar opties en dit zal voor de dag.
Dus we beginnen.
Laten we de dubbele cijfers bij 10 11 en 12.
En de laatste zal het jaar.
Gewoon doen drie opnieuw en laten we het doen 1999 2000 2001.
Grote.
En je kunt zien we onze daalde hier naar beneden.
Er is een klein verschil maar die is dat onze start meteen met januari en cijfers en het jaar.
Maar degene die ik je gaf begint met de dag en het jaar maand.
Dus er is een paar manieren om dat te doen.
De eenvoudigste is gewoon om de eerste optie zeggen dag en jaar maand en door dat te doen HDMI zal de vorm gewoon pakt de eerste optie en het besluit dat de oorspronkelijke waarde.
Dus dat is de meest voorkomende manier om dat te doen.
Dus nu ons kantoor ziet er goed uit.
We hoeven alleen maar onze laatste Ik ga akkoord met de voorwaarden checkbox zo kunnen we nog een andere div hier toe te voegen en dan is dat de juiste uiteindelijke div in plaats van deze ene we gaan laten we beginnen met het label deze keer laten we de vier en noemen dit één laten we het laten we noemen overeengekomen.
Ik ingestemd met de voorwaarden en dan de volgende ding dat we nodig hebben is onze inbreng tape noemt checkbox laten we het ID, omdat ik afgesproken en de naam en het ook eens.
En dat is wat we krijgen er goed uitziet voor mij.
Dus een ding dat we moeten ook toe te voegen aan onze select-tags is de naam.
Dus laten we deze maand bellen en dit een van de dag en dit zal men hier te zijn.
En vergeet niet dat als we niet willen dat in januari en fab en Mar te zijn wat was eigenlijk verzonden via als hij wilde dat het iets anders als een getal dat overeenkomt we zouden een waarde zetten hier te zijn.
Dus voor Jan kunnen we de waarde 1 gezet in dit geval.
Ik ben prima met gewoon Jan daar.
Ik wilde niet aangeven hoe het moet gedragen.
Zo komen we weer hier het ziet er goed uit.
Alles ziet er hetzelfde uit.
Het laatste wat we echt moeten bespreken, is de werkelijke wachtwoord validatie.
Dus ik wil je gewoon laten zien hoe je zou kunnen gaan over het vinden van dat.
Dus ik ga gewoon om open te stellen HMO lengte validatie en laten we proberen dat.
Zoals je kunt zien heb ik eigenlijk al hier geweest.
Dit is iets wat ik moest onlangs opzoeken en het lijkt erop dat.
Dus dit is stack overflow door de manier als je dit niet eerder hebben gezien.
Hierdoor kan iemand om een ​​vraag te stellen.
Is er een ander attribuut ouder hem daar met behulp waarvan ik een minimale lengte van waarde kunt instellen voor velden.
En dan zullen de mensen geven antwoord en de hoogste gestemd antwoorden eerst verschijnen.
Dus dit antwoord zegt dat je kunt gebruik maken van het patroon schrijven de benodigde attribuut is ook nodig.
Anders is een invoerveld met een lege waarde zal worden uitgesloten van de beperking validatie.
OK.
Dus het lijkt erop dat dit is alles wat we nodig hebben.
Dus dit is een input die we geven het patroon evenaart dit vreemd uitziende ding.
En dan is deze titel nodig is en vervolgens.
Dus voordat we zelfs vragen over wat dit ook doet en wat deze vijf gemeenschappelijke 10 doet.
Laten we gewoon zien.
Dus laten we doorgaan vinden onze wachtwoord en dit is veel van wat.
Als een ontwikkelaar is het is een stuk van kopiëren en plakken van een aantal dingen of het vinden van een code en tweaken het.
Dus moeten we dit fit wat we hebben die een input naam te maken met een wachtwoord is het type want wachtwoord.
Dus gewoon gaan deze drie eigenschappen te kopiëren.
Dus nu hebben we typt zijn wachtwoord patroon is vijf en 10 nodig.
En titel is gelijk aan vijf tot 10 tekens.
Dus laten we eens kijken wat dat betekent dit vernieuwen.
Zorg ervoor dat we alles anders ingevuld.
Ik klik op Verzenden en het vertelt me ​​vul dan dit veld.
Vijf tot 10 tekens en type 2 en type 3 en type meer dan 10 werkt niet.
Maar als ik typ vijf of zes het werkt.
Dus laten we verkennen een beetje meer.
Laten we beginnen met deze hier.
Laten we dit veranderen zijn.
Wachtwoord moet tussen de vijf en 10 tekens en refresh.
Zorg ervoor dat we invullen alles, zodat we deze fout kunnen krijgen.
En ik klik op versturen en je kunt zien dat ik die boodschap dat we stellen wachtwoord moet tussen de 5 en 10 tekens te krijgen.
Dus dat is wat deze titel doet het.
Het is eigenlijk het foutbericht dat wordt weergegeven.
Dus dan de andere nieuwe deel is dit patroon en dit is weliswaar een beetje raar, maar met behulp van deze syntaxis we gewoon het definiëren van de lengte van een reeks van volledige lengte die aanvaardbaar zijn voor deze ingang is.
Dus als we dit veranderen om 02:58 in te dienen ik nog steeds niet aanvaardbaar die niet acceptabel, maar twee is aanvaardbaar.
Dus dit is gewoon het definiëren van een bereik of patroon dat we moeten volgen.
Er is dus zeker meer van deze kun je andere dingen te doen naast een minimale lengte of een reeks van lengtes, maar dat is alles wat ik je nodig om hier te vinden.
Als u niet in staat om uit te vinden waren die niet in paniek het is nog erg vroeg op.
Maar er zullen meer mogelijkheden voor u om dat soort dingen te proberen.
Dus ik heb een volledige oplossing die ik schreef dat is voltooid in dat het de hele dag en het jaar en de maand ingangen en je kunt zien dat het een soort van een puinhoop.
Ik heb dit niet schrijven met de hand en ik had niet verwacht dat je dit ofwel te schrijven met de hand.
Dus we zullen zien hoe dit daadwerkelijk te genereren later op in de klas.
Je zou kunnen javascript gebruiken om het voor u doen, zodat je niet daadwerkelijk naar deze af te schrijven.
Dus neem een ​​kijkje op de oplossing.