1
00:00:01,200 --> 00:00:01,520
D'accord.

2
00:00:01,530 --> 00:00:14,910
Donc, dans les prochaines vidéos, nous allons nous concentrer sur chaque équipe de tous les formulaires afin que les formulaires sont la façon dont nous recevons des commentaires d'un utilisateur que ce soit pour s'inscrire à une page pour commenter une photo pour télécharger une photo pour choisir une couleur à choisir Un rendez-vous.

3
00:00:14,940 --> 00:00:19,840
Il ya tellement de choses différentes à faire avec les formulaires et il est en fait relativement simple et l'a contourné.

4
00:00:19,840 --> 00:00:23,450
Il ya juste deux éléments importants que nous allons apprendre ici.

5
00:00:24,270 --> 00:00:36,600
Donc, nous allons nous concentrer sur la balise de formulaire de la balise d'entrée de la balise d'étiquette et puis nous allons aussi terminer en apprenant sur les validations de nos données comment nous assurer que quelqu'un comble une partie de la réforme.

6
00:00:36,600 --> 00:00:41,860
Quelqu'un ne peut pas laisser notre mot de passe vierge ou e-mail vide ou quelque chose comme ça.

7
00:00:41,910 --> 00:00:46,900
Donc, pour commencer, nous allons juste prendre un aperçu rapide de certaines des formes que vous rencontrez dans la vie quotidienne.

8
00:00:46,980 --> 00:00:51,330
Donc j'ai quelques images ici des sites comme Twitter Facebook Google.

9
00:00:51,690 --> 00:00:54,280
Jetons un coup d'oeil et brisez certains de ces vers le bas.

10
00:00:54,300 --> 00:00:57,420
Voici donc le formulaire de connexion pour Facebook.

11
00:00:57,600 --> 00:01:04,050
Nous avons un endroit où nous pouvons taper du texte dans le texte et mettre une autre entrée où nous tapons les mots de passe.

12
00:01:04,140 --> 00:01:08,190
Très probablement lorsque vous tapez votre mot de passe là-bas il est pointé vers le bas de sorte que vous ne voyez pas réellement le mot de passe.

13
00:01:08,340 --> 00:01:09,990
Et puis une case à cocher.

14
00:01:10,260 --> 00:01:14,500
Et quand nous cliquons sur ce bouton, il soumet cette chose entière.

15
00:01:14,640 --> 00:01:16,160
Donc, il regroupe ces derniers.

16
00:01:16,290 --> 00:01:20,370
Nous n'avons pas un bouton pour le courrier électronique un bouton pour le mot de passe un bouton pour la case à cocher.

17
00:01:20,370 --> 00:01:22,110
Tout va à la fois.

18
00:01:22,110 --> 00:01:23,910
Même chose ici quand nous nous inscrivons.

19
00:01:23,910 --> 00:01:29,560
Nous avons plus d'entrées cinq entrées de texte différentes trois menus déroulants différents.

20
00:01:29,580 --> 00:01:33,790
Ceux-ci sont appelés étiquettes de sélection et puis deux choses appelées boutons radio.

21
00:01:34,050 --> 00:01:40,760
Et puis enfin un bouton d'inscription qui va prendre tout cela et l'envoyer quelque part pour Facebook à utiliser.

22
00:01:41,100 --> 00:01:48,450
Donc, ce que nous allons apprendre aujourd'hui, c'est l'étiquette étrangère et ces formulaires vont être un peu stupides.

23
00:01:48,450 --> 00:01:51,730
Ils ne vont pas réellement faire quoi que ce soit.

24
00:01:51,870 --> 00:01:53,940
Nous avons besoin d'avoir un backend mis en place.

25
00:01:53,950 --> 00:01:58,050
Nous avons besoin d'une base de données, nous avons besoin d'une certaine logique et un code de retour arrière pour faire quelque chose avec le formulaire.

26
00:01:58,050 --> 00:02:02,450
Donc, pour l'instant, ils vont juste ressembler à ce sera en mesure de recréer cela.

27
00:02:02,640 --> 00:02:09,790
Mais quand vous cliquez sur s'inscrire ou vous cliquez sur le login ou vous recherchez sur google nos forums sont en fait va faire une partie de cette logique.

28
00:02:10,110 --> 00:02:13,550
Ils vont juste être l'utilisateur frontal face à une partie des choses.

29
00:02:13,950 --> 00:02:15,780
Donc, la première chose est la balise du forum.

30
00:02:16,080 --> 00:02:22,920
Donc, la balise forum est essentiellement un shell ou un conteneur pour tous ces différents types d'entrées.

31
00:02:22,920 --> 00:02:26,710
Il s'agit donc d'une étiquette de forum autour de tout cela.

32
00:02:26,910 --> 00:02:30,570
Cela pourrait être une étiquette de formulaire autour de tous ces et ainsi de suite.

33
00:02:30,570 --> 00:02:36,030
Voici une autre étiquette de formulaire en faisant juste une étiquette de forum que vous ne voyez pas réellement n'importe quoi sur la page.

34
00:02:36,240 --> 00:02:38,270
On verra ça dans une seconde.

35
00:02:38,280 --> 00:02:41,630
Fondamentalement, c'est juste un conteneur et nous mettons tous nos différents intrants là.

36
00:02:41,640 --> 00:02:47,540
Ainsi les cases à cocher et les boutons et laissés tomber sur les menus et les images colorées vont tous à l'intérieur d'un œuf formé.

37
00:02:48,090 --> 00:02:52,560
Donc, il ya deux attributs importants seront passer plus de temps avec cela lorsque nous arrivons à backend.

38
00:02:52,770 --> 00:03:01,980
Donc, essayez de ne pas être raccroché sur exactement comment cela fonctionne, mais un formulaire va envoyer une demande quelque part, il envoie des données de la forme à un serveur quelque part.

39
00:03:02,040 --> 00:03:06,840
Ainsi, la première partie d'action va spécifier où envoyer les données.

40
00:03:07,320 --> 00:03:08,550
Va-t-il à Google.

41
00:03:08,580 --> 00:03:16,570
Va-t-il signer la page est-ce qu'il va signer, nous allons apprendre beaucoup plus sur la façon dont nous faisons cela sur la partie arrière de cette classe.

42
00:03:16,800 --> 00:03:21,180
Et puis la deuxième partie est quel type de demande HSDPA à envoyer.

43
00:03:21,780 --> 00:03:25,230
Nous pourrions donc envoyer une demande d'achat ou nous pourrions envoyer une demande de poste.

44
00:03:25,800 --> 00:03:28,930
Et encore une fois c'est une autre chose que nous allons passer beaucoup plus de temps sur.

45
00:03:29,130 --> 00:03:45,770
Mais la version généralisée simple que nous faisons une demande d'obtenir lorsque nous faisons quelque chose comme la recherche ou la récupération des données que nous essayons d'obtenir des informations et nous faisons une demande de poste lorsque nous envoyons des données que nous voulons être ajoutés à une base de données affichée À un serveur.

46
00:03:45,780 --> 00:03:54,070
Ainsi dans ces exemples ceci ici quand vous recherchez sur Google vous frappez entrent ou vous cliquent et recherchent qui va faire une demande.

47
00:03:54,180 --> 00:03:56,160
Ce n'est pas ajouter quelque chose à la base de données.

48
00:03:56,160 --> 00:03:57,770
Il ne change rien.

49
00:03:57,840 --> 00:04:00,630
Il est tout simplement de récupérer des données de recherche.

50
00:04:00,710 --> 00:04:03,070
C'est obtenir des données c'est une demande d'obtenir.

51
00:04:03,450 --> 00:04:08,420
Ceux-ci cependant pour vous inscrire à Facebook ou vous inscrire à Twitter.

52
00:04:08,460 --> 00:04:17,370
Ceux-ci vont être des demandes de poste lorsque vous avez entré des données et vous cliquez sur l'inscription, il prend vos données et effectivement l'ajoute à la base de données Twitter.

53
00:04:17,370 --> 00:04:21,860
Encore une fois, nous allons y travailler un peu plus tard dans cette classe.

54
00:04:21,990 --> 00:04:26,440
Donc, pour l'instant, il suffit de se familiariser avec l'action et la méthode et le fait qu'ils existent.

55
00:04:26,640 --> 00:04:30,480
Ainsi, l'étiquette d'entrée est ce qui se passe réellement à l'intérieur de nos formulaires.

56
00:04:30,600 --> 00:04:38,120
C'est ce qui va créer les différentes entrées que nous voyons ici une entrée de texte un mot de passe d'entrée un bouton radio.

57
00:04:38,190 --> 00:04:40,020
Il ne crée pas réellement un menu déroulant.

58
00:04:40,020 --> 00:04:46,580
Nous allons donc en parler dans l'exercice suivant, mais il crée toutes sortes d'entrées différentes pour l'entrée des utilisateurs.

59
00:04:46,620 --> 00:04:48,840
J'ai donc quelques exemples ici.

60
00:04:48,900 --> 00:04:53,130
Ils sont tous exactement les mêmes sauf pour ce type d'attribut.

61
00:04:53,310 --> 00:04:57,210
Donc, si type est égal au texte, nous obtenons un type de zone de texte égal à la date.

62
00:04:57,290 --> 00:04:59,970
Vous obtenez ce petit type de sélection de date égale couleur.

63
00:05:00,270 --> 00:05:04,230
Vous obtenez un picker de couleur dans le fichier d'Eiffel, nous obtenons une case à cocher pickle de Pickle de type de fichier.

64
00:05:04,260 --> 00:05:05,680
On a une case à cocher.

65
00:05:05,850 --> 00:05:11,110
Donc, je suis en train de tirer sur endian et de recherche d'entrée.

66
00:05:11,110 --> 00:05:20,970
Et comme je le fais que vous verrez que je défile vers le bas aux attributs sous le type il ya une liste de tous les types possibles que nous pouvons spécifier.

67
00:05:21,550 --> 00:05:23,440
Et il y en a environ 30 ou 40 ici.

68
00:05:23,790 --> 00:05:27,800
Et pour être honnête il ya beaucoup sur ici que vous n'aurez probablement jamais besoin d'utiliser.

69
00:05:28,110 --> 00:05:30,810
Mais il ya quelques-uns que vous utilisez tout le temps.

70
00:05:30,810 --> 00:05:32,660
Nous allons donc nous concentrer sur ces questions.

71
00:05:32,700 --> 00:05:40,750
Ce sont des choses comme le texte d'email mot de passe date bouton soumettre alors certains des autres comme la couleur.

72
00:05:41,040 --> 00:05:43,830
Vous ne pouvez pas utiliser très souvent du tout.

73
00:05:43,830 --> 00:05:46,120
Je souhaite vraiment que nous avions plus de chances de faire des photos en couleur.

74
00:05:46,130 --> 00:05:53,820
C'est mon préféré des intrants, mais je veux que vous soyez conscient qu'il ya beaucoup de choix différents ici.

75
00:05:53,820 --> 00:05:59,060
Alors, pour créer un formulaire, nous prenons simplement un tag de formulaire et nous le remplissons avec quelques balises d'entrée.

76
00:05:59,160 --> 00:06:00,960
Voici donc un exemple vraiment simple.

77
00:06:00,960 --> 00:06:02,230
Nous avons deux entrées.

78
00:06:02,360 --> 00:06:06,830
Equals texte type Pickle mot de passe et il nous rend cette belle forme ici.

79
00:06:07,140 --> 00:06:12,190
Et vous pouvez voir que nous remplir ce premier type est égal au texte, il ressemble à du texte régulier.

80
00:06:12,280 --> 00:06:17,550
Et comme nous remplissons le type égale mot de passe, il donne juste ceux pointillés les champs de mot de passe cachés.