Ora che abbiamo visto come aggiungere pulsanti alla nostra pagina web.
In questo esercizio, stiamo andando a guardare i moduli e come possiamo aggiungere moduli alla
nostra pagina web e anche stile questi elementi del modulo utilizzando le classi Bootstrap.
Tornando alla pagina contactus.html,
scorrere verso il basso fino a vedere questo commento lì chiamato «Il modulo va qui».
Stiamo andando a sostituire questo con il modulo in questa pagina web.
Quindi, cancelliamo questo e quindi costruiamo
il modulo in quella particolare posizione all'interno del div lì.
Per iniziare con il modulo,
ho intenzione di utilizzare il tag HTML modulo e costruire il modulo all'interno di questo tag HTML.
Quindi, all'interno di questo tag modulo,
aggiungiamo gli elementi del raggio del nostro modulo.
Quindi, all'interno di questo modulo,
ho intenzione di dividere questo modulo in più righe lì.
Per dividere il modulo in righe,
puoi semplicemente usare un div con class = «form-group» e quindi applicare la classe di riga ad esso.
Quindi, con questo, abbiamo intenzione di aggiungere in due gruppi di moduli qui.
Ho intenzione di copiare questo e poi incollarlo qui sotto.
Quindi, puoi vedere che ho intenzione di aggiungere due righe a questo modulo qui.
Quindi, per aggiungere un elemento in questo modulo,
stiamo andando a questo div e poi inizierò usando un tag etichetta qui.
E per i tag dell'etichetta,
quindi avrò due righe;
una che consente all'utente di inserire il loro nome
e la seconda per il loro cognome.
Quindi, questo è dove useremo quell'etichetta per specificare la classe lì.
Ora, Inoltre, Bootstrap ci permette di utilizzare la griglia Bootstrap
per specificare come questi moduli saranno disposti annuncio così applicherò il col-md-2.
Puoi vedere che ho applicato le classi di colonna md-2 a questo particolare elemento.
Quindi, questo elemento nel modulo occuperà due colonne.
Quindi, all'interno di questo elemento del modulo,
abbiamo diviso ogni riga in 12 colonne.
Quindi, perché abbiamo già usato la riga per il div,
in modo che ci fornirà 12 colonne all'interno del div lì.
Inoltre, devo applicare l'etichetta di forma col classe a questo.
Quindi, questo è ciò che mi permette di specificare un'etichetta qui.
Quindi, per questa etichetta,
inserirò l'etichetta come nome e quindi chiuderò il tag etichetta.
Quindi, questo tag etichetta mi permette di dare un'etichetta,
che occuperà due colonne di sinistra in questa particolare riga.
Sul lato destro, userò un altro div che la classe ha applicato come col-md-10.
Si noti che l'etichetta precedente utilizzava il col-md-2 lì.
Quindi, per questo div,
ho intenzione di applicare il col-md-10 lì.
E poi all'interno di questo div,
applicherò un elemento di input,
che è del testo di tipo.
Quindi, se si ha familiarità con i moduli da HTML,
vedrete che stiamo usando gli elementi del modulo da HTML per
creare quel modulo qui in modo che la casella di input qui è del tipo di testo.
Ora, questo è dove stiamo andando ad applicare le classi Bootstrap a questo
e la classe Bootstrap corrispondente per questo
è il controllo del modulo e quindi posso specificare
un ID per questo come nome.
Quindi, nota che questo ID corrisponde a questa etichetta per div.
Quindi, nome, e poi nome come
nome e anche specificare
un segnaposto per questo quindi lasciami usare la riga successiva qui,
segnaposto come, sono sicuro dalla tua conoscenza di HTML,
capisci come questa specifica è fatta qui.
Quindi, con questo, abbiamo creato il nostro primo elemento di forma nella nostra forma.
Diamo una rapida occhiata alla pagina web.
Andando alla nostra pagina web, è ora possibile vedere come l'aggiunta negli elementi del modulo ha creato
questa casella di testo di input e l'etichetta sul lato sinistro.
Ora, ho intenzione di aggiungere in un'altra riga con il cognome.
Tornando al mio contactus.html,
fammi semplicemente copiare questa parte e poi incollarla nel secondo div qui,
quindi entrare e modificarlo.
Dal nome lo cambio in cognome.
Assicurati di completare correttamente tutte le modifiche.
Anche una modifica errata mancante,
farà sì che il tuo modulo non funzioni correttamente, quindi assicurati che
tutte le cose del nome qui siano sostituite dal mio cognome.
Quindi, il cognome,
controllo modulo di testo md-10.
L' ID qui dovrebbe essere il cognome e il nome dovrebbe anche
essere il cognome e il segnaposto di
nuovo il cognome quindi questo dovrebbe aggiungere in una seconda riga con il cognome.
Andando alla tua pagina web,
puoi vedere ora il modulo
lentamente entrare in forma in modo da avere il nome e il cognome.
Ora, consente di aggiungere successivamente in un elementi di input.
Vedremo come funziona man mano che aggiungiamo nel codice.
Passando ora alla parte successiva dell'esercizio,
qui aggiungeremo altri due campi nel
nostro modulo qui per inserire il numero di telefono e l'ID e-mail.
Poiché la struttura di base del codice è simile
al nome e al cognome che hai già aggiunto al modulo,
quindi ho intenzione di copiare il codice dal nome e
dal cognome e quindi incollarlo qui e quindi modificare il codice di conseguenza.
Quindi, ho incollato il codice dal nome e dal cognome qui.
Andiamo avanti e ora modificare questo per trasformarlo in campi che consentono
all'utente di inserire il numero di telefono e l'ID e-mail.
Quindi, per il numero di telefono,
quindi qui abbiamo già il nome e il cognome sopra.
Quindi, il terzo, cambierò questo in etichetta per «telnum».
Quindi, questo è dal numero di telefono e poi dalle classi,
ho intenzione di applicare una classe col-12 a questo dicendo che questa etichetta sarà nel
suo disegno quando il modulo è mostrato su schermi di dimensioni extra piccole o piccole.
E poi, per dimensioni medio-superiori dello schermo,
questo sarebbe visualizzato in due colonne
di quella particolare riga qui in modo che questo è il cambiamento che faremo lì.
E poi anche, l'etichetta stessa,
lasciatemi cambiare per contattare il numero di telefono, contattare Tel.
Ora, il numero di telefono stesso,
lasceremo che l'utente lo inserisca come due parti; una,
che è il prefisso e la seconda,
che sarebbe il numero di telefono effettivo.
Quindi, prenderò questa parte del codice,
che era il campo di input che avevamo per
il nome e poi
creerò un altro qui sotto, che userò per il numero di telefono stesso.
E ora trasformeremo questo primo nel campo per inserire il prefisso.
Puoi anche usarlo per esempio,
per il codice del paese se questo è quello che desideri inserire nel modulo.
Quindi, per il prefisso stesso,
ho intenzione di applicare per il div,
le classi = «col-5 col-md-3 qui».
Quindi, si noti che per lo schermo medio,
abbiamo due colonne occupate dall'etichetta,
tre colonne occupate dal prefisso stesso e
le restanti sette colonne lo darò al campo di testo qui.
Così, allo stesso modo, per il prefisso dico col 5.
Quindi, per schermi extra piccoli o piccoli, questo occuperà
cinque colonne e poi per le restanti sette colonne,
lasceremo che il numero di telefono si occupi a.
Quindi, lasciami cambiare il prossimo in col-7 e col-md-7 qui.
Ora, questo campo cambierò questo in tel,
tipo di input tel per il numero di telefono e la classe è controllo modulo,
l'ID è prefisso e il nome è prefisso e quindi il
segnaposto, lo cambierò in prefisso.
E la parte successiva,
cambieremo anche questo tipo tel e ID è telnum,
il nome è telnum e il segnaposto,
stesso, sarebbe il numero di tel.
Quindi, questo formerà il campo numero di telefono,
che verrà inserito come due parti;
il prefisso e il numero di telefono.
Quindi, stiamo usando, ancora una volta,
le classi di colonna per strutturare come
le due parti del campo di input vengono visualizzate nel modulo lì.
Ora l'ultimo, ovviamente,
questo sarebbe per l'ID e-mail, quindi l'etichetta,
lo trasformo in ID e-mail e quindi l'etichetta stessa
è e-mail e il tipo di input è e-mail.
Ora, cambiamo il tipo di e-mail,
che è consentito in HTML in modo che in seguito, se abbiamo bisogno di fare la convalida del modulo,
allora sappiamo che questo campo dovrebbe contenere
solo un tipo di e-mail di voce lì, e l'ID,
stesso, ID e-mail e il nome ID e-mail e il segnaposto.
E-mail. Questo è tutto.
Salviamo le modifiche e andiamo a dare un'occhiata al modulo aggiornato.
Andando al modulo nel browser,
ora vedi due righe aggiuntive aggiunte nel nostro modulo.
Il nome e il cognome devono essere aggiunti nella parte precedente dell'esercizio.
Quindi, qui, abbiamo il numero di telefono di contatto,
che è diviso in prefisso e numero di telefono.
Si noti come abbiamo utilizzato le classi di colonna per posizionare questi due
nel modulo stesso e quindi il campo e-mail qui.
Diamo un'occhiata alla stessa cosa su una dimensione dello schermo extra piccola.
Quindi, quando vai a una dimensione dello schermo extra piccola,
noterai come è disposto il modulo stesso.
Vedrai che l'etichetta è in alto e poi il campo stesso in basso.
Quindi nome, cognome.
Si noti come i
campi di immissione del numero di telefono del contatto sono posizionati utilizzando le classi di colonna
, quindi il prefisso qui
, il numero di telefono
e quindi l'ID e-mail qui.
Ora, continueremo con l'esercizio.
Continuando nel passaggio successivo,
aggiungeremo in una casella di controllo e poi in seguito aggiungeremo in un selezionare due o quattro.
Per aggiungere una casella di controllo,
cerchiamo di copiare questo gruppo di moduli qui in modo che lo aggiungeremo come un'altra riga qui,
e quindi aggiungere nel gruppo modulo div qui,
e quindi chiudere il div qui.
E poi all'interno di questa riga del gruppo di moduli,
quindi questo ci dà un'altra riga nel modulo.
Quindi all'interno di questa riga del gruppo di moduli,
lasciami aggiungere prima la casella di controllo.
Quindi, per fare ciò, aggiungeremo un div con la classe = «col-md-6",
quindi vedrai che questo occuperà
sei colonne nella dimensione dello schermo da media a extra large,
e quindi offset-md-2, quindi questo lo compenserà a
destra di due colonne e quindi mostrerà la casella di controllo lì.
Ora, dentro qui, per aggiungere una casella di controllo,
diremo div con la classe = «form-check» e
all'interno di questa classe di controllo del modulo aggiungeremo un tipo di input = «checkbox»
e la classe = «form-check-input» e poi lasciami andare alla riga successiva e poi
dire name = «approva» e
id = «approva» e il valore è una stringa vuota lì.
E a questa casella di controllo,
aggiungiamo un'etichetta.
Quindi, per aggiungere un'etichetta,
andremo e aggiungeremo in
classe etichetta = «form-check-label» e poi questa etichetta
è per questa casella di controllo che abbiamo appena aggiunto.
Quindi, è per questo che diremo per = «approva» quindi nota che per la casella di controllo,
avevamo dato il nome e l'ID come approvazione, quindi è per questo che qui,
saremo salvati per l'etichetta per l'approvazione.
E poi all'interno di questa etichetta,
specificheremo il contenuto come 'Possiamo contattarti? '
E poi salvare le modifiche e andiamo a dare un'occhiata al nostro modulo.
Andando alla pagina web,
ora puoi vedere che abbiamo aggiunto in una casella di controllo insieme a un'etichetta qui e notare
che questa etichetta è in grassetto a causa dell'uso del tag «forte» lì,
e abbiamo fatto offset-md-2.
Ecco perché spinge questa casella di controllo fin qui.
Questo non ha un'etichetta qui, ma invece questo è spinto proprio qui,
quindi questa è la ragione per usare offset-md-2 qui,
e questo occupa md-6 quindi sei colonne qui.
Non abbiamo ancora finito con questo.
Ho intenzione di aggiungere nella parte successiva qui,
che è una casella di selezione lì.
Quindi applicherò un altro div qui con
la classe = «col-md-3 offset-md-1" qui.
E all'interno di questo div,
ho intenzione di definire una selezione.
Quindi, ancora una volta, dalla tua conoscenza dell'HTML,
sai cosa fa una selezione per te.
Ora, la selezione applicherà
il controllo del modulo delle classi, quindi questa è la classe Bootstrap che sto applicando alla selezione qui
e chiuderà la selezione.
E qui dentro, ho bisogno di dare le opzioni per la selezione.
Quindi, sto usando una semplice selezione qui,
e quindi il primo è un'opzione
per telefono o e-mail e chiudere l'opzione.
Quindi, questo crea un elemento di selezione nel mio modulo,
che ha due opzioni:
telefono ed e-mail, quindi,
salviamo le modifiche.
Dando un'occhiata alla nostra pagina web, è
ora possibile vedere come la casella di selezione telefono e e-mail è ora creata qui in modo che questo
mi permette di selezionare quale fare e poi si può anche selezionare la casella di controllo in questo modo.
Quindi, questo termina la riga successiva.
Aggiungiamo un'altra riga,
che consentirà all'utente di digitare effettivamente il proprio feedback.
Quindi, userò un'area di testo per formattarlo.
Per il prossimo, userò un'area di testo.
Quindi, quello che ho intenzione di fare è solo andare su e copiare questa parte e-mail di esso.
Sono troppo pigro per continuare a digitare tutto il tempo.
Quindi, tendo a tagliare e incollare dove possibile, ma per questo,
l'etichetta dovrebbe essere il feedback e l'etichetta del modulo colonna,
e quindi il testo effettivo è, «Il tuo feedback qui».
Quindi questa è l'etichetta.
E poi, qui, il secondo,
formatterò questo.
Invece del tipo di input,
lo cambierò in un'area di testo,
e quindi non ho bisogno del tipo lì.
Area di testo, la classe è ancora controllo modulo e l'ID è feedback.
Il nome è un feedback e il segnaposto non è necessario
qui e invece cambiarlo in quante righe
voglio dare dal feedback per l'area di testo?
Quindi dirò 12 righe e poi chiuderò il testo.
Quindi nota come ho incluso la textarea nel mio modulo.
Salvare le modifiche.
Dai un'occhiata. Andando alla mia pagina web,
ora vedi il mio modulo prendere la sua forma completa qui.
Hai il nome, il cognome, il
telefono, l'email e poi il feedback.
L' area di testo di 12 righe.
Ora, avrai bisogno di un pulsante che l'utente dovrebbe fare clic per inviare il loro feedback.
Quindi, consente di aggiungere un pulsante di invio a questo modulo.
Tornando di nuovo al modulo,
crea un'altra riga qui usando
il div qui con la riga del gruppo di moduli
qui, e dentro qui aggiungerò un pulsante qui.
Quindi, direi, div
class = «offset-md-2" perché voglio che il mio pulsante sia
posizionato proprio sotto tutti quei campi che
ho qui in modo che le due colonne di sinistra vengano utilizzate per l'etichetta.
Quindi il pulsante di invio non ha bisogno di un'etichetta, quindi ho intenzione di
spingerlo a destra qui e poi
direi «col-md-10" in modo che questo occupi le restanti 10 colonne lì.
E poi dentro quei div,
ho intenzione di aggiungere un pulsante lì.
Quindi, quando aggiungi un pulsante al tuo modulo,
usa il tag pulsante qui con un tipo di invio.
Quindi, questo è il pulsante di invio per il tuo modulo lì e la classe.
Ricorda le classi dei pulsanti, il pulsante primario,
quindi questo creerebbe un pulsante blu scuro nel tuo modulo e
quindi chiuderò il pulsante lì,
e poi andrò semplicemente dentro e dentro il pulsante,
darò il nome come «Invia feedback» e quindi salverò le modifiche.
Ora, il nostro modulo è completo.
Quindi, diamo un'occhiata alla versione finale del nostro modulo.
Andando alla nostra pagina web,
è ora possibile vedere il modulo completato.
Tutti questi campi che abbiamo visto già,
il pulsante in basso con la scritta «Invia
Feedback» e il pulsante blu scuro a causa dell'uso del pulsante «primario».
Quindi, questo completa il modulo che volevamo creare nella nostra pagina web.
Con questo, completiamo questo esercizio,
dove abbiamo visto come possiamo costruire un modulo e includerlo nella nostra pagina web.
Lavorerai con i moduli in alcuni degli
esercizi successivi, incluso il tuo secondo incarico.
Questo è un buon momento per voi per fare un buon commento con i moduli di messaggio.