1
00:00:00,600 --> 00:00:05,350
Dus in deze video gaan we over drie extra manieren om input van de gebruiker te praten.

2
00:00:05,370 --> 00:00:10,830
De eerste de radio knop is eigenlijk alleen maar een ander type van de input-tag die we hebben gezien.

3
00:00:11,010 --> 00:00:12,740
Het is vergelijkbaar met een checkbox.

4
00:00:12,780 --> 00:00:16,170
De volgende de select tag is hoe we dropdown menu's.

5
00:00:16,230 --> 00:00:22,290
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.

6
00:00:23,130 --> 00:00:26,900
Dus ik ga om te beginnen natuurlijk met die standaard HMO standaardtekst.

7
00:00:26,970 --> 00:00:33,570
Ga je gang en voeg in de titel, behalve dat en laten we gaan door en voeg een radio-knop.

8
00:00:33,750 --> 00:00:37,830
Dus het is gewoon input type omdat radio.

9
00:00:37,830 --> 00:00:46,570
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.

10
00:00:46,650 --> 00:00:48,900
Dus dit is een radio-button hier.

11
00:00:49,650 --> 00:00:51,850
Ik kan niet uitgeschakeld nadat ik deze heb gekozen.

12
00:00:51,870 --> 00:00:55,350
Dit is een checkbox die ik aan en uit kunt zetten.

13
00:00:55,470 --> 00:01:07,310
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.

14
00:01:07,320 --> 00:01:09,890
Laten we zeggen dat we vragen gebruikers om hun kiezen.

15
00:01:10,080 --> 00:01:12,800
Dit is een bouwterrein en we willen dat ze hun vaardigheden te selecteren.

16
00:01:12,900 --> 00:01:21,960
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.

17
00:01:21,960 --> 00:01:26,280
Maar het wordt meestal gebruikt wanneer een gebruiker een keuze heeft.

18
00:01:26,280 --> 00:01:36,210
Dus een voorbeeld doorgaans op Websites moeten iets zoals geslacht, waar het u vraagt ​​om man of vrouw of een ander te controleren.

19
00:01:36,600 --> 00:01:38,920
En je hebt maar één keuze.

20
00:01:39,000 --> 00:01:41,360
Je kan je niet weet niet selecteren.

21
00:01:41,430 --> 00:01:58,090
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.

22
00:01:58,110 --> 00:02:03,470
Helaas is het in deze wereld is het zwart of wit of liever katten we de voorkeur aan honden.

23
00:02:04,080 --> 00:02:07,430
Dus om dat te doen gaan we twee radio knoppen.

24
00:02:07,650 --> 00:02:15,600
En als dat is alles wat we doen om te beginnen kan ik kies er een en ik kan ook de andere pick.

25
00:02:15,600 --> 00:02:16,650
Niet helemaal wat we willen.

26
00:02:16,650 --> 00:02:18,780
Ik wil alleen maar in staat zijn om er een te kiezen.

27
00:02:19,080 --> 00:02:24,550
Dus het eerste wat ik wil doen is een formulier te gaan en ik ga mijn input verplaatsen in die vorm.

28
00:02:25,170 --> 00:02:31,290
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.

29
00:02:31,650 --> 00:02:45,360
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.

30
00:02:48,030 --> 00:02:51,570
En dan moeten we onze inbreng en geef I.D. honden.

31
00:02:51,650 --> 00:02:53,870
Maar die moeten dan evenaren.

32
00:02:53,880 --> 00:02:55,690
Hetzelfde hier.

33
00:02:55,980 --> 00:03:06,120
Een ander label tag voor katten en dan Id katten.

34
00:03:06,210 --> 00:03:08,360
Dus als je fris bent nu hebben we twee keuzes.

35
00:03:08,430 --> 00:03:10,160
Maar ik kan nog steeds plukken beide.

36
00:03:10,500 --> 00:03:20,550
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.

37
00:03:20,550 --> 00:03:36,000
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.

38
00:03:36,270 --> 00:03:37,580
Dus laten we het hier een naam.

39
00:03:37,620 --> 00:03:46,370
De eerste naam zal laten we gaan met noem het gewoon huisdier keuze laten we.

40
00:03:47,610 --> 00:03:51,890
En dan op de input hier zijn we ook gaan om het exact dezelfde naam te geven.

41
00:03:52,200 --> 00:04:02,260
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.

42
00:04:02,340 --> 00:04:03,510
Dus als we vernieuwen.

43
00:04:03,650 --> 00:04:08,510
Ik kan honden of katten, maar niet beide klikken.

44
00:04:10,050 --> 00:04:11,500
En nog een ding dat ik zal je laten zien.

45
00:04:11,520 --> 00:04:14,400
Laten we een toevoegen aan het einde van het formulier.

46
00:04:15,630 --> 00:04:27,800
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 .

47
00:04:27,870 --> 00:04:35,490
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.

48
00:04:35,490 --> 00:04:38,250
Dus laten we nu plukken honden natuurlijk.

49
00:04:38,250 --> 00:04:40,270
De enige logische keuze daar.

50
00:04:40,380 --> 00:04:48,710
Herinner me de naam is huisdier keuze dus we hier iets zou moeten zien in de query string, net als bij elke andere ingangen.

51
00:04:48,750 --> 00:04:58,020
Wanneer ik klik gaan zien we huisdier keuzes gelijk aan en vervolgens O N of waarop is niet echt wat we verwacht hadden.

52
00:04:58,110 --> 00:05:04,710
Dus we missen een ding dat we moeten ook zeggen wat de waarde van deze beslissing is.

53
00:05:04,710 --> 00:05:09,210
Dus als je gaat door en voeg de waarde tag binnenkant die waarde attribuut.

54
00:05:09,360 --> 00:05:28,010
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.

55
00:05:28,220 --> 00:05:28,690
OK.

56
00:05:28,790 --> 00:05:43,690
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.

57
00:05:44,000 --> 00:05:50,170
Dus gewoon om te laten zien dat je laten we op honden gaan en we krijgen huisdier keuze is gelijk aan honden.

58
00:05:50,360 --> 00:05:53,630
Als we de katten doen krijgen we huisdier keuze, want katten.

59
00:05:53,690 --> 00:06:01,260
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.

60
00:06:01,730 --> 00:06:03,300
Dus het naamplaatje wordt genoemd.

61
00:06:03,350 --> 00:06:04,510
Het is gewoon te selecteren.

62
00:06:04,690 --> 00:06:06,470
Het is een begin- en tag.

63
00:06:06,860 --> 00:06:10,860
En als ik dat ook te doen en dan is het gewoon glijden en ik vernieuw mijn pagina.

64
00:06:10,920 --> 00:06:13,040
Ik eigenlijk al een dropdown menu.

65
00:06:13,060 --> 00:06:14,890
Het is gewoon helemaal leeg.

66
00:06:14,930 --> 00:06:18,660
Dus samen met de select tag gebruiken we de optie tag.

67
00:06:18,940 --> 00:06:25,150
Dus de binnenkant van er voor elke mogelijke optie die we willen gebruiken of op te halen we voegen een optie tag.

68
00:06:25,430 --> 00:06:39,510
Dus laten we een dropdown die leidde tot de gebruiker kiezen hun favoriete kleur en laten we een paar opties hier.

69
00:06:39,590 --> 00:06:46,810
Rood oranje en geel.

70
00:06:48,680 --> 00:06:53,780
Dus zoals je kunt zien we alvast een mooie druppel hier neer met onze keuzes.

71
00:06:54,270 --> 00:06:58,330
En als ik raakte ga laten selecteren oranje en ik raakte ga.

72
00:06:58,940 --> 00:07:08,070
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.

73
00:07:08,210 --> 00:07:13,940
Ik heb nog steeds alleen maar huisdier keus en dat is omdat we niet een naam die we bieden hebben.

74
00:07:14,060 --> 00:07:21,360
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.

75
00:07:22,270 --> 00:07:29,170
En ik vernieuwen mijn pagina laten we klik katten laten we klik op geel en kijken hier als ik raakte gaan.

76
00:07:29,360 --> 00:07:33,810
Ik krijg nu huisdier keuzes kat en de kleur is geel.

77
00:07:34,460 --> 00:07:54,150
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.

78
00:07:54,170 --> 00:08:05,260
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.

79
00:08:05,260 --> 00:08:21,510
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.

80
00:08:23,120 --> 00:08:29,860
Een zeer emotieloze gezicht denk ik en een droevig gezicht.

81
00:08:31,780 --> 00:08:41,930
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.

82
00:08:42,200 --> 00:08:48,570
In plaats daarvan willen we het woord blij te worden verzonden of het woord gezegd te worden gestuurd om dat te doen.

83
00:08:48,670 --> 00:08:52,570
We maken gebruik van de waarde tag spijt de waarde attribuut.

84
00:08:52,750 --> 00:08:54,990
Dus we zullen zeggen waarde gelijk.

85
00:08:55,000 --> 00:09:04,720
En laten we zeggen Gelukkig is gelijk aan nul en waarde gelijk te stellen.

86
00:09:04,730 --> 00:09:10,220
Nu als ik refresh juiste honden laten we gaan naar buiten en ik klik te gaan.

87
00:09:10,660 --> 00:09:14,890
Je kunt zien dat ik krijg huisdier keuze is aan honden en de kleur is gelijk aan gezegd.

88
00:09:15,010 --> 00:09:24,030
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.

89
00:09:24,230 --> 00:09:29,050
Dus katten zijn zoooo blij en toch stemming is gelijk aan gelukkig.

90
00:09:29,060 --> 00:09:29,300
OK.

91
00:09:29,330 --> 00:09:33,140
Dus dat is alles wat we nodig hebben om te bedekken met selecteert.

92
00:09:33,250 --> 00:09:37,250
Een ander ding is de textarea tag en textarea.

93
00:09:37,430 --> 00:09:44,330
Ik zal het zetten op de Indiase is een leuke manier om ingangen die meer dan één regel worden opgeslagen.

94
00:09:44,380 --> 00:09:55,250
Dus we hebben tekstinvoer gezien als deze input type is gelijk aan de tekst en ze zijn enkele lijnen.

95
00:09:55,250 --> 00:10:05,540
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.

96
00:10:05,620 --> 00:10:09,390
Dus textarea Het is eigenlijk een andere tag, net als select.

97
00:10:09,430 --> 00:10:12,490
Dus het is niet een ingang met een type.

98
00:10:12,530 --> 00:10:15,560
Het is eigenlijk een apart soort vorm controle.

99
00:10:15,880 --> 00:10:19,690
En de manier waarop het werkt er twee belangrijke onderdelen.

100
00:10:19,690 --> 00:10:27,690
De eerste is dat we creëren een tekstgebied tag en dat op zijn eigen het gaat om ons deze tekst gebied.

101
00:10:28,420 --> 00:10:37,720
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.

102
00:10:37,970 --> 00:10:40,040
Dus ik zal je dat hier laten zien.

103
00:10:40,150 --> 00:10:48,080
Laten we beginnen met 10 rijen en 50 kolommen en je kunt zien dat mijn textarea uitgebreid in beide richtingen.

104
00:10:48,230 --> 00:10:49,270
Maar het zeker kregen breder.

105
00:10:49,280 --> 00:10:55,370
Dus laten we zeggen dat ik wil nu 100 rijen en je kunt zien wordt het een stuk langer.

106
00:10:55,370 --> 00:11:01,060
Dus in principe kunnen we aangeven hoeveel rijen en het aantal kolommen om de afmetingen van onze tekstgebied wijzigen.

107
00:11:01,850 --> 00:11:08,540
Een ander ding over het is net als bij die andere elementen laten we teruggaan naar een kleinere tot 10 van 10.

108
00:11:08,650 --> 00:11:15,460
Net als met die andere elementen als ik wilde deze gegevens in het verzoek te verzenden laten zich te ontdoen van deze ingang.

109
00:11:15,670 --> 00:11:30,170
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.

110
00:11:30,190 --> 00:11:33,800
Ik klikte gaan en je kunt zien of uit te breiden dit.