1
00:00:00,600 --> 00:00:05,350
Quindi in questo video parleremo di tre modi aggiuntivi per ottenere input da parte dell'utente.

2
00:00:05,370 --> 00:00:10,830
Il primo il pulsante radio è in realtà solo un altro tipo di tag di input che abbiamo visto.

3
00:00:11,010 --> 00:00:12,740
È simile a una casella di controllo.

4
00:00:12,780 --> 00:00:16,170
Il prossimo il tag select è il modo in cui otteniamo i menu a tendina.

5
00:00:16,230 --> 00:00:20,550
Infine, parleremo dell'area di testo, ovvero di come possiamo creare input

6
00:00:20,550 --> 00:00:22,290
di testo con più righe.

7
00:00:23,130 --> 00:00:26,900
Quindi ho intenzione di iniziare Naturalmente con quelle standard HMO standard.

8
00:00:26,970 --> 00:00:33,570
Vai avanti e aggiungi titolo, salva quello e prosegui e aggiungi un pulsante di opzione.

9
00:00:33,750 --> 00:00:37,830
Quindi è solo il tipo di input, perché la radio.

10
00:00:37,830 --> 00:00:43,410
E ho intenzione di duplicarlo e ho intenzione di dare l'altro tipo perché la casella

11
00:00:43,410 --> 00:00:46,570
di controllo solo così puoi vederli fianco a fianco.

12
00:00:46,650 --> 00:00:48,900
Quindi questo è un pulsante radio qui.

13
00:00:49,650 --> 00:00:51,850
Non posso spegnere una volta che l'ho selezionato.

14
00:00:51,870 --> 00:00:55,350
Questa è una casella di controllo che posso attivare e disattivare.

15
00:00:55,470 --> 00:01:03,390
Quindi la differenza è che una casella di controllo consente a un utente di selezionarla o deselezionata per avere diciamo che ci

16
00:01:03,390 --> 00:01:07,310
sono cinque diverse scelte di cose che un utente può controllare.

17
00:01:07,320 --> 00:01:09,890
Diciamo che stiamo chiedendo agli utenti di selezionare il loro.

18
00:01:10,080 --> 00:01:12,800
Questo è un sito di lavoro e vogliamo che selezionino le loro competenze.

19
00:01:12,900 --> 00:01:18,990
Vogliamo che siano in grado di dire javascript e vedere come HMO o forse solo javascript e sono solo un gruppo di

20
00:01:18,990 --> 00:01:21,960
checkbox che controllano e disattivano il nostro pulsante di opzione.

21
00:01:21,960 --> 00:01:26,280
Tuttavia è usato solitamente quando un utente ha una scelta.

22
00:01:26,280 --> 00:01:33,840
Quindi un esempio tipicamente sui siti Web dovrebbe essere qualcosa come il genere in cui ti chiede di

23
00:01:33,840 --> 00:01:36,210
controllare maschio o femmina o altro.

24
00:01:36,600 --> 00:01:38,920
E tu hai solo una scelta.

25
00:01:39,000 --> 00:01:41,360
Non puoi sapere non selezionare.

26
00:01:41,430 --> 00:01:49,410
Devi scegliere uno degli elementi per farlo, diciamo per esempio che avremo un modulo in cui gli utenti scelgono se

27
00:01:49,500 --> 00:01:52,110
preferiscono gatti o cani e non

28
00:01:55,830 --> 00:01:58,090
c'è alcuna opzione per selezionarli entrambi.

29
00:01:58,110 --> 00:02:03,470
Purtroppo in questo mondo è nero o bianco o preferiamo i gatti che preferiamo i cani.

30
00:02:04,080 --> 00:02:07,430
Quindi per farlo avremo due pulsanti radio.

31
00:02:07,650 --> 00:02:15,600
E se è tutto ciò che facciamo per iniziare, ne posso prendere uno e posso anche scegliere l'altro.

32
00:02:15,600 --> 00:02:16,650
Non proprio quello che vogliamo.

33
00:02:16,650 --> 00:02:18,780
Voglio essere in grado di sceglierne solo uno.

34
00:02:19,080 --> 00:02:24,550
Quindi la prima cosa che voglio fare è ottenere un modulo e ho intenzione di spostare i miei input in quella forma.

35
00:02:25,170 --> 00:02:29,490
E per ora lo lasceremo in modo che sia solo una richiesta get e solo l'azione predefinita

36
00:02:29,490 --> 00:02:31,290
che è solo per aggiornare la pagina.

37
00:02:31,650 --> 00:02:40,080
La prossima cosa che faremo è aggiungere alcune etichette, quindi ho intenzione di andare avanti e usare

38
00:02:40,080 --> 00:02:45,360
la sintassi di quattro, quindi questa sarà per i cani.

39
00:02:48,030 --> 00:02:51,570
E poi dobbiamo dare il nostro contributo e io D. cani.

40
00:02:51,650 --> 00:02:53,870
Ma quelli devono coincidere quindi.

41
00:02:53,880 --> 00:02:55,690
La stessa cosa qui.

42
00:02:55,980 --> 00:03:06,120
Un altro tag etichetta per i gatti e poi i gatti Id.

43
00:03:06,210 --> 00:03:08,360
Quindi se sei fresco ora abbiamo due scelte.

44
00:03:08,430 --> 00:03:10,160
Ma posso ancora scegliere entrambi.

45
00:03:10,500 --> 00:03:17,580
Quindi quello che dobbiamo fare è dirgli come questi due pulsanti radio sono per la stessa scelta in modo da

46
00:03:17,580 --> 00:03:20,550
poter scegliere uno o l'altro, ma sono una decisione.

47
00:03:20,550 --> 00:03:27,090
usare l'attributo name che ricorda che il nome sta dando un singolo input a un nome, ma m lo può

48
00:03:27,090 --> 00:03:34,620
fare riferimento ad esso ed è anche il modo in cui è memorizzato o inviato nella richiesta HGP che i nomi sono importanti.

49
00:03:34,620 --> 00:03:36,000
Quindi per farlo dobbiamo

50
00:03:36,270 --> 00:03:37,580
Quindi diamo un nome qui.

51
00:03:37,620 --> 00:03:46,370
Prendiamo il primo nome, chiamiamolo pet choice.

52
00:03:47,610 --> 00:03:51,890
E poi su input qui daremo anche lo stesso identico nome.

53
00:03:52,200 --> 00:03:59,760
E il motivo per cui lo vedremo in un secondo è che, dando loro lo stesso nome, li collega quindi in

54
00:03:59,760 --> 00:04:02,260
modo che ora possiamo sceglierne solo uno.

55
00:04:02,340 --> 00:04:03,510
Quindi se ci aggiorniamo.

56
00:04:03,650 --> 00:04:08,510
Posso fare clic su cani o gatti ma non su entrambi.

57
00:04:10,050 --> 00:04:11,500
E un'altra cosa che ti mostrerò.

58
00:04:11,520 --> 00:04:14,400
Aggiungiamo un pulsante alla fine del modulo.

59
00:04:15,630 --> 00:04:21,360
E quello che abbiamo visto finora è in realtà il tipo di input è uguale a submit nella parte inferiore di un

60
00:04:21,360 --> 00:04:26,760
modulo, ma sto mostrando un pulsante solo per mostrarti che se il pulsante è l'ultima cosa in un modulo, in realtà

61
00:04:26,760 --> 00:04:27,800
invierà il modulo .

62
00:04:27,870 --> 00:04:33,960
Quindi ci sono alcune opzioni di input per inviare effettivamente il modulo al pulsante finale alla fine o il

63
00:04:33,960 --> 00:04:35,490
tipo di input che invierai.

64
00:04:35,490 --> 00:04:38,250
Quindi ora selezioniamo i cani, naturalmente.

65
00:04:38,250 --> 00:04:40,270
L'unica scelta naturale lì.

66
00:04:40,380 --> 00:04:47,520
Ricorda che il nome è la scelta dell'animale domestico, quindi dovremmo vedere qualcosa qui nella stringa di query, proprio come con

67
00:04:47,520 --> 00:04:48,710
qualsiasi altro input.

68
00:04:48,750 --> 00:04:57,420
Quando clicco, vediamo le scelte dell'animale domestico uguali a e quindi O N o su cui non è proprio quello che ci aspettavamo.

69
00:04:58,110 --> 00:05:04,710
Quindi ci manca una cosa che dobbiamo dire anche quale sia il valore di questa decisione.

70
00:05:04,710 --> 00:05:09,210
Quindi, quando vai avanti e aggiungi il tag value all'interno dell'attributo value.

71
00:05:09,360 --> 00:05:22,610
E diciamo solo che questo valore sarà solo il cane e questo sarà gatti e cerchiamo di essere buoni tutto in

72
00:05:22,610 --> 00:05:28,010
maiuscolo così da poter vedere cosa viene da dove.

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

74
00:05:28,790 --> 00:05:36,430
Quindi, se l'utente fa clic sui cani con il nome di scelta dell'animale domestico, memorizza il valore di cani in maiuscolo se l'utente

75
00:05:36,440 --> 00:05:42,910
invia e fa clic sui gatti sotto il valore o il nome dell'animale domestico sceglie il valore di gatti

76
00:05:42,920 --> 00:05:43,690
in maiuscolo.

77
00:05:44,000 --> 00:05:50,170
Quindi, solo per dimostrare che facciamo clic su cani vanno e otteniamo la scelta dell'animale domestico equivale a cani.

78
00:05:50,360 --> 00:05:53,630
Se facciamo gatti otteniamo la scelta dell'animale domestico perché i gatti.

79
00:05:53,690 --> 00:05:58,790
Quindi il prossimo elemento di cui parleremo è il tag select e con un tag select cosa

80
00:05:58,790 --> 00:06:01,260
fare è creare dei bei menu a tendina.

81
00:06:01,730 --> 00:06:03,300
Quindi viene chiamato il nome del tag.

82
00:06:03,350 --> 00:06:04,510
È solo selezionare.

83
00:06:04,690 --> 00:06:06,470
È un tag di apertura e chiusura.

84
00:06:06,860 --> 00:06:10,860
E se lo faccio e poi lo faccio scivolare e aggiorno la mia pagina.

85
00:06:10,920 --> 00:06:13,040
In realtà ho già un menu a discesa.

86
00:06:13,060 --> 00:06:14,890
È completamente vuoto.

87
00:06:14,930 --> 00:06:18,660
Quindi insieme al tag select usiamo il tag option.

88
00:06:18,940 --> 00:06:25,150
Quindi all'interno di lì per ogni opzione possibile che vogliamo utilizzare o per selezionare aggiungiamo un tag opzione.

89
00:06:25,430 --> 00:06:29,140
Facciamo quindi un menu a discesa che ha portato l'utente a scegliere il suo

90
00:06:37,610 --> 00:06:39,510
colore preferito e facciamo alcune opzioni qui.

91
00:06:39,590 --> 00:06:46,810
Rosso arancio e giallo

92
00:06:48,680 --> 00:06:53,780
Quindi, come puoi vedere, abbiamo già una bella discesa qui con le nostre scelte.

93
00:06:54,270 --> 00:06:58,330
E se premo andare, selezioniamo l'arancione e premo.

94
00:06:58,940 --> 00:07:05,740
Vedrai che in realtà non prendiamo niente qui e là sei come facciamo se selezioniamo i cani

95
00:07:05,770 --> 00:07:08,070
gialli questa volta e loro premono.

96
00:07:08,210 --> 00:07:13,940
Ho ancora solo la scelta dell'animale domestico e questo perché non abbiamo un nome che forniamo.

97
00:07:14,060 --> 00:07:20,030
Quindi, sulla nostra selezione, dobbiamo dargli un nome e chiamiamola fav e andiamo solo con il

98
00:07:20,020 --> 00:07:21,360
colore e lasciamo perdere.

99
00:07:22,270 --> 00:07:29,170
E aggiorno la mia pagina facciamo clic sui gatti facciamo clic su giallo e guardiamo qui quando ho colpito andare.

100
00:07:29,360 --> 00:07:33,810
Ora ottengo le scelte dell'animale domestico, il gatto e il colore sono gialli.

101
00:07:34,460 --> 00:07:42,890
Quindi quello che vedrai è che, a seconda dell'opzione che ho selezionato in questo caso, le mappe

102
00:07:42,880 --> 00:07:51,230
gialle il browser accetta tutto ciò che il testo è all'interno di quell'opzione e lo invia come

103
00:07:51,230 --> 00:07:54,150
valore sotto il nome del colore.

104
00:07:54,170 --> 00:08:02,450
il valore inviato nella richiesta sia identico a quello visualizzato all'utente nel menu a discesa.

105
00:08:02,450 --> 00:08:05,260
Pertanto, non sempre vogliamo che

106
00:08:05,260 --> 00:08:13,190
Quindi un esempio potrebbe essere qualcosa di simile se volessimo che l'utente scegliesse uno stato d'animo,

107
00:08:13,190 --> 00:08:21,510
quindi diciamo Qual è il tuo stato d'animo attuale e vogliamo avere una faccia felice qui.

108
00:08:23,120 --> 00:08:29,860
Un viso senza emozioni indovinato e una faccia triste.

109
00:08:31,780 --> 00:08:37,810
E finiamo con questa bella discesa qui con le nostre emoticon ma diciamo che quando un

110
00:08:37,930 --> 00:08:41,930
utente seleziona felice non vogliamo che tutto questo venga inviato.

111
00:08:42,200 --> 00:08:48,570
Invece vogliamo che la parola sia felice o che la parola sia inviata per farlo.

112
00:08:48,670 --> 00:08:52,570
Usiamo il tag value sorry l'attributo value.

113
00:08:52,750 --> 00:08:54,990
Quindi diremo valore uguale.

114
00:08:55,000 --> 00:09:04,720
E diciamo semplicemente che Happy è uguale a neutro e il valore è uguale a set.

115
00:09:04,730 --> 00:09:10,220
Ora se aggiorno i cani corretti andiamo fuori e faccio clic su Vai.

116
00:09:10,660 --> 00:09:14,890
Potete vedere che ottengo la scelta dell'animale domestico è cani e il colore è uguale a detto.

117
00:09:15,010 --> 00:09:20,690
E ovviamente perché abbiamo mantenuto il nome come colore che vorresti cambiare per essere stato d'animo, così

118
00:09:20,680 --> 00:09:24,030
che il nostro markup sia significativo e abbia effettivamente senso.

119
00:09:24,230 --> 00:09:29,050
Quindi i gatti sono veramente felici eppure l'umore è felice.

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

121
00:09:29,330 --> 00:09:33,140
Quindi questo è tutto ciò di cui abbiamo bisogno per coprire con select.

122
00:09:33,250 --> 00:09:37,250
Un'altra cosa è il tag textarea e textarea.

123
00:09:37,430 --> 00:09:44,330
Lo metterò su Indiano è un bel modo per creare input che sono più di una linea.

124
00:09:44,380 --> 00:09:50,480
Quindi abbiamo visto che gli input di testo come questo tipo di input sono uguali al

125
00:09:53,380 --> 00:09:55,250
testo e sono linee singole.

126
00:09:55,250 --> 00:10:01,360
Ma cosa succederebbe se volessimo chiedere ad un utente una bio o copiare e incollare un curriculum

127
00:10:01,370 --> 00:10:05,540
o qualcosa che non funzionasse molto bene e questo input davvero snello.

128
00:10:05,620 --> 00:10:09,390
Quindi textarea In realtà è un altro tag proprio come seleziona.

129
00:10:09,430 --> 00:10:12,490
Quindi non è un input con un tipo.

130
00:10:12,530 --> 00:10:15,560
In realtà è un tipo separato di controllo del modulo.

131
00:10:15,880 --> 00:10:19,690
E il modo in cui funziona ci sono due parti importanti.

132
00:10:19,690 --> 00:10:27,690
Il primo è che creiamo un tag dell'area di testo e che da solo ci fornirà questa area di testo.

133
00:10:28,420 --> 00:10:35,860
Ma ciò che possiamo anche fare è specificare esattamente quanto è grande l'area di testo che utilizza queste due righe

134
00:10:36,320 --> 00:10:37,720
e colonne di attributi.

135
00:10:37,970 --> 00:10:40,040
Quindi te lo mostrerò qui.

136
00:10:40,150 --> 00:10:47,890
Iniziamo con 10 righe e 50 colonne e puoi vedere che la mia textarea si è espansa in entrambe le direzioni.

137
00:10:48,230 --> 00:10:49,270
Ma è decisamente diventato più ampio.

138
00:10:49,280 --> 00:10:55,370
Quindi diciamo che ora voglio 100 righe e puoi vedere che ci vuole molto più tempo.

139
00:10:55,370 --> 00:10:59,920
Quindi, in pratica, possiamo specificare quante righe e quante colonne modificare le dimensioni della

140
00:10:59,920 --> 00:11:01,060
nostra area di testo.

141
00:11:01,850 --> 00:11:07,870
Un'altra cosa a riguardo è come con questi altri elementi torniamo a uno più piccolo a 10

142
00:11:07,880 --> 00:11:08,540
per 10.

143
00:11:08,650 --> 00:11:14,570
Proprio come con questi altri elementi, se volessi inviare questi dati nella richiesta, eliminiamo

144
00:11:14,580 --> 00:11:15,460
questo input.

145
00:11:15,670 --> 00:11:22,970
Avrei bisogno di dargli un nome il cui nome è uguale e diciamo solo che il paragrafo riempie

146
00:11:28,100 --> 00:11:30,170
questo paragrafo con del testo.

147
00:11:30,190 --> 00:11:33,800
Ho cliccato su go e puoi vedere o espandere questo.

148
00:11:33,930 --> 00:11:36,880
Prendo il paragrafo uguale a qualsiasi testo che ho

149
00:11:39,790 --> 00:11:40,590
qui ogni volta