Quindi in questo video parleremo di tre modi aggiuntivi per ottenere input da parte dell'utente.
Il primo il pulsante radio è in realtà solo un altro tipo di tag di input che abbiamo visto.
È simile a una casella di controllo.
Il prossimo il tag select è il modo in cui otteniamo i menu a tendina.
Infine, parleremo dell'area di testo, ovvero di come possiamo creare input
di testo con più righe.
Quindi ho intenzione di iniziare Naturalmente con quelle standard HMO standard.
Vai avanti e aggiungi titolo, salva quello e prosegui e aggiungi un pulsante di opzione.
Quindi è solo il tipo di input, perché la radio.
E ho intenzione di duplicarlo e ho intenzione di dare l'altro tipo perché la casella
di controllo solo così puoi vederli fianco a fianco.
Quindi questo è un pulsante radio qui.
Non posso spegnere una volta che l'ho selezionato.
Questa è una casella di controllo che posso attivare e disattivare.
Quindi la differenza è che una casella di controllo consente a un utente di selezionarla o deselezionata per avere diciamo che ci
sono cinque diverse scelte di cose che un utente può controllare.
Diciamo che stiamo chiedendo agli utenti di selezionare il loro.
Questo è un sito di lavoro e vogliamo che selezionino le loro competenze.
Vogliamo che siano in grado di dire javascript e vedere come HMO o forse solo javascript e sono solo un gruppo di
checkbox che controllano e disattivano il nostro pulsante di opzione.
Tuttavia è usato solitamente quando un utente ha una scelta.
Quindi un esempio tipicamente sui siti Web dovrebbe essere qualcosa come il genere in cui ti chiede di
controllare maschio o femmina o altro.
E tu hai solo una scelta.
Non puoi sapere non selezionare.
Devi scegliere uno degli elementi per farlo, diciamo per esempio che avremo un modulo in cui gli utenti scelgono se
preferiscono gatti o cani e non
c'è alcuna opzione per selezionarli entrambi.
Purtroppo in questo mondo è nero o bianco o preferiamo i gatti che preferiamo i cani.
Quindi per farlo avremo due pulsanti radio.
E se è tutto ciò che facciamo per iniziare, ne posso prendere uno e posso anche scegliere l'altro.
Non proprio quello che vogliamo.
Voglio essere in grado di sceglierne solo uno.
Quindi la prima cosa che voglio fare è ottenere un modulo e ho intenzione di spostare i miei input in quella forma.
E per ora lo lasceremo in modo che sia solo una richiesta get e solo l'azione predefinita
che è solo per aggiornare la pagina.
La prossima cosa che faremo è aggiungere alcune etichette, quindi ho intenzione di andare avanti e usare
la sintassi di quattro, quindi questa sarà per i cani.
E poi dobbiamo dare il nostro contributo e io D. cani.
Ma quelli devono coincidere quindi.
La stessa cosa qui.
Un altro tag etichetta per i gatti e poi i gatti Id.
Quindi se sei fresco ora abbiamo due scelte.
Ma posso ancora scegliere entrambi.
Quindi quello che dobbiamo fare è dirgli come questi due pulsanti radio sono per la stessa scelta in modo da
poter scegliere uno o l'altro, ma sono una decisione.
usare l'attributo name che ricorda che il nome sta dando un singolo input a un nome, ma m lo può
fare riferimento ad esso ed è anche il modo in cui è memorizzato o inviato nella richiesta HGP che i nomi sono importanti.
Quindi per farlo dobbiamo
Quindi diamo un nome qui.
Prendiamo il primo nome, chiamiamolo pet choice.
E poi su input qui daremo anche lo stesso identico nome.
E il motivo per cui lo vedremo in un secondo è che, dando loro lo stesso nome, li collega quindi in
modo che ora possiamo sceglierne solo uno.
Quindi se ci aggiorniamo.
Posso fare clic su cani o gatti ma non su entrambi.
E un'altra cosa che ti mostrerò.
Aggiungiamo un pulsante alla fine del modulo.
E quello che abbiamo visto finora è in realtà il tipo di input è uguale a submit nella parte inferiore di un
modulo, ma sto mostrando un pulsante solo per mostrarti che se il pulsante è l'ultima cosa in un modulo, in realtà
invierà il modulo .
Quindi ci sono alcune opzioni di input per inviare effettivamente il modulo al pulsante finale alla fine o il
tipo di input che invierai.
Quindi ora selezioniamo i cani, naturalmente.
L'unica scelta naturale lì.
Ricorda che il nome è la scelta dell'animale domestico, quindi dovremmo vedere qualcosa qui nella stringa di query, proprio come con
qualsiasi altro input.
Quando clicco, vediamo le scelte dell'animale domestico uguali a e quindi O N o su cui non è proprio quello che ci aspettavamo.
Quindi ci manca una cosa che dobbiamo dire anche quale sia il valore di questa decisione.
Quindi, quando vai avanti e aggiungi il tag value all'interno dell'attributo value.
E diciamo solo che questo valore sarà solo il cane e questo sarà gatti e cerchiamo di essere buoni tutto in
maiuscolo così da poter vedere cosa viene da dove.
OK.
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
invia e fa clic sui gatti sotto il valore o il nome dell'animale domestico sceglie il valore di gatti
in maiuscolo.
Quindi, solo per dimostrare che facciamo clic su cani vanno e otteniamo la scelta dell'animale domestico equivale a cani.
Se facciamo gatti otteniamo la scelta dell'animale domestico perché i gatti.
Quindi il prossimo elemento di cui parleremo è il tag select e con un tag select cosa
fare è creare dei bei menu a tendina.
Quindi viene chiamato il nome del tag.
È solo selezionare.
È un tag di apertura e chiusura.
E se lo faccio e poi lo faccio scivolare e aggiorno la mia pagina.
In realtà ho già un menu a discesa.
È completamente vuoto.
Quindi insieme al tag select usiamo il tag option.
Quindi all'interno di lì per ogni opzione possibile che vogliamo utilizzare o per selezionare aggiungiamo un tag opzione.
Facciamo quindi un menu a discesa che ha portato l'utente a scegliere il suo
colore preferito e facciamo alcune opzioni qui.
Rosso arancio e giallo
Quindi, come puoi vedere, abbiamo già una bella discesa qui con le nostre scelte.
E se premo andare, selezioniamo l'arancione e premo.
Vedrai che in realtà non prendiamo niente qui e là sei come facciamo se selezioniamo i cani
gialli questa volta e loro premono.
Ho ancora solo la scelta dell'animale domestico e questo perché non abbiamo un nome che forniamo.
Quindi, sulla nostra selezione, dobbiamo dargli un nome e chiamiamola fav e andiamo solo con il
colore e lasciamo perdere.
E aggiorno la mia pagina facciamo clic sui gatti facciamo clic su giallo e guardiamo qui quando ho colpito andare.
Ora ottengo le scelte dell'animale domestico, il gatto e il colore sono gialli.
Quindi quello che vedrai è che, a seconda dell'opzione che ho selezionato in questo caso, le mappe
gialle il browser accetta tutto ciò che il testo è all'interno di quell'opzione e lo invia come
valore sotto il nome del colore.
il valore inviato nella richiesta sia identico a quello visualizzato all'utente nel menu a discesa.
Pertanto, non sempre vogliamo che
Quindi un esempio potrebbe essere qualcosa di simile se volessimo che l'utente scegliesse uno stato d'animo,
quindi diciamo Qual è il tuo stato d'animo attuale e vogliamo avere una faccia felice qui.
Un viso senza emozioni indovinato e una faccia triste.
E finiamo con questa bella discesa qui con le nostre emoticon ma diciamo che quando un
utente seleziona felice non vogliamo che tutto questo venga inviato.
Invece vogliamo che la parola sia felice o che la parola sia inviata per farlo.
Usiamo il tag value sorry l'attributo value.
Quindi diremo valore uguale.
E diciamo semplicemente che Happy è uguale a neutro e il valore è uguale a set.
Ora se aggiorno i cani corretti andiamo fuori e faccio clic su Vai.
Potete vedere che ottengo la scelta dell'animale domestico è cani e il colore è uguale a detto.
E ovviamente perché abbiamo mantenuto il nome come colore che vorresti cambiare per essere stato d'animo, così
che il nostro markup sia significativo e abbia effettivamente senso.
Quindi i gatti sono veramente felici eppure l'umore è felice.
OK.
Quindi questo è tutto ciò di cui abbiamo bisogno per coprire con select.
Un'altra cosa è il tag textarea e textarea.
Lo metterò su Indiano è un bel modo per creare input che sono più di una linea.
Quindi abbiamo visto che gli input di testo come questo tipo di input sono uguali al
testo e sono linee singole.
Ma cosa succederebbe se volessimo chiedere ad un utente una bio o copiare e incollare un curriculum
o qualcosa che non funzionasse molto bene e questo input davvero snello.
Quindi textarea In realtà è un altro tag proprio come seleziona.
Quindi non è un input con un tipo.
In realtà è un tipo separato di controllo del modulo.
E il modo in cui funziona ci sono due parti importanti.
Il primo è che creiamo un tag dell'area di testo e che da solo ci fornirà questa area di testo.
Ma ciò che possiamo anche fare è specificare esattamente quanto è grande l'area di testo che utilizza queste due righe
e colonne di attributi.
Quindi te lo mostrerò qui.
Iniziamo con 10 righe e 50 colonne e puoi vedere che la mia textarea si è espansa in entrambe le direzioni.
Ma è decisamente diventato più ampio.
Quindi diciamo che ora voglio 100 righe e puoi vedere che ci vuole molto più tempo.
Quindi, in pratica, possiamo specificare quante righe e quante colonne modificare le dimensioni della
nostra area di testo.
Un'altra cosa a riguardo è come con questi altri elementi torniamo a uno più piccolo a 10
per 10.
Proprio come con questi altri elementi, se volessi inviare questi dati nella richiesta, eliminiamo
questo input.
Avrei bisogno di dargli un nome il cui nome è uguale e diciamo solo che il paragrafo riempie
questo paragrafo con del testo.
Ho cliccato su go e puoi vedere o espandere questo.
Prendo il paragrafo uguale a qualsiasi testo che ho
qui ogni volta