1
00:00:01,200 --> 00:00:01,520
Okee.

2
00:00:01,530 --> 00:00:14,910
Dus in de komende paar video's gaan we focussen op elk team alle vormen dus vormen zijn hoe we de input van de gebruiker of het nu aan te melden voor een pagina om te reageren op een foto om een ​​foto te uploaden naar een kleur te kiezen op te halen een date.

3
00:00:14,940 --> 00:00:19,840
Er is zo veel verschillende dingen te doen met formulieren en het is eigenlijk relatief eenvoudig en gescherpt hem uit.

4
00:00:19,840 --> 00:00:23,450
Er zijn slechts twee belangrijke elementen die we gaan om te leren over hier.

5
00:00:24,270 --> 00:00:36,600
Dus we gaan om zich te concentreren op het formulier tag de input tag het label tag en dan zijn we ook gaan eindigen door te leren over validaties voor onze data hoe kunnen we ervoor zorgen dat iemand vult een deel van de hervorming.

6
00:00:36,600 --> 00:00:41,860
Iemand kan niet onze wachtwoord leeg laat of e-mail blanco of iets dergelijks.

7
00:00:41,910 --> 00:00:46,900
Dus om te beginnen laten we eens een snelle overzicht van enkele van de formulieren die je tegenkomt in het dagelijks leven.

8
00:00:46,980 --> 00:00:51,330
Dus ik heb een aantal foto's hier van sites als Twitter Facebook Google.

9
00:00:51,690 --> 00:00:54,280
Laten we eens een kijkje nemen en breken een aantal van deze naar beneden.

10
00:00:54,300 --> 00:00:57,420
Dus hier is de log in vorm voor Facebook.

11
00:00:57,600 --> 00:01:04,050
We hebben een plek waar we wat tekst in de tekst kan typen en zet een andere ingang waar we typen wachtwoorden.

12
00:01:04,140 --> 00:01:08,190
Het meest waarschijnlijk wanneer u uw wachtwoord typt daar is het naar beneden verspreid, zodat u het wachtwoord eigenlijk niet te zien.

13
00:01:08,340 --> 00:01:09,990
En dan een checkbox.

14
00:01:10,260 --> 00:01:14,500
En als we op deze knop klikt stelt zij deze hele zaak.

15
00:01:14,640 --> 00:01:16,160
Dus het groepen die bij elkaar.

16
00:01:16,290 --> 00:01:20,370
We hebben niet een knop voor e-mail een knop voor het wachtwoord een knop voor het selectievakje hebben.

17
00:01:20,370 --> 00:01:22,110
Het gaat allemaal in een keer.

18
00:01:22,110 --> 00:01:23,910
Hetzelfde hier toen we aanmelden.

19
00:01:23,910 --> 00:01:29,560
We hebben meer ingangen kreeg vijf verschillende tekstinvoer drie verschillende dropdown menu's.

20
00:01:29,580 --> 00:01:33,790
Dit zijn de zogenaamde select-tags en vervolgens twee dingen genoemd radio knoppen.

21
00:01:34,050 --> 00:01:40,760
En dan eindelijk een teken up knop dat het gaat om dit allemaal te nemen en stuur het ergens om Facebook te gebruiken.

22
00:01:41,100 --> 00:01:48,450
Dus wat we gaan om te leren vandaag is de buitenlandse tag en deze vormen gaat een beetje dom te zijn.

23
00:01:48,450 --> 00:01:51,730
Ze zijn niet van plan om daadwerkelijk iets te doen.

24
00:01:51,870 --> 00:01:53,940
We moeten eigenlijk een backend opgezet.

25
00:01:53,950 --> 00:01:58,050
We hebben een databank we wat logica en een aantal back-end code om iets met de vorm wel nodig.

26
00:01:58,050 --> 00:02:02,450
Dus voor nu zijn ze gewoon gaan om te kijken als deze in staat zijn om dit opnieuw zal zijn.

27
00:02:02,640 --> 00:02:09,790
Maar wanneer u klikt aanmelden of u klikt op inloggen of u zoeken op google onze forums zijn eigenlijk van plan om een ​​van die logica te doen.

28
00:02:10,110 --> 00:02:13,550
Ze gaan gewoon naar het front end gebruiker geconfronteerd met een deel van de dingen.

29
00:02:13,950 --> 00:02:15,780
Dus het eerste wat is het forum tag.

30
00:02:16,080 --> 00:02:22,920
Dus het forum tag is eigenlijk een reservoir of een houder voor al deze verschillende inputs.

31
00:02:22,920 --> 00:02:26,710
Dus dit is een forum tag rond dit alles.

32
00:02:26,910 --> 00:02:30,570
Dit kan men formuliertag rond al deze en ga zo maar door.

33
00:02:30,570 --> 00:02:36,030
Hier is een andere vorm tag door gewoon het maken van een forum tag je niet echt iets op de pagina te zien.

34
00:02:36,240 --> 00:02:38,270
We zullen zien dat in slechts een seconde.

35
00:02:38,280 --> 00:02:41,630
Eigenlijk is het gewoon een container en zetten we al onze verschillende inputs in.

36
00:02:41,640 --> 00:02:47,540
Dus vakjes en knoppen en laten vallen op de menu's en gekleurde foto's al naar binnen gaan van een gevormde ei.

37
00:02:48,090 --> 00:02:52,560
Zo zijn er twee belangrijke attributen zal wat meer tijd doorbrengen met dit als we in backend.

38
00:02:52,770 --> 00:03:01,980
Dus probeer niet te krijgen opgehangen op precies hoe dit werkt, maar een vorm gaat om een ​​verzoek ergens te sturen stuurt de gegevens van het formulier naar een server ergens.

39
00:03:02,040 --> 00:03:06,840
Dus het eerste deel actie gaat om aan te geven waar de gegevens te verzenden.

40
00:03:07,320 --> 00:03:08,550
Gaat het Google.

41
00:03:08,580 --> 00:03:16,570
Gaat hij te melden pagina gaat het om zijn uitloggen gaan we veel meer over hoe we eigenlijk dat te doen op de back-end gedeelte van deze klasse te leren.

42
00:03:16,800 --> 00:03:21,180
En dan is het tweede deel is wat voor soort HSDPA verzoek te sturen.

43
00:03:21,780 --> 00:03:25,230
Dus konden we een get verzoek te verzenden of we kunnen een bericht te versturen.

44
00:03:25,800 --> 00:03:28,930
En ook dit is een ander ding dat we gaan veel veel meer tijd aan besteden.

45
00:03:29,130 --> 00:03:45,770
Maar de eenvoudige gegeneraliseerde versie maken we een verzoek krijgen wanneer we iets te zoeken of het ophalen van gegevens die we proberen om informatie te krijgen aan het doen zijn en we maken een post verzoek als we het verzenden van gegevens die we willen worden toegevoegd aan een database geplaatst een server.

46
00:03:45,780 --> 00:03:54,070
Dus in deze voorbeelden deze hier als u zoekt op Google hit u invoeren of u klikt op en zoek dat gaat om een ​​verzoek in te dienen.

47
00:03:54,180 --> 00:03:56,160
Het is eigenlijk niets toevoegen aan de database.

48
00:03:56,160 --> 00:03:57,770
Het is niet iets te veranderen.

49
00:03:57,840 --> 00:04:00,630
Het is puur gewoon om gegevens terug te zoeken.

50
00:04:00,710 --> 00:04:03,070
Het wordt data is het een get aanvraag.

51
00:04:03,450 --> 00:04:08,420
Deze hier wel aan te melden voor Facebook of meld je aan voor Twitter.

52
00:04:08,460 --> 00:04:17,370
Die gaan na verzoeken zijn als je in data getypt en u klikt aanmelden duurt van uw gegevens en eigenlijk voegt het toe aan Twitter's database.

53
00:04:17,370 --> 00:04:21,860
Dus nogmaals we gaan echt werken op dat nogal wat later in deze klasse.

54
00:04:21,990 --> 00:04:26,440
Dus nu slechts kennis hebben actie en werkwijze en het feit dat ze bestaan.

55
00:04:26,640 --> 00:04:30,480
Dus de input tag is wat er werkelijk gaat binnenkant van onze formulieren.

56
00:04:30,600 --> 00:04:38,120
Het is wat er aan de verschillende ingangen die we zien hier een tekst invoeren van een wachtwoord invoeren van een radio-knop te maken.

57
00:04:38,190 --> 00:04:40,020
Het doet er niet echt zorgen voor een dropdown menu.

58
00:04:40,020 --> 00:04:46,580
Dus we in de latere oefening praten over, maar het creëert allerlei verschillende ingangen voor input van de gebruiker.

59
00:04:46,620 --> 00:04:48,840
Dus heb ik een paar voorbeelden.

60
00:04:48,900 --> 00:04:53,130
Ze zijn allemaal precies hetzelfde, behalve voor dit type attribuut.

61
00:04:53,310 --> 00:04:57,210
Dus als soort gelijk is aan de tekst krijgen we een tekstvak soort gelijk aan de datum.

62
00:04:57,290 --> 00:04:59,970
U krijgt deze kleine datumplukker soort gelijk kleur.

63
00:05:00,270 --> 00:05:04,230
Je krijgt een kleur plukker Eiffel bestand krijgen we een bestand picker typen checkbox Pickle's.

64
00:05:04,260 --> 00:05:05,680
We krijgen een checkbox.

65
00:05:05,850 --> 00:05:11,110
Dus ik ben eigenlijk van plan om endian trekken en te zoeken voor input.

66
00:05:11,110 --> 00:05:20,970
En als ik dat zie je zoals ik scroll naar beneden om attributen in het kader van het type is er een lijst van alle mogelijke soorten die we kunnen geven.

67
00:05:21,550 --> 00:05:23,440
En er is ongeveer 30 of 40 van hen hier.

68
00:05:23,790 --> 00:05:27,800
En om eerlijk te zijn is er veel hier op dat je waarschijnlijk nooit meer hoeft te gebruiken.

69
00:05:28,110 --> 00:05:30,810
Maar er zijn een paar die je de hele tijd te gebruiken.

70
00:05:30,810 --> 00:05:32,660
En dus gaan we echt concentreren op die.

71
00:05:32,700 --> 00:05:40,750
Dat zijn dingen zoals tekst e-mail wachtwoord date knop te leggen dan een aantal van de andere degenen zoals kleur.

72
00:05:41,040 --> 00:05:43,830
Je mag niet zo vaak gebruikt op alle.

73
00:05:43,830 --> 00:05:46,120
Ik zeker wou dat we meer kansen om kleurenfoto's te doen.

74
00:05:46,130 --> 00:05:53,820
Het is mijn favoriet van de ingangen, maar ik wil dat je bewust te zijn dat er een heleboel verschillende keuzes.

75
00:05:53,820 --> 00:05:59,060
Dus dan naar een vorm die we gewoon een vorm tag te maken en we vullen met sommige input-tags.

76
00:05:59,160 --> 00:06:00,960
Dus hier is een heel eenvoudig voorbeeld.

77
00:06:00,960 --> 00:06:02,230
We hebben twee ingangen.

78
00:06:02,360 --> 00:06:06,830
Evenaart tekst type Pickle's wachtwoord en het maakt ons dit aardige vorm hier.

79
00:06:07,140 --> 00:06:12,190
En je kunt zien als we het invullen van dit eerste type is gelijk aan de tekst het ziet er gewoon als gewone tekst.

80
00:06:12,280 --> 00:06:17,550
En zoals we vul het soort gelijk vergeten het geeft alleen die bezaaid de verborgen wachtwoord velden.