Dus in deze video gaan we over drie extra manieren om input van de gebruiker te praten.
De eerste de radio knop is eigenlijk alleen maar een ander type van de input-tag die we hebben gezien.
Het is vergelijkbaar met een checkbox.
De volgende de select tag is hoe we dropdown menu's.
En tot slot gaan we het hebben over de tekst gebied dat is hoe we de tekst inputs die meerdere regels lang zijn kunnen creëren.
Dus ik ga om te beginnen natuurlijk met die standaard HMO standaardtekst.
Ga je gang en voeg in de titel, behalve dat en laten we gaan door en voeg een radio-knop.
Dus het is gewoon input type omdat radio.
En ik ga het dupliceren en ik ga naar de andere één type geven, want checkbox gewoon zo kun je ze naast elkaar te zien.
Dus dit is een radio-button hier.
Ik kan niet uitgeschakeld nadat ik deze heb gekozen.
Dit is een checkbox die ik aan en uit kunt zetten.
Dus het verschil is echt dat een checkbox waarmee een gebruiker om deze te selecteren of niet-geselecteerde te hebben laten we zeggen dat er vijf verschillende keuzes van de dingen die een gebruiker kan controleren.
Laten we zeggen dat we vragen gebruikers om hun kiezen.
Dit is een bouwterrein en we willen dat ze hun vaardigheden te selecteren.
We willen dat ze in staat zijn om javascript te zeggen en te zien als een HMO of misschien alleen javascript en ze zijn gewoon een stel checkboxes dat ze controleren op en korting op onze radio-knop.
Maar het wordt meestal gebruikt wanneer een gebruiker een keuze heeft.
Dus een voorbeeld doorgaans op Websites moeten iets zoals geslacht, waar het u vraagt ​​om man of vrouw of een ander te controleren.
En je hebt maar één keuze.
Je kan je niet weet niet selecteren.
Je moet een van de elementen te halen om zo te doen, dat laten we zeggen bijvoorbeeld dat we gaan een formulier waarmee gebruikers kiezen als ze katten of honden liever en er is geen mogelijkheid om beide te halen hebben.
Helaas is het in deze wereld is het zwart of wit of liever katten we de voorkeur aan honden.
Dus om dat te doen gaan we twee radio knoppen.
En als dat is alles wat we doen om te beginnen kan ik kies er een en ik kan ook de andere pick.
Niet helemaal wat we willen.
Ik wil alleen maar in staat zijn om er een te kiezen.
Dus het eerste wat ik wil doen is een formulier te gaan en ik ga mijn input verplaatsen in die vorm.
En nu zijn we gewoon gaan om het te verlaten, zodat het is gewoon een get verzoek en het gewoon de standaard actie, die is alleen maar om de pagina te vernieuwen.
Het volgende dat we gaan doen is het toevoegen van een paar labels dus ik ga om verder te gaan en gebruik de vier syntax dus dit zal zijn voor honden.
En dan moeten we onze inbreng en geef I.D. honden.
Maar die moeten dan evenaren.
Hetzelfde hier.
Een ander label tag voor katten en dan Id katten.
Dus als je fris bent nu hebben we twee keuzes.
Maar ik kan nog steeds plukken beide.
Dus wat we moeten doen is hem vertellen hoe deze twee radio knoppen zijn voor dezelfde keuze, zodat je de ene of de andere kunnen halen, maar ze zijn een beslissing.
Dus om dat te doen moeten we de naam eigenschap die niet vergeten dat de naam is het geven van een persoon invoeren van een naam, maar m ik kan verwijzen naar het door te gebruiken en het is ook de manier waarop het wordt opgeslagen of verzonden in het HGP verzoek namen zijn belangrijk.
Dus laten we het hier een naam.
De eerste naam zal laten we gaan met noem het gewoon huisdier keuze laten we.
En dan op de input hier zijn we ook gaan om het exact dezelfde naam te geven.
En de reden waarom we dat doen zie je in slechts een seconde is dat door hen dezelfde naam geven dan verbindt hen, zodat we kunnen nu slechts één plukken.
Dus als we vernieuwen.
Ik kan honden of katten, maar niet beide klikken.
En nog een ding dat ik zal je laten zien.
Laten we een toevoegen aan het einde van het formulier.
En wat we tot nu toe gezien is eigenlijk input type gelijk bij de bodem van een vorm, maar ik ben tonen u een knop gewoon om te laten zien dat, als de knop is het laatste wat in een vorm die hij in feite zal het formulier .
Dus er zijn een paar opties van de ingangen om het formulier daadwerkelijk in te dienen aan het einde knop aan het eind of input type u zal voorleggen.
Dus laten we nu plukken honden natuurlijk.
De enige logische keuze daar.
Herinner me de naam is huisdier keuze dus we hier iets zou moeten zien in de query string, net als bij elke andere ingangen.
Wanneer ik klik gaan zien we huisdier keuzes gelijk aan en vervolgens O N of waarop is niet echt wat we verwacht hadden.
Dus we missen een ding dat we moeten ook zeggen wat de waarde van deze beslissing is.
Dus als je gaat door en voeg de waarde tag binnenkant die waarde attribuut.
En laten we gewoon zeggen dat deze waarde zal gewoon hond te zijn en deze zal katten zijn en laten we goed alle doppen zijn gewoon zo dat je kunt zien wat er gaat komen van waar.
OK.
Dus er staat als de gebruiker op honden klikt onder de koosnaam keuze winkel de waarde honden in hoofdletters als de gebruiker indient en klikt op katten onder de waarde of de koosnaam keuze winkel de waarde katten in alle caps.
Dus gewoon om te laten zien dat je laten we op honden gaan en we krijgen huisdier keuze is gelijk aan honden.
Als we de katten doen krijgen we huisdier keuze, want katten.
Dus de volgende element we gaan praten over de select tag en met een select tag wat te doen is het creëren van mooi dropdown menu's.
Dus het naamplaatje wordt genoemd.
Het is gewoon te selecteren.
Het is een begin- en tag.
En als ik dat ook te doen en dan is het gewoon glijden en ik vernieuw mijn pagina.
Ik eigenlijk al een dropdown menu.
Het is gewoon helemaal leeg.
Dus samen met de select tag gebruiken we de optie tag.
Dus de binnenkant van er voor elke mogelijke optie die we willen gebruiken of op te halen we voegen een optie tag.
Dus laten we een dropdown die leidde tot de gebruiker kiezen hun favoriete kleur en laten we een paar opties hier.
Rood oranje en geel.
Dus zoals je kunt zien we alvast een mooie druppel hier neer met onze keuzes.
En als ik raakte ga laten selecteren oranje en ik raakte ga.
Je zult zien we niet echt iets op te staan ​​hier en daar ben je l zoals wij dat doen als we honden selecteren doen geel deze tijd en ze op te gaan.
Ik heb nog steeds alleen maar huisdier keus en dat is omdat we niet een naam die we bieden hebben.
Dus op onze select We moeten het een naam geven en laten we gewoon noemen het fav en laten we gewoon gaan met kleur en laat het daarbij.
En ik vernieuwen mijn pagina laten we klik katten laten we klik op geel en kijken hier als ik raakte gaan.
Ik krijg nu huisdier keuzes kat en de kleur is geel.
Dus wat je ziet is dat, afhankelijk van de optie die ik in dit geval geel hebt geselecteerd brengt de browser neemt wat dat de tekst is de binnenkant van die optie en het gewoon stuurt dat als een waarde onder de naam kleur.
Dus we willen niet altijd de waarde die mee in het verzoek wordt verzonden identiek aan wat wordt getoond aan de gebruiker in het dropdown te zijn.
Dus een voorbeeld van dat zou kunnen zijn zoiets als we wilden de gebruiker op te halen een sfeer dus laten we zeggen: Wat is uw huidige stemming en we willen een blij gezicht hier.
Een zeer emotieloze gezicht denk ik en een droevig gezicht.
En we eindigen met dit aardige daling hier neer met onze emoticons, maar laten we zeggen dat wanneer een gebruiker selecteert blij dat we willen niet dat dit alles moet worden verzonden.
In plaats daarvan willen we het woord blij te worden verzonden of het woord gezegd te worden gestuurd om dat te doen.
We maken gebruik van de waarde tag spijt de waarde attribuut.
Dus we zullen zeggen waarde gelijk.
En laten we zeggen Gelukkig is gelijk aan nul en waarde gelijk te stellen.
Nu als ik refresh juiste honden laten we gaan naar buiten en ik klik te gaan.
Je kunt zien dat ik krijg huisdier keuze is aan honden en de kleur is gelijk aan gezegd.
En dat is natuurlijk omdat we de naam als kleur die u zou willen dat de stemming te zijn gewoon zo dat onze markup betekenisvol veranderen onderhouden en daadwerkelijk zinvol.
Dus katten zijn zoooo blij en toch stemming is gelijk aan gelukkig.
OK.
Dus dat is alles wat we nodig hebben om te bedekken met selecteert.
Een ander ding is de textarea tag en textarea.
Ik zal het zetten op de Indiase is een leuke manier om ingangen die meer dan één regel worden opgeslagen.
Dus we hebben tekstinvoer gezien als deze input type is gelijk aan de tekst en ze zijn enkele lijnen.
Maar wat als we wilden een gebruiker vragen om een ​​bio of kopiëren en plakken van een cv of iets dat niet gaat om zeer goed te werken en dit echt slanke korte ingang.
Dus textarea Het is eigenlijk een andere tag, net als select.
Dus het is niet een ingang met een type.
Het is eigenlijk een apart soort vorm controle.
En de manier waarop het werkt er twee belangrijke onderdelen.
De eerste is dat we creëren een tekstgebied tag en dat op zijn eigen het gaat om ons deze tekst gebied.
Maar wat we ook doen, is precies aan te geven hoe groot die tekst gebied is het gebruik van deze twee attributen rijen en kolommen.
Dus ik zal je dat hier laten zien.
Laten we beginnen met 10 rijen en 50 kolommen en je kunt zien dat mijn textarea uitgebreid in beide richtingen.
Maar het zeker kregen breder.
Dus laten we zeggen dat ik wil nu 100 rijen en je kunt zien wordt het een stuk langer.
Dus in principe kunnen we aangeven hoeveel rijen en het aantal kolommen om de afmetingen van onze tekstgebied wijzigen.
Een ander ding over het is net als bij die andere elementen laten we teruggaan naar een kleinere tot 10 van 10.
Net als met die andere elementen als ik wilde deze gegevens in het verzoek te verzenden laten zich te ontdoen van deze ingang.
Ik nodig zou hebben om het een naam naam is gelijk aan te geven en laten we maar zeggen paragraaf vul deze paragraaf met wat tekst.
Ik klikte gaan en je kunt zien of uit te breiden dit.