1
00:00:00,600 --> 00:00:05,350
Donc, dans cette vidéo, nous allons parler de trois façons supplémentaires d'obtenir l'entrée des utilisateurs.

2
00:00:05,370 --> 00:00:10,830
Le premier bouton radio est en fait juste un autre type de balise d'entrée que nous avons vu.

3
00:00:11,010 --> 00:00:12,740
C'est similaire à une case à cocher.

4
00:00:12,780 --> 00:00:16,170
La suivante, la balise select est la façon dont nous obtenons des menus déroulants.

5
00:00:16,230 --> 00:00:22,290
Et enfin, nous allons parler de la zone de texte qui est la façon dont nous pouvons créer des entrées de texte qui sont de multiples lignes de long.

6
00:00:23,130 --> 00:00:26,900
Donc, je vais commencer. Bien sûr, avec ces standards HMO boilerplate.

7
00:00:26,970 --> 00:00:33,570
Allez-y et ajoutez dans le titre sauf cela et nous allons aller de l'avant et ajouter un bouton radio.

8
00:00:33,750 --> 00:00:37,830
Donc, c'est juste le type d'entrée parce que la radio.

9
00:00:37,830 --> 00:00:46,570
Et je vais le dupliquer et je vais donner l'autre type parce que la case à cocher juste pour que vous puissiez les voir côte à côte.

10
00:00:46,650 --> 00:00:48,900
Il s'agit donc d'un bouton radio ici.

11
00:00:49,650 --> 00:00:51,850
Je ne peux pas me désactiver une fois que je l'ai sélectionné.

12
00:00:51,870 --> 00:00:55,350
Il s'agit d'une case à cocher que je peux activer et désactiver.

13
00:00:55,470 --> 00:01:07,310
La différence est donc qu'une case à cocher permet à un utilisateur de la sélectionner ou de la désélectionner pour qu'il y ait cinq choix différents de choses qu'un utilisateur peut vérifier.

14
00:01:07,320 --> 00:01:09,890
Disons que nous demandons aux utilisateurs de choisir leur.

15
00:01:10,080 --> 00:01:12,800
Il s'agit d'un chantier et nous voulons qu'ils sélectionnent leurs compétences.

16
00:01:12,900 --> 00:01:21,960
Nous voulons qu'ils puissent dire javascript et voir comme un HMO ou peut-être seulement javascript et ils sont juste un tas de cases à cocher qu'ils vérifient sur et hors de notre bouton radio.

17
00:01:21,960 --> 00:01:26,280
Toutefois, il est généralement utilisé quand un utilisateur a un choix.

18
00:01:26,280 --> 00:01:36,210
Ainsi, un exemple typiquement sur les sites Web devrait être quelque chose comme genre où il vous demande de vérifier mâle ou femelle ou autre.

19
00:01:36,600 --> 00:01:38,920
Et vous n'avez qu'un seul choix.

20
00:01:39,000 --> 00:01:41,360
Vous ne pouvez pas vous ne savez pas sélectionner.

21
00:01:41,430 --> 00:01:58,090
Vous devez choisir l'un des éléments pour faire que disons par exemple que nous allons avoir un formulaire où les utilisateurs choisissent s'ils préfèrent les chats ou les chiens et il n'y a pas d'option de choisir les deux.

22
00:01:58,110 --> 00:02:03,470
Malheureusement dans ce monde il est noir ou blanc soit préfèrent les chats que nous préférons les chiens.

23
00:02:04,080 --> 00:02:07,430
Donc, pour ce faire, nous allons avoir deux boutons radio.

24
00:02:07,650 --> 00:02:15,600
Et si c'est tout ce que nous faisons pour commencer, je peux en choisir un et je peux aussi choisir l'autre.

25
00:02:15,600 --> 00:02:16,650
Pas tout à fait ce que nous voulons.

26
00:02:16,650 --> 00:02:18,780
Je veux seulement être en mesure de choisir un.

27
00:02:19,080 --> 00:02:24,550
Donc, la première chose que je veux faire est d'obtenir un formulaire et je vais transférer mes contributions dans ce formulaire.

28
00:02:25,170 --> 00:02:31,290
Et pour l'instant, nous allons le laisser pour que ce soit juste une requête get et que ce soit simplement l'action par défaut qui est juste pour rafraîchir la page.

29
00:02:31,650 --> 00:02:45,360
La prochaine chose que nous allons faire est d'ajouter quelques étiquettes donc je vais aller de l'avant et utiliser la syntaxe quatre, ce sera pour les chiens.

30
00:02:48,030 --> 00:02:51,570
Et puis nous devons donner notre contribution et I.D. chiens.

31
00:02:51,650 --> 00:02:53,870
Mais ceux-ci doivent correspondre alors.

32
00:02:53,880 --> 00:02:55,690
Même chose ici.

33
00:02:55,980 --> 00:03:06,120
Une autre étiquette étiquette pour les chats, puis Id chats.

34
00:03:06,210 --> 00:03:08,360
Donc, si vous êtes frais maintenant, nous avons deux choix.

35
00:03:08,430 --> 00:03:10,160
Mais je peux encore choisir les deux.

36
00:03:10,500 --> 00:03:20,550
Donc, ce que nous devons faire est de lui dire comment ces deux boutons radio sont pour le même choix afin que vous puissiez choisir l'un ou l'autre, mais ils sont une décision.

37
00:03:20,550 --> 00:03:36,000
Donc, pour ce faire, nous devons utiliser l'attribut de nom qui se souviennent que le nom donne un nom d'entrée individuel mais m l peut se référer à elle et c'est aussi la façon dont il est stocké ou envoyé dans la demande HGP que les noms sont importants.

38
00:03:36,270 --> 00:03:37,580
Alors donnez-lui un nom ici.

39
00:03:37,620 --> 00:03:46,370
Le premier nom sera allons-y avec juste appelons-le choix pour animaux de compagnie.

40
00:03:47,610 --> 00:03:51,890
Ensuite, en entrant ici, nous allons lui donner le même nom.

41
00:03:52,200 --> 00:04:02,260
Et la raison que nous faisons que vous verrez dans une seconde est que, en leur donnant le même nom, il les connecte alors que nous ne pouvons maintenant en choisir un seul.

42
00:04:02,340 --> 00:04:03,510
Donc, si nous rafraîchissons.

43
00:04:03,650 --> 00:04:08,510
Je peux cliquer sur les chiens ou les chats, mais pas les deux.

44
00:04:10,050 --> 00:04:11,500
Et encore une chose que je vais vous montrer.

45
00:04:11,520 --> 00:04:14,400
Ajoutons un bouton à la fin du formulaire.

46
00:04:15,630 --> 00:04:27,800
Et ce que nous avons vu jusqu'à présent est effectivement le type d'entrée est égal à soumettre au bas d'un formulaire, mais je vous montre un bouton juste pour vous montrer que si le bouton est la dernière chose dans un formulaire, il va effectivement soumettre le formulaire .

47
00:04:27,870 --> 00:04:35,490
Donc, il ya quelques options d'entrées pour envoyer effectivement le formulaire à la fin du bouton à la fin ou le type d'entrée que vous soumettrez.

48
00:04:35,490 --> 00:04:38,250
Alors maintenant, choisissons des chiens bien sûr.

49
00:04:38,250 --> 00:04:40,270
Le seul choix naturel.

50
00:04:40,380 --> 00:04:48,710
Rappelez-vous le nom est le choix d'animaux de compagnie donc nous devrions voir quelque chose ici dans la chaîne de requête comme avec toutes les autres entrées.

51
00:04:48,750 --> 00:04:58,020
Quand je clique, nous voyons des choix pour animaux de compagnie égaux à, puis O N ou sur lequel ce n'est pas vraiment ce que nous attendions.

52
00:04:58,110 --> 00:05:04,710
Nous manquons donc une chose et nous devons aussi dire quelle est la valeur de cette décision.

53
00:05:04,710 --> 00:05:09,210
Donc, quand vous allez de l'avant et ajoutez la balise de valeur à l'intérieur de cet attribut de valeur.

54
00:05:09,360 --> 00:05:28,010
Et disons simplement que cette valeur sera juste chien et celui-ci seront des chats et soyons bons tous les chapeaux juste pour que vous puissiez voir ce qui vient d'où.

55
00:05:28,220 --> 00:05:28,690
D'ACCORD.

56
00:05:28,790 --> 00:05:43,690
Donc, il dit si l'utilisateur clique sur les chiens sous le nom pet choice stocker les chiens de valeur dans tous les casquettes si l'utilisateur soumet et clique sur les chats sous la valeur ou le choix nom d'animal de compagnie stocker la valeur chats dans tous les chapeaux.

57
00:05:44,000 --> 00:05:50,170
Donc, juste pour montrer que pour vous, nous allons cliquer sur les chiens aller et nous obtenons le choix des animaux égaux chiens.

58
00:05:50,360 --> 00:05:53,630
Si nous faisons des chats nous obtenons choix d'animaux de compagnie parce que les chats.

59
00:05:53,690 --> 00:06:01,260
Donc, le prochain élément dont nous allons parler est la balise select et avec une balise select ce qu'il faut faire est de créer de menus déroulants agréable.

60
00:06:01,730 --> 00:06:03,300
Ainsi, le nom du tag est appelé.

61
00:06:03,350 --> 00:06:04,510
Il suffit de sélectionner.

62
00:06:04,690 --> 00:06:06,470
C'est une étiquette d'ouverture et de fermeture.

63
00:06:06,860 --> 00:06:10,860
Et si je fais juste cela, puis il suffit de glisser et je rafraîchir ma page.

64
00:06:10,920 --> 00:06:13,040
J'ai effectivement déjà un menu déroulant.

65
00:06:13,060 --> 00:06:14,890
C'est tout simplement vide.

66
00:06:14,930 --> 00:06:18,660
Avec la balise select, nous utilisons la balise option.

67
00:06:18,940 --> 00:06:25,150
Donc à l'intérieur de là pour chaque option possible que nous voulons utiliser ou de choisir, nous ajoutons une étiquette d'option.

68
00:06:25,430 --> 00:06:39,510
Alors nous allons faire un menu déroulant qui a conduit à l'utilisateur de choisir leur couleur préférée et nous allons faire quelques options ici.

69
00:06:39,590 --> 00:06:46,810
Rouge orange et jaune.

70
00:06:48,680 --> 00:06:53,780
Donc, comme vous pouvez le voir, nous avons déjà une belle baisse ici avec nos choix.

71
00:06:54,270 --> 00:06:58,330
Et si je frappe aller, sélectionnez orange et je vais aller.

72
00:06:58,940 --> 00:07:08,070
Vous verrez que nous n'obtenons rien ici et que vous êtes comme si nous sélectionnions des chiens qui font du jaune cette fois-ci.

73
00:07:08,210 --> 00:07:13,940
Je n'obtiens toujours que des choix d'animaux de compagnie et c'est parce que nous n'avons pas un nom que nous fournissons.

74
00:07:14,060 --> 00:07:21,360
Donc, sur notre sélection Nous devons lui donner un nom et nous allons simplement appeler fav et allons-y simplement avec la couleur et laissez-le à cela.

75
00:07:22,270 --> 00:07:29,170
Et je rafraîchir ma page, nous allons cliquer sur les chats cliquez sur jaune et regarder ici en tant que je toucher go.

76
00:07:29,360 --> 00:07:33,810
Je reçois maintenant des choix d'animaux de compagnie chat et la couleur est jaune.

77
00:07:34,460 --> 00:07:54,150
Donc, ce que vous verrez, c'est que selon l'option que j'ai sélectionné dans ce cas les cartes jaunes le navigateur prend tout ce que le texte est à l'intérieur de cette option et il envoie juste que comme une valeur sous la couleur du nom.

78
00:07:54,170 --> 00:08:05,260
Donc, nous ne voulons pas toujours que la valeur qui est envoyée dans la demande soit identique à ce qui est affiché à l'utilisateur dans le menu déroulant.

79
00:08:05,260 --> 00:08:21,510
Donc un exemple de cela pourrait être quelque chose comme si nous voulions que l'utilisateur de choisir une ambiance alors disons Quelle est votre humeur actuelle et nous voulons avoir un visage heureux ici.

80
00:08:23,120 --> 00:08:29,860
Un visage sans émotion que je devine et un visage triste.

81
00:08:31,780 --> 00:08:41,930
Et nous finissons avec cette belle baisse ici avec nos émoticônes, mais disons que quand un utilisateur choisit heureux, nous ne voulons pas que tout cela soit envoyé.

82
00:08:42,200 --> 00:08:48,570
Au lieu de cela, nous voulons que le mot heureux soit envoyé ou que le mot dit soit envoyé pour le faire.

83
00:08:48,670 --> 00:08:52,570
Nous utilisons le tag value désolé l'attribut value.

84
00:08:52,750 --> 00:08:54,990
Nous dirons donc que la valeur est égale.

85
00:08:55,000 --> 00:09:04,720
Et disons juste heureux égaux neutre et la valeur égale ensemble.

86
00:09:04,730 --> 00:09:10,220
Maintenant, si je rafraîchir les chiens corrects, allons à l'extérieur et je clique sur aller.

87
00:09:10,660 --> 00:09:14,890
Vous pouvez voir que je reçois le choix d'animaux de compagnie est de chiens et la couleur est égale à dit.

88
00:09:15,010 --> 00:09:24,030
Et bien sûr, c'est parce que nous avons gardé le nom que la couleur que vous voulez changer que d'être l'humeur juste pour que notre balisage est significatif et fait sens.

89
00:09:24,230 --> 00:09:29,050
Ainsi les chats sont soooo heureux et pourtant l'humeur est égal à heureux.

90
00:09:29,060 --> 00:09:29,300
D'ACCORD.

91
00:09:29,330 --> 00:09:33,140
C'est donc tout ce dont nous avons besoin pour couvrir avec sélection.

92
00:09:33,250 --> 00:09:37,250
Une autre chose est la balise textarea et textarea.

93
00:09:37,430 --> 00:09:44,330
Je vais mettre en place sur l'Inde est une belle façon de créer des entrées qui sont plus d'une ligne.

94
00:09:44,380 --> 00:09:55,250
Ainsi, nous avons vu des entrées de texte comme ce type d'entrée est égal au texte et ce sont des lignes simples.

95
00:09:55,250 --> 00:10:05,540
Mais que faire si nous voulions demander à un utilisateur pour une bio ou de copier et coller un CV ou quelque chose qui ne va pas très bien fonctionner et cette entrée mince très mince.

96
00:10:05,620 --> 00:10:09,390
So textarea C'est en fait une autre balise comme select.

97
00:10:09,430 --> 00:10:12,490
Ce n'est donc pas une entrée avec un type.

98
00:10:12,530 --> 00:10:15,560
C'est en fait un type distinct de contrôle de formulaire.

99
00:10:15,880 --> 00:10:19,690
Et la façon dont il fonctionne il ya deux parties importantes.

100
00:10:19,690 --> 00:10:27,690
La première est que nous créons une balise de zone de texte et que, de son propre chef, il va nous donner cette zone de texte.

101
00:10:28,420 --> 00:10:37,720
Mais ce que nous pouvons également faire est de spécifier exactement combien cette zone de texte utilise ces deux lignes et colonnes d'attributs.

102
00:10:37,970 --> 00:10:40,040
Donc je vais vous montrer ça ici.

103
00:10:40,150 --> 00:10:48,080
Commençons par 10 lignes et 50 colonnes et vous pouvez voir que ma zone de texte a été agrandie dans les deux sens.

104
00:10:48,230 --> 00:10:49,270
Mais il a certainement élargi.

105
00:10:49,280 --> 00:10:55,370
Alors disons que je veux maintenant 100 lignes et vous pouvez voir qu'il obtient beaucoup plus longtemps.

106
00:10:55,370 --> 00:11:01,060
Nous pouvons donc spécifier combien de lignes et combien de colonnes pour modifier les dimensions de notre zone de texte.

107
00:11:01,850 --> 00:11:08,540
Une autre chose à ce sujet est juste comme avec ces autres éléments, nous allons revenir à un plus petit à 10 par 10.

108
00:11:08,650 --> 00:11:15,460
Tout comme avec ces autres éléments si je voulais envoyer ces données dans la demande, nous allons nous débarrasser de cette entrée.

109
00:11:15,670 --> 00:11:30,170
Je devrais lui donner un nom de nom est égal à et disons simplement paragraphe remplir ce paragraphe avec du texte.

110
00:11:30,190 --> 00:11:33,800
J'ai cliqué sur aller et vous pouvez voir ou développer cela.