E bentornato.
Entriamo in alcuni tag più avanzati e probabilmente il tag più importante che utilizzerai oltre a quelli che
abbiamo trattato finora, sono i tag di cui abbiamo bisogno per creare moduli.
Come sai, quando vai sui siti web, di solito c'è una sorta di modulo di accesso o di registrazione.
Quindi lo costruiremo oggi per iniziare.
Creiamo qui un nuovo file.
Lo salveremo e lo chiameremo HTML registrato sul nostro desktop.
Perfetto, e sappiamo che vogliamo usare anche la nostra piccola scorciatoia e la intitoleremo register, salvala.
E ora nel file indice, aggiungiamo un altro collegamento.
Questo fa riferimento a register dot html e dirò solo qui, registrati.
Va bene, salveremo entrambi questi file e aggiorniamo, abbiamo il registro.
Fare clic su registrati.
Bene, non abbiamo ancora nulla, ma sembra che funzioni, aggiungiamolo su una nuova riga solo perché sembra più
carino in questo modo.
Quindi per farlo, se ricordi, aggiungeremo un tag freno.
Quindi rinfreschiamoci.
Ecco qua.
Abbiamo una nuova pagina e registrati.
OK, quindi costruiamo questo modulo se entriamo per registrare DOT.
Il modo in cui scriviamo i moduli in HTML, mentre per comodità c'è un tag del modulo.
OK, ma questo tag del modulo stesso, deve contenere il modulo effettivo al suo interno.
Quindi che tipo di elementi del modulo abbiamo?
Bene, di nuovo, se ricordiamo il nostro buon vecchio amico W tre C, scriviamo i moduli.
E possiamo vedere qui che abbiamo una piccola fattoria.
E l'aggiornamento lo farà a schermo intero e puoi vedere qui che ci sono un sacco di informazioni su
di esso, ma puoi cercarlo tu stesso per ora.
Ti presenterò i più comuni, probabilmente quelli che utilizzerai il 90% delle volte.
Il primo, come facciamo con qualsiasi modulo e andiamo a quella base per ora, è quello che vogliamo inserire il nostro
nome.
Quindi come lo facciamo?
Abbiamo un tag di input.
Ha un tipo di testo perché, beh, il nostro nome sarà in forma di testo e possiamo chiuderlo ed è in realtà un
tag a chiusura automatica.
Quindi ora se salvo e aggiorno, OK, abbiamo una piccola scatola qui.
Spero che tu possa vederlo.
Ma, beh, probabilmente dovremmo intitolarlo perché non sapremo cosa rispondere in quel modo.
Quindi ci metteremo qui.
Diremo il nome.
Punto e virgola e salva, aggiorniamo, abbiamo il nome e ora rendiamolo un po' più grande.
Ecco qua.
Ora puoi inserire il tuo nome qui.
Stupendo.
Bene, aggiungiamone un altro per il nostro cognome.
E ancora, avremo il nostro tipo di input, quindi questo è un attributo e un valore di testo.
E se aggiorniamo, abbiamo il cognome, OK, ma sembra piuttosto brutto, ricorda che l'HTML legge solo riga per riga
e non sa davvero che vogliamo uno spazio qui.
Quindi, ancora una volta, possiamo aggiungere a.
Torna qui e aggiorna, e abbiamo nome e cognome.
OK, è abbastanza autoesplicativo.
Ora, cos'altro abbiamo in una forma?
Abbiamo e-mail.
Quindi aggiungiamo un altro campo, che è e-mail, e inseriremo nuovamente l'input.
Digita chiamate, testo.
Bene, aggiungi un'altra interruzione qui, perché avremo bisogno di quella distanza.
E salviamo l'aggiornamento, fantastico.
OK, quindi abbiamo il nostro modulo di registrazione generale.
E ovviamente con qualsiasi modulo, abbiamo bisogno di una sorta di pulsanti, giusto, come se avessimo bisogno di inviarlo da qualche parte in modo
da poterci registrare.
Bene, di nuovo, c'è un bel appetito per quello.
Quindi immettiamo l'input invece di un tipo di testo.
C'è un tipo di invio.
Così questo.
Se avessimo un'altra pausa qui.
E dico questo, mi rinfresco ha un vertice.
Ora, da dove viene questo vertice?
Bene, quando inserisci un tipo di input submit, crea automaticamente un pulsante.
E se non specifichi cosa dire, avrò solo questo testo.
Ma possiamo cambiarlo in modo da poter dare valore.
E mettiamo il registro.
Salva quell'aggiornamento, ora abbiamo un pulsante di registrazione.
OK, ma cosa succede se commettiamo errori in questo campo, scriviamo cose e per cosa vogliamo resettarlo, di nuovo, c'è
un input ora lì per quello.
E il tipo di quell'input, come puoi immaginare, viene resettato.
Quindi ora se chiudiamo questo in un'altra interruzione qui, in realtà possiamo mantenerlo sulla stessa
linea, salveremo l'aggiornamento.
E abbiamo ripristinato, quindi ora se inserisco qualcosa qui e diciamo che non voglio bene, non mi piace,
devo ripristinare il modulo.
Posso semplicemente fare clic su reset e cancella tutto per noi.
OK, potresti chiederti cosa succede quando facciamo clic su register prima di entrare in questo, voglio solo passare attraverso tutti
i tipi di input comuni e poi faremo clic su register per vedere cosa succede
con l'e-mail.
Idealmente vogliamo, prima di tutto, che sia richiesto in modo che quando fai clic su registrati, se
non hai fornito un'e-mail, non ti permetta di registrarti.
E c'è un attributo che possiamo usare per quello e che è richiesto.
E qui in realtà non dobbiamo specificare un valore perché automaticamente si presume che richiesto sia uguale a vero, il
che significa che questo campo del modulo è obbligatorio.
Quindi, se dico che aggiorno e lo lascio vuoto e clicco su registrati, dirò, per favore compila questo
campo.
Ora, vogliamo anche assicurarci che sia un campo e-mail appropriato, quindi se digito qualcosa del genere, vogliamo
comunque assicurarci che, sai, questa sia un'e-mail errata.
Non vogliamo registrarci.
Quindi il tipo di testo di input che ti ho detto per l'e-mail è in realtà sbagliato, ce n'è
uno specifico che possiamo usare, che è, come puoi immaginare, l'e-mail.
Quindi ora se aggiorno e digito qualcosa che non è un'e-mail e faccio clic su registrati.
Dirò per favore includi un e l'indirizzo email.
Molto bello.
È un po' come per magia, lo fa per te, il che è molto, molto bello.
Espandiamo la nostra conoscenza degli input e aggiungiamo alcuni altri campi che molto probabilmente avranno bisogno
di sapere il compleanno di qualcuno.
Quindi aggiungiamo il compleanno qui.
E per questo tipo di input, digitiamo.
Data.
Quindi, se dico questo e aggiorno, sembra che abbiamo un piccolo selettore di date così posso scegliere qualsiasi cosa qui.
Va bene, cos'altro ci serve?
Abbiamo anche bisogno del genere, quindi inseriremo il tipo di input e per il genere.
Beh, non c'è un appetito specifico per il genere, ma c'è qualcosa chiamato radio.
E la radio è, come suggerisce il nome, pulsanti di opzione.
Così ora.
Fai clic su Aggiorna e, beh, ho un pulsante di opzione, ma idealmente vorremmo avere delle opzioni, giusto?
Quindi come lo facciamo?
Quindi per la radio, dobbiamo anche dire se è maschio o femmina, diciamo all'interno del genere.
Faremo una pausa qui in fila e diremo.
E metti il tipo radio e diremo maschio e anche noi vogliamo.
Femmina.
E anche noi vogliamo.
Altro.
E quando aggiorniamo questo, abbiamo maschio, femmina e altro, ma vedi un problema qui, faccio semplicemente clic sui pulsanti di
opzione e non posso deselezionarli e idealmente puoi farlo.
Dovresti essere in grado di selezionarne solo uno.
E proprio ora, per come sono i pulsanti di opzione, non sanno dell'esistenza l'uno dell'altro.
Vogliamo assicurarci che sappiano che sono collegati, sono una famiglia e che solo uno di loro può essere
scelto.
Quindi come lo facciamo?
Il modo in cui lo facciamo è attraverso l'attributo name.
Quindi per il nome dirà genere.
E questo attributo del nome deve corrispondere a tutti i pulsanti di opzione in modo che sappiano che sono insieme, fanno parte
del campo di immissione del genere.
Quindi, se salvo qui e aggiorno.
Ora puoi vedere che posso selezionarne solo uno.
Va bene, perfetto.
Cos'altro dovremmo avere?
Beh, diciamo che voglio davvero sapere se hai animali domestici.
Quindi con gli animali domestici.
Avremo un tipo di input o potrai avere più animali domestici, quindi non saranno i pulsanti di opzione, vogliamo la casella di controllo.
Quindi casella di controllo, volevamo avere cani o gatti, ma gatto e vogliamo avere.
Non riesco a digitare oggi.
Casella di controllo e vogliamo avere cani.
Quindi salviamolo, aggiorniamolo e guardiamolo, abbiamo animali domestici, ma questa volta sono caselle di controllo, il che
significa.
Posso selezionare più.