Donc, dans cette vidéo, nous allons parler de trois façons supplémentaires d'obtenir l'entrée des utilisateurs.
Le premier bouton radio est en fait juste un autre type de balise d'entrée que nous avons vu.
C'est similaire à une case à cocher.
La suivante, la balise select est la façon dont nous obtenons des menus déroulants.
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.
Donc, je vais commencer. Bien sûr, avec ces standards HMO boilerplate.
Allez-y et ajoutez dans le titre sauf cela et nous allons aller de l'avant et ajouter un bouton radio.
Donc, c'est juste le type d'entrée parce que la radio.
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.
Il s'agit donc d'un bouton radio ici.
Je ne peux pas me désactiver une fois que je l'ai sélectionné.
Il s'agit d'une case à cocher que je peux activer et désactiver.
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.
Disons que nous demandons aux utilisateurs de choisir leur.
Il s'agit d'un chantier et nous voulons qu'ils sélectionnent leurs compétences.
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.
Toutefois, il est généralement utilisé quand un utilisateur a un choix.
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.
Et vous n'avez qu'un seul choix.
Vous ne pouvez pas vous ne savez pas sélectionner.
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.
Malheureusement dans ce monde il est noir ou blanc soit préfèrent les chats que nous préférons les chiens.
Donc, pour ce faire, nous allons avoir deux boutons radio.
Et si c'est tout ce que nous faisons pour commencer, je peux en choisir un et je peux aussi choisir l'autre.
Pas tout à fait ce que nous voulons.
Je veux seulement être en mesure de choisir un.
Donc, la première chose que je veux faire est d'obtenir un formulaire et je vais transférer mes contributions dans ce formulaire.
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.
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.
Et puis nous devons donner notre contribution et I.D. chiens.
Mais ceux-ci doivent correspondre alors.
Même chose ici.
Une autre étiquette étiquette pour les chats, puis Id chats.
Donc, si vous êtes frais maintenant, nous avons deux choix.
Mais je peux encore choisir les deux.
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.
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.
Alors donnez-lui un nom ici.
Le premier nom sera allons-y avec juste appelons-le choix pour animaux de compagnie.
Ensuite, en entrant ici, nous allons lui donner le même nom.
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.
Donc, si nous rafraîchissons.
Je peux cliquer sur les chiens ou les chats, mais pas les deux.
Et encore une chose que je vais vous montrer.
Ajoutons un bouton à la fin du formulaire.
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 .
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.
Alors maintenant, choisissons des chiens bien sûr.
Le seul choix naturel.
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.
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.
Nous manquons donc une chose et nous devons aussi dire quelle est la valeur de cette décision.
Donc, quand vous allez de l'avant et ajoutez la balise de valeur à l'intérieur de cet attribut de valeur.
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ù.
D'ACCORD.
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.
Donc, juste pour montrer que pour vous, nous allons cliquer sur les chiens aller et nous obtenons le choix des animaux égaux chiens.
Si nous faisons des chats nous obtenons choix d'animaux de compagnie parce que les chats.
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.
Ainsi, le nom du tag est appelé.
Il suffit de sélectionner.
C'est une étiquette d'ouverture et de fermeture.
Et si je fais juste cela, puis il suffit de glisser et je rafraîchir ma page.
J'ai effectivement déjà un menu déroulant.
C'est tout simplement vide.
Avec la balise select, nous utilisons la balise option.
Donc à l'intérieur de là pour chaque option possible que nous voulons utiliser ou de choisir, nous ajoutons une étiquette d'option.
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.
Rouge orange et jaune.
Donc, comme vous pouvez le voir, nous avons déjà une belle baisse ici avec nos choix.
Et si je frappe aller, sélectionnez orange et je vais aller.
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.
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.
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.
Et je rafraîchir ma page, nous allons cliquer sur les chats cliquez sur jaune et regarder ici en tant que je toucher go.
Je reçois maintenant des choix d'animaux de compagnie chat et la couleur est jaune.
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.
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.
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.
Un visage sans émotion que je devine et un visage triste.
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é.
Au lieu de cela, nous voulons que le mot heureux soit envoyé ou que le mot dit soit envoyé pour le faire.
Nous utilisons le tag value désolé l'attribut value.
Nous dirons donc que la valeur est égale.
Et disons juste heureux égaux neutre et la valeur égale ensemble.
Maintenant, si je rafraîchir les chiens corrects, allons à l'extérieur et je clique sur aller.
Vous pouvez voir que je reçois le choix d'animaux de compagnie est de chiens et la couleur est égale à dit.
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.
Ainsi les chats sont soooo heureux et pourtant l'humeur est égal à heureux.
D'ACCORD.
C'est donc tout ce dont nous avons besoin pour couvrir avec sélection.
Une autre chose est la balise textarea et textarea.
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.
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.
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.
So textarea C'est en fait une autre balise comme select.
Ce n'est donc pas une entrée avec un type.
C'est en fait un type distinct de contrôle de formulaire.
Et la façon dont il fonctionne il ya deux parties importantes.
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.
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.
Donc je vais vous montrer ça ici.
Commençons par 10 lignes et 50 colonnes et vous pouvez voir que ma zone de texte a été agrandie dans les deux sens.
Mais il a certainement élargi.
Alors disons que je veux maintenant 100 lignes et vous pouvez voir qu'il obtient beaucoup plus longtemps.
Nous pouvons donc spécifier combien de lignes et combien de colonnes pour modifier les dimensions de notre zone de texte.
Une autre chose à ce sujet est juste comme avec ces autres éléments, nous allons revenir à un plus petit à 10 par 10.
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.
Je devrais lui donner un nom de nom est égal à et disons simplement paragraphe remplir ce paragraphe avec du texte.
J'ai cliqué sur aller et vous pouvez voir ou développer cela.