En welkom terug.
We gaan in op wat meer geavanceerde tags en waarschijnlijk de belangrijkste tag die u zult gebruiken, behalve degene die we
tot nu toe hebben behandeld, zijn tags die we nodig hebben om formulieren te maken.
Zoals u weet, is er bij het bezoeken van websites meestal een soort login- of registratieformulier.
Dus we gaan dat vandaag uitbouwen om aan de slag te gaan.
Laten we hier gewoon een nieuw bestand maken.
We slaan het op en noemen het geregistreerde HTML op onze desktop.
Perfect, en we weten dat we ook onze kleine snelkoppeling willen gebruiken en we zullen het register noemen, sla dat maar op.
En laten we nu in het indexbestand nog een link toevoegen.
Dat verwijst naar register dot html en ik zeg hier gewoon, registreer.
Goed, we slaan beide bestanden op en laten we vernieuwen, we hebben register.
Klik op registreren.
Nou, we hebben nog niets, maar het lijkt erop dat het werkt, laten we dit toevoegen aan een nieuwe regel, gewoon omdat
het er zo mooier uitziet.
Dus om dat te doen, als je het je herinnert, gaan we een remlabel toevoegen.
Dus laten we opfrissen.
Daar ga je.
We hebben een nieuwe pagina en inschrijven.
OK, dus laten we dit formulier verder uitwerken als we DOT gaan registreren.
De manier waarop we formulieren in HTML schrijven, terwijl er handig een formuliertag is.
OK, maar deze formuliertag zelf moet de werkelijke vorm erin hebben.
Dus wat voor soort vormelementen hebben we?
Nou, nogmaals, als we ons onze goede oude vriend W drie C herinneren, laten we dan formulieren typen.
En we kunnen hier zien dat we een kleine boerderij hebben.
En verversen zal dat schermvullend maken en je kunt hier zien dat er heel veel informatie op
staat, maar dat kun je voorlopig zelf opzoeken.
Ik ga je kennis laten maken met de meest voorkomende, waarschijnlijk degene die je 90 procent van de tijd zult
gebruiken.
De eerste, zoals we met elke vorm doen en laten we voorlopig naar die basis gaan, is wat we onze naam willen
invoeren.
Dus hoe doen we dat?
We hebben een invoerlabel.
Dat heeft een soort tekst omdat, nou ja, onze naam zal in tekstvorm zijn en we kunnen dat afsluiten en het is
eigenlijk een zelfsluitende tag.
Dus als ik nu opsla en ververs, OK, we hebben hier een kleine doos.
Hopelijk kun je dat zien.
Maar goed, we zouden het waarschijnlijk een titel moeten geven, omdat we niet weten wat we op die manier moeten antwoorden.
Dus we gaan hier plaatsen.
We gaan de voornaam zeggen.
Puntkomma en opslaan, laten we vernieuwen, we hebben de voornaam en laten we dit nu een beetje groter maken.
Daar ga je.
Nu kunt u hier uw naam invullen.
Geweldig.
Laten we er nog een toevoegen voor onze achternaam.
En nogmaals, we hebben ons invoertype, dus dat is een attribuut en een waarde van tekst.
En als we verversen, hebben we achternaam, oké, maar het ziet er lelijk uit, onthoud dat HTML gewoon regel voor regel leest
en niet echt weet dat we hier een spatie willen.
Dus nogmaals, we kunnen een toevoegen.
Kom hier terug en ververs, en we hebben voornaam en achternaam.
OK, dat is vrij duidelijk.
Wat hebben we nog meer in een vorm?
We hebben e-mail.
Laten we dus nog een veld toevoegen, namelijk e-mail, en we zullen de invoer opnieuw doen.
Typ oproepen, sms.
Voeg hier nog een pauze toe, want we hebben die ruimte nodig.
En laten we refresh opslaan, geweldig.
OK, dus we hebben ons algemene registratieformulier.
En natuurlijk hebben we bij elk formulier een soort van knoppen nodig, bijvoorbeeld, we moeten dit ergens indienen zodat we ons
kunnen registreren.
Nou, nogmaals, daar is een goede eetlust voor.
We doen dus invoer in plaats van een teksttype.
Er is een verzendtype.
Dus dit.
Als we hier nog een inbraak hadden.
En ik zeg dit, ik ververs het heeft een top.
Nu, waar kwam deze top vandaan?
Welnu, wanneer u een invoertype indient, wordt er automatisch een knop gemaakt.
En als je niet specificeert wat je moet zeggen, heb ik alleen deze tekst.
Maar we kunnen dat veranderen, zodat we waarde kunnen toevoegen.
En we zullen register plaatsen.
Bewaar die verversing, we hebben nu een registerknop.
OK, maar wat als we fouten maken op dit gebied, we schrijven dingen en waarvoor we dit willen resetten,
nogmaals, daar is nu input voor.
En het type van die ingang, zoals je je kunt voorstellen, wordt gereset.
Dus als we dit nu bij een andere onderbreking hier sluiten, kunnen we dat eigenlijk op dezelfde regel
houden, we besparen verversing.
En we hebben een reset gedaan, dus als ik hier iets typ en laten we zeggen dat ik het niet goed wil, ik vind dit niet leuk, dan
moet ik het formulier opnieuw instellen.
Ik kan gewoon op reset klikken en het wist alles voor ons.
Oké, je vraagt je misschien af wat er gebeurt als we op registreren klikken voordat we daarop ingaan. Ik wil gewoon alle
gebruikelijke invoertypes doornemen en dan klikken we op registreren om te zien wat er met
de e-mail gebeurt.
We willen in de eerste plaats dat het verplicht is, zodat u zich niet kunt registreren als u
op registreren klikt en u geen e-mailadres heeft opgegeven.
En er is een attribuut dat we daarvoor kunnen gebruiken en dat is vereist.
En hier hoeven we eigenlijk geen waarde op te geven, omdat automatisch wordt aangenomen dat vereist gelijk is aan
waar, wat betekent dat dit formulierveld vereist is.
Dus als ik zeg dat ik ververs en ik laat het leeg en ik klik op registreren, dan zal ik zeggen, vul dit veld alstublieft
in.
Nu willen we er ook zeker van zijn dat het een geschikt e-mailveld is, dus als ik zoiets typ, willen we er
zeker van zijn dat, weet je, dit een onjuiste e-mail is.
We willen niet inschrijven.
Dus het invoertype tekst dat ik je voor e-mail heb verteld, is eigenlijk verkeerd, er is een specifieke die we
kunnen gebruiken, en dat is, zoals je je kunt voorstellen, e-mail.
Dus als ik nu ververs en iets typ dat geen e-mail is en ik klik op registreren.
Ik zal zeggen gelieve een en het e-mailadres.
Erg fijn.
Het is een soort magie, het doet dit voor je, wat heel erg leuk is.
Laten we onze kennis van invoer uitbreiden en nog een paar velden toevoegen die hoogstwaarschijnlijk de
verjaardag van iemand willen weten.
Dus laten we hier verjaardag toevoegen.
En laten we voor dit invoertype typen.
Datum.
Dus als ik dit zeg en ik ververs, kijk dan dat we een leuke datumkiezer hebben, zodat ik hier alles kan uitkiezen.
Oké, wat hebben we nog meer nodig?
We hebben ook geslacht nodig, dus we doen invoertype en voor geslacht.
Er is geen specifieke behoefte aan geslacht, maar er is iets dat radio wordt genoemd.
En radio is, zoals de naam al doet vermoeden, keuzerondjes.
Dus nu.
Klik op vernieuwen en, nou, ik heb één keuzerondje, maar we willen idealiter opties hebben, toch?
Dus hoe doen we dat?
Dus voor de radio moeten we ook zeggen of het een man of een vrouw is, laten we het binnen het geslacht hebben.
We gaan hier in de rij even pauzeren en we zullen het zeggen.
En typ radio en we zeggen mannelijk en we willen ook.
Vrouwelijk.
En we willen ook.
Ander.
En als we dit vernieuwen, hebben we mannelijke, vrouwelijke en andere, maar je ziet hier een probleem, ik klik gewoon op de keuzerondjes en ik
kan ze niet deselecteren en idealiter kun je dat wel.
Je zou er maar één moeten kunnen selecteren.
En zoals de radioknoppen nu zijn, weten ze niet van elkaars bestaan.
We willen ervoor zorgen dat ze weten dat ze verbonden zijn, dat ze familie zijn en dat er maar één van hen kan worden
gekozen.
Dus hoe doen we dat?
De manier waarop we dat doen, is via het attribuut name.
Dus voor de naam zal geslacht zeggen.
En dit naamkenmerk moet overeenkomen met alle keuzerondjes, zodat ze weten dat ze bij elkaar zijn, ze maken deel uit
van het invoerveld voor geslacht.
Dus als ik hier opsla en ververs.
Nu kun je zien dat ik er maar één kan selecteren.
Oké, perfect.
Wat moeten we nog meer hebben?
Laten we zeggen dat ik echt wil weten of je huisdieren hebt.
Dus met huisdieren.
We hebben een invoertype of je kunt meerdere huisdieren hebben, dus het zijn geen keuzerondjes, we willen een selectievakje.
Dus checkbox, we wilden katten of honden hebben, maar kat en we willen hebben.
Kan vandaag niet typen.
Selectievakje, en we willen honden hebben.
Dus laten we dat bewaren, laten we opfrissen en daar naar kijken, we hebben huisdieren, maar deze keer zijn het selectievakjes, wat
betekent.
Ik kan meerdere selecteren.