Quindi in questo video andremo avanti e creeremo una soluzione per questo modulo di registrazione.
Quindi ho un nuovo file per salvarlo.
Chiamerò questo modulo di registrazione che HDMI userò la mia scorciatoia sublime e farò
funzionare la piastra della caldaia.
Quindi, quando ci troviamo di fronte a un progetto come questo, ci sono alcuni punti in cui potremmo iniziare.
E la prima cosa che farò è aggiungere il modulo Tagen e poi aggiungerò
questo H1
qui sopra e Louis metterà il registro.
Andiamo avanti e apriamo il nostro modulo di registrazione qui e spostiamolo.
Ok, non ancora lì, ma almeno o Ognuno ha un bell'aspetto.
Quindi torniamo al sublime e continuiamo, iniziamo con la cosa più semplice dovrebbe essere questi questo
alto livello di input.
Il nome e il cognome.
Quindi inizieremo con l'input.
E quelli sono di tipo uguale a testi.
un altro segnaposto Smith e poi dobbiamo dare due etichette.
E diamo un segnaposto che dovrebbe essere John, facciamo
Quindi potremmo usare la sintassi per le etichette.
Userò i quattro.
Quindi chiamerò prima questo e ci assicureremo di ottenere un ID uguale al primo.
E poi questa etichetta dirà il primo nome due punti che ci darà quello e quindi abbiamo bisogno di
fare esattamente la stessa cosa.
Un'altra etichetta per l'ultimo di dire due punti di cognome e quindi dobbiamo dare questo ID è uguale a scorso.
Quindi controlliamo e vediamo cosa abbiamo.
Fin qui tutto bene.
C'è una piccola cosa che ci manca e che non abbiamo
dato a questi input un nome, quindi basta dargli il nome prima e nominare l'ultimo grande.
Quindi passiamo al prossimo pezzo qui.
In realtà ci manca una cosa che è la validazione.
Quindi, mentre siamo qui, ricordiamo che il nome e il cognome non dovrebbero essere vuoti.
Quindi per farlo è molto semplice, basta aggiungere l'attributo richiesto sugli input richiesti e impostare
quello per essere vero.
Quindi andrò avanti ed espanderò questo solo per poter vedere un po 'più chiaramente su
cosa stiamo lavorando.
Quindi la prossima cosa se consultiamo il modulo qui è il pulsante radio di genere.
Quindi abbiamo bisogno di avere tre pulsanti radio.
Quindi quelli sono tipo di input uguale alla radio.
Tre di loro.
E se diamo un'occhiata a ciò che ci dà la prima cosa che vedrai è che sono in linea con gli altri
elementi che in realtà non è ciò che la forma che ti ho dato dovrebbe essere.
Quindi abbiamo alcune opzioni per fare in modo che le cose si comportino.
Possiamo buttarli in
un paragrafo come questo, basta aggiungere un po 'di spaziatura.
Ora li prendiamo su una linea separata.
Sto solo andando a usare un div qui.
Lì vai in un div.
Non ha esattamente la stessa spaziatura.
Un paragrafo ha nel video C S S in realtà parlerà di cosa sia questa spaziatura.
Quindi ora dobbiamo andare avanti e aggiungere o etichette
e prima di farlo iniziamo effettivamente a dare loro lo stesso nome, quindi il nome sarà di genere qui.
Andiamo avanti e avremmo dovuto usare il mio collegamento qui, che è quello di fare clic su più cursori in
modo da ottenere loro la denominazione del cross-gender e quindi diamo ad ognuno un valore.
Quindi il primo sarà il valore del maschio.
Il secondo sarà femminile.
L'ultimo è o e aggiorna.
Non vediamo nulla di tutto ciò ovviamente perché è solo dietro le quinte.
Quindi quello che dobbiamo fare è aggiungere le nostre etichette.
Quindi vorremmo tre etichette.
Il primo dirà l'etichetta numero quattro e chiameremo questo tettone
che abbiamo qui.
No Colon è così semplice e quindi Id è uguale alla posta.
Stessa cosa.
Un'altra etichetta qui.
Questo sarà femminile.
E poi vorremmo dire Id me per te causa femmina.
E poi continui a dire ID che fai femmina.
Quindi, come puoi vedere costruendo queste forme, a volte diventa un po 'noioso.
Hai un sacco di etichette e un sacco di cose di disordine devi solo stare
attento a fare in modo che tutto corrisponda correttamente.
Quindi vogliamo per gli altri voglio dire che vogliamo fare ID uguale sia.
Quindi vediamo su questo vediamo cosa abbiamo.
Tutto ok.
Sembra fantastico.
Possiamo selezionarne solo uno che è ciò che vogliamo.
Quindi possiamo andare avanti e aggiungere il pulsante di invio alla fine mentre siamo qui.
Quindi questo sarà il tipo di input uguale a submit.
E assicuriamoci solo che la validazione funzioni.
Sì, lo fa benissimo.
Quindi il prossimo abbiamo un indirizzo e-mail e una password.
E quelli sono anche su una nuova linea.
Quindi andiamo avanti e aggiungiamo un altro div e faremo un input e questa volta il tipo è uguale a
e-mail.
Non è solo testo e il segnaposto era la tua e-mail che non è certamente il miglior testo segnaposto,
ma ci atteniamo a quell'immagine assicurandoci di seguire il compito.
Quindi, il tipo di input è e-mail placeholder è la tua email e quindi ne abbiamo un altro per la
password e questo ci dà due input.
Prossimo possiamo o andare con il nome così per dire semplicemente che il nome è email qui membro nel caso in cui sei confuso.
per capire come inviare i dati cosa dovremmo inviare i dati nella richiesta sotto Qual è il nome di esso.
Quel nome è puramente utilizzato dietro le quinte
Quindi in questo caso qualunque cosa scriviamo in questo campo verrà chiamata e-mail.
Quindi non vediamo alcun impatto nel caso in cui.
Penso che questa sia una delle parti più confuse perché non è molto visiva.
Quindi questo dirà che il nome era password e quindi andiamo avanti e aggiungiamo o etichette.
Quindi, per mescolarlo qui userò l'altro tipo di etichetta che è il punto in cui annidiamo i dati all'interno
dell'etichetta stessa.
Quindi dirà i due punti e-mail piuttosto che la sintassi quattro e Id.
Funzionano allo stesso modo, facciamo e-mail e password.
Siamo molto precisi.
Ci sono due punti su entrambi.
Grande.
Ma salva questo e c'è un'altra cosa che dovremmo dare un'occhiata e
vedere sono valide le validazioni.
No.
Quindi una cosa che ci manca è che abbiamo bisogno di richiedere l'e-mail.
Quindi abbiamo bisogno di andare alla nostra e-mail e aggiungere richiesto ora ci aggiorniamo riempire questi.
Lasciamo vuoto l'e-mail se scriviamo una e-mail non valida.
Otteniamo questo errore.
Grande.
Quindi finora tutto sembra a posto.
Torneremo alla convalida della password bonus alla fine prima di arrivarci.
Passiamo alla selezione del compleanno.
Quindi tre menu a discesa.
Quindi di nuovo puoi aggiungere un altro div e questa volta in questo div aggiungeremo tre differenti selezioni.
Quindi uno due tre.
Iniziamo con questo primo che è di quattro mesi e andiamo avanti e iniziamo con l'etichetta.
C'è solo un'etichetta qui per tutto.
Quindi sai come fare con questa etichetta e mettere tutti e tre i soggetti
dentro e questa etichetta stava per dire un compleanno e sembrerà così.
Quindi se vediamo cosa otteniamo abbiamo i nostri tre input sono tre etichette e tutto ciò che dobbiamo fare
è aggiungere dentro i dati corretti.
Quindi questo è un mucchio di opzioni.
Quindi il primo andiamo avanti e aggiungo che farò due o tre qui, quindi sarà per mesi.
Quindi faremo gennaio e marzo.
Il prossimo fa la stessa cosa.
Solo poche opzioni e questo sarà per il giorno.
Quindi inizieremo.
Facciamo due cifre a 10 11 e 12.
E l'ultimo sarà l'anno.
Basta fare ancora tre e facciamo 1999 1999 2001.
Grande.
E puoi vedere che veniamo fatti scendere qui.
C'è una piccola differenza, tuttavia, che è il nostro inizio subito con gennaio e numeri
e l'anno.
Ma quello che ti ho dato inizia con il giorno e l'anno del mese.
Quindi ci sono alcuni modi per farlo.
il modulo sceglierà la prima opzione e deciderà il valore iniziale.
Il
più semplice è solo per fare la prima opzione dire mese giorno e anno e,
facendo ciò,
Questo è il modo più comune per farlo.
Quindi ora la nostra azienda sembra piuttosto buona.
controllo in modo da poter aggiungere ancora un altro div qui e quindi è
correttamente
div finale invece di questa inizieremo con l'etichetta questa volta facciamo quattro e chiamiamo chiamiamolo d'accordo.
Abbiamo solo bisogno della nostra finale Accetto i termini e le condizioni casella di
Ho accettato i termini e le condizioni
e quindi la prossima cosa di cui abbiamo bisogno è la nostra casella di controllo delle chiamate su nastro in ingresso, diamo
loro ID perché ho concordato e nominato e concordato.
Ed è quello che ci sembra buono per me.
Quindi una cosa che dobbiamo anche aggiungere ai nostri tag selezionati è il nome.
Chiamiamo questo mese
e questo del giorno e questo sarà qui.
E ricorda che se non avessimo voluto a gennaio e Fab e Mar fossero ciò che è stato effettivamente inviato
se volesse che fosse qualcosa di diverso come un numero corrispondente, metterei un valore qui.
Quindi per Jan potremmo mettere il valore 1 in questo caso.
Sto bene solo con Jan lì.
Non ho specificato come deve comportarsi.
Quindi torniamo qui sembra abbastanza buono.
Tutto sembra uguale.
L'ultima cosa che dobbiamo davvero discutere è l'effettiva convalida della password.
Quindi voglio solo mostrarti come puoi andare a trovarlo.
Quindi aprirò la convalida della lunghezza HMO e proviamo a farlo.
Come puoi vedere, in realtà sono già stato qui.
Questo è qualcosa che ho dovuto cercare di recente e sembra.
Quindi questo è Stack Overflow tra l'altro se non l'hai visto prima.
Questo permette a qualcuno di porre una domanda.
C'è qualche altro attributo che lo invecchia con l'aiuto di cui posso impostare una lunghezza minima del valore
per i campi.
E poi le persone forniscono risposte e le risposte votate più alte appaiono per prime.
Quindi questa risposta dice che puoi usare l'attributo pattern anche l'attributo richiesto.
In caso contrario, un campo di input con un valore vuoto verrà escluso dalla convalida del vincolo.
OK.
Quindi sembra che questo sia tutto ciò di cui abbiamo bisogno.
Quindi questo è un input che diamo che il pattern è uguale a questa strana cosa.
E poi richiesto e poi questo titolo.
Quindi, prima ancora che ci chiediamo cosa fa e cosa fa questo 5 comune.
Vediamo.
Quindi andiamo avanti trova la nostra password e questo è un sacco di cosa.
Essendo uno sviluppatore è un sacco di copiare e incollare alcune cose o trovare un codice
e modificarlo.
Quindi dobbiamo fare in modo che ciò corrisponda a quello che abbiamo, che è un nome di input è il tipo di password perché la password.
Quindi basta copiare questi tre attributi.
Quindi ora dobbiamo digitare il suo modello di password è cinque e 10 richiesti.
E il titolo equivale a cinque a 10 caratteri.
Quindi vediamo cosa aggiorna questo.
Assicurati di aver compilato tutto il resto.
Faccio clic su Invia e mi dice per favore compila questo campo.
Da 5 a 10 caratteri e tipo 2 e tipo 3 e tipo più di 10 non funzionano.
Ma se digito cinque o sei, funziona.
Quindi esploriamo un po 'di più.
Iniziamo con questo qui.
Cambiamo questo per essere.
La password deve essere compresa tra 5 e 10 caratteri
e aggiornata.
Assicurati di compilare tutto il resto in modo che possiamo ottenere questo errore.
E faccio clic su Invia e puoi vedere che ricevo quel messaggio che impostiamo la password deve essere tra
5 e 10 caratteri.
Quindi questo è ciò che questo titolo sta facendo.
In pratica è il messaggio di errore che viene visualizzato.
questa sintassi stiamo solo definendo la lunghezza di un intervallo di lunghezza accettabile per questo input.
Quindi l'altra nuova parte è questo pattern e questo è un po 'strano ma usando
Quindi se cambiamo questo per due o
tre, invio ancora non accettabili quelli non accettabili ma due è accettabile.
Quindi questo è solo la definizione di una gamma o un modello che dobbiamo seguire.
Quindi c'è sicuramente di più in questo puoi fare altre cose oltre a una lunghezza minima o una gamma di lunghezze, ma questo è tutto
ciò di cui avevo bisogno che tu trovassi qui.
Se non sei riuscito a scoprire che non ti preoccupare è ancora molto presto.
Ma ci saranno più opportunità per te di provare cose del genere.
Quindi ho una soluzione completa che ho scritto che è completa in quanto ha il giorno intero e gli input di anno e mese e
puoi vedere che è un po 'un casino.
Non l'ho scritto a mano e non mi aspettavo che lo scrivessi a mano.
Quindi vedremo come generarlo in seguito nella classe.
Potresti usare javascript per farlo per te, quindi non devi assolutamente scriverlo.
Quindi dai un'occhiata alla soluzione.
Se hai qualche domanda