1
00:00:03,250 --> 00:00:07,810
Ora che abbiamo visto come aggiungere pulsanti alla nostra pagina web.

2
00:00:07,810 --> 00:00:12,560
In questo esercizio, stiamo andando a guardare i moduli e come possiamo aggiungere moduli alla

3
00:00:12,560 --> 00:00:19,220
nostra pagina web e anche stile questi elementi del modulo utilizzando le classi Bootstrap.

4
00:00:19,220 --> 00:00:23,065
Tornando alla pagina contactus.html,

5
00:00:23,065 --> 00:00:28,215
scorrere verso il basso fino a vedere questo commento lì chiamato «Il modulo va qui».

6
00:00:28,215 --> 00:00:32,990
Stiamo andando a sostituire questo con il modulo in questa pagina web.

7
00:00:32,990 --> 00:00:35,715
Quindi, cancelliamo questo e quindi costruiamo

8
00:00:35,715 --> 00:00:39,945
il modulo in quella particolare posizione all'interno del div lì.

9
00:00:39,945 --> 00:00:41,855
Per iniziare con il modulo,

10
00:00:41,855 --> 00:00:50,585
ho intenzione di utilizzare il tag HTML modulo e costruire il modulo all'interno di questo tag HTML.

11
00:00:50,585 --> 00:00:52,960
Quindi, all'interno di questo tag modulo,

12
00:00:52,960 --> 00:00:57,925
aggiungiamo gli elementi del raggio del nostro modulo.

13
00:00:57,925 --> 00:01:00,195
Quindi, all'interno di questo modulo,

14
00:01:00,195 --> 00:01:04,405
ho intenzione di dividere questo modulo in più righe lì.

15
00:01:04,405 --> 00:01:06,780
Per dividere il modulo in righe,

16
00:01:06,780 --> 00:01:17,020
puoi semplicemente usare un div con class = «form-group» e quindi applicare la classe di riga ad esso.

17
00:01:20,370 --> 00:01:26,540
Quindi, con questo, abbiamo intenzione di aggiungere in due gruppi di moduli qui.

18
00:01:26,540 --> 00:01:29,795
Ho intenzione di copiare questo e poi incollarlo qui sotto.

19
00:01:29,795 --> 00:01:34,055
Quindi, puoi vedere che ho intenzione di aggiungere due righe a questo modulo qui.

20
00:01:34,055 --> 00:01:36,690
Quindi, per aggiungere un elemento in questo modulo,

21
00:01:36,690 --> 00:01:44,330
stiamo andando a questo div e poi inizierò usando un tag etichetta qui.

22
00:01:44,330 --> 00:01:46,550
E per i tag dell'etichetta,

23
00:01:46,550 --> 00:01:48,460
quindi avrò due righe;

24
00:01:48,460 --> 00:01:51,270
una che consente all'utente di inserire il loro nome

25
00:01:51,270 --> 00:01:53,470
e la seconda per il loro cognome.

26
00:01:53,470 --> 00:02:01,530
Quindi, questo è dove useremo quell'etichetta per specificare la classe lì.

27
00:02:01,530 --> 00:02:09,080
Ora, Inoltre, Bootstrap ci permette di utilizzare la griglia Bootstrap

28
00:02:09,080 --> 00:02:19,300
per specificare come questi moduli saranno disposti annuncio così applicherò il col-md-2.

29
00:02:19,300 --> 00:02:27,720
Puoi vedere che ho applicato le classi di colonna md-2 a questo particolare elemento.

30
00:02:27,720 --> 00:02:31,360
Quindi, questo elemento nel modulo occuperà due colonne.

31
00:02:31,360 --> 00:02:33,465
Quindi, all'interno di questo elemento del modulo,

32
00:02:33,465 --> 00:02:37,950
abbiamo diviso ogni riga in 12 colonne.

33
00:02:37,950 --> 00:02:40,940
Quindi, perché abbiamo già usato la riga per il div,

34
00:02:40,940 --> 00:02:45,030
in modo che ci fornirà 12 colonne all'interno del div lì.

35
00:02:45,030 --> 00:02:52,560
Inoltre, devo applicare l'etichetta di forma col classe a questo.

36
00:02:52,560 --> 00:02:56,905
Quindi, questo è ciò che mi permette di specificare un'etichetta qui.

37
00:02:56,905 --> 00:02:58,395
Quindi, per questa etichetta,

38
00:02:58,395 --> 00:03:07,070
inserirò l'etichetta come nome e quindi chiuderò il tag etichetta.

39
00:03:07,070 --> 00:03:10,485
Quindi, questo tag etichetta mi permette di dare un'etichetta,

40
00:03:10,485 --> 00:03:14,150
che occuperà due colonne di sinistra in questa particolare riga.

41
00:03:14,150 --> 00:03:22,740
Sul lato destro, userò un altro div che la classe ha applicato come col-md-10.

42
00:03:22,740 --> 00:03:28,420
Si noti che l'etichetta precedente utilizzava il col-md-2 lì.

43
00:03:28,420 --> 00:03:29,665
Quindi, per questo div,

44
00:03:29,665 --> 00:03:32,755
ho intenzione di applicare il col-md-10 lì.

45
00:03:32,755 --> 00:03:35,120
E poi all'interno di questo div,

46
00:03:35,120 --> 00:03:38,700
applicherò un elemento di input,

47
00:03:38,700 --> 00:03:42,750
che è del testo di tipo.

48
00:03:42,750 --> 00:03:46,770
Quindi, se si ha familiarità con i moduli da HTML,

49
00:03:46,770 --> 00:03:50,460
vedrete che stiamo usando gli elementi del modulo da HTML per

50
00:03:50,460 --> 00:03:55,910
creare quel modulo qui in modo che la casella di input qui è del tipo di testo.

51
00:03:55,910 --> 00:04:00,410
Ora, questo è dove stiamo andando ad applicare le classi Bootstrap a questo

52
00:04:00,410 --> 00:04:05,500
e la classe Bootstrap corrispondente per questo

53
00:04:05,500 --> 00:04:10,710
è il controllo del modulo e quindi posso specificare

54
00:04:10,710 --> 00:04:16,165
un ID per questo come nome.

55
00:04:16,165 --> 00:04:21,260
Quindi, nota che questo ID corrisponde a questa etichetta per div.

56
00:04:21,260 --> 00:04:26,625
Quindi, nome, e poi nome come

57
00:04:26,625 --> 00:04:30,735
nome e anche specificare

58
00:04:30,735 --> 00:04:37,190
un segnaposto per questo quindi lasciami usare la riga successiva qui,

59
00:04:37,940 --> 00:04:46,890
segnaposto come, sono sicuro dalla tua conoscenza di HTML,

60
00:04:46,890 --> 00:04:52,020
capisci come questa specifica è fatta qui.

61
00:04:52,020 --> 00:04:59,355
Quindi, con questo, abbiamo creato il nostro primo elemento di forma nella nostra forma.

62
00:04:59,355 --> 00:05:03,170
Diamo una rapida occhiata alla pagina web.

63
00:05:03,170 --> 00:05:08,310
Andando alla nostra pagina web, è ora possibile vedere come l'aggiunta negli elementi del modulo ha creato

64
00:05:08,310 --> 00:05:14,515
questa casella di testo di input e l'etichetta sul lato sinistro.

65
00:05:14,515 --> 00:05:18,105
Ora, ho intenzione di aggiungere in un'altra riga con il cognome.

66
00:05:18,105 --> 00:05:23,150
Tornando al mio contactus.html,

67
00:05:23,150 --> 00:05:29,215
fammi semplicemente copiare questa parte e poi incollarla nel secondo div qui,

68
00:05:29,215 --> 00:05:32,875
quindi entrare e modificarlo.

69
00:05:32,875 --> 00:05:39,890
Dal nome lo cambio in cognome.

70
00:05:39,890 --> 00:05:45,090
Assicurati di completare correttamente tutte le modifiche.

71
00:05:45,550 --> 00:05:49,470
Anche una modifica errata mancante,

72
00:05:49,470 --> 00:05:53,210
farà sì che il tuo modulo non funzioni correttamente, quindi assicurati che

73
00:05:53,210 --> 00:05:58,220
tutte le cose del nome qui siano sostituite dal mio cognome.

74
00:05:58,220 --> 00:05:59,795
Quindi, il cognome,

75
00:05:59,795 --> 00:06:02,640
controllo modulo di testo md-10.

76
00:06:02,640 --> 00:06:11,510
L' ID qui dovrebbe essere il cognome e il nome dovrebbe anche

77
00:06:11,510 --> 00:06:14,945
essere il cognome e il segnaposto di

78
00:06:14,945 --> 00:06:21,030
nuovo il cognome quindi questo dovrebbe aggiungere in una seconda riga con il cognome.

79
00:06:21,030 --> 00:06:22,530
Andando alla tua pagina web,

80
00:06:22,530 --> 00:06:24,000
puoi vedere ora il modulo

81
00:06:24,000 --> 00:06:28,150
lentamente entrare in forma in modo da avere il nome e il cognome.

82
00:06:28,150 --> 00:06:33,790
Ora, consente di aggiungere successivamente in un elementi di input.

83
00:06:33,790 --> 00:06:38,260
Vedremo come funziona man mano che aggiungiamo nel codice.

84
00:06:38,260 --> 00:06:41,989
Passando ora alla parte successiva dell'esercizio,

85
00:06:41,989 --> 00:06:46,220
qui aggiungeremo altri due campi nel

86
00:06:46,220 --> 00:06:51,690
nostro modulo qui per inserire il numero di telefono e l'ID e-mail.

87
00:06:51,690 --> 00:06:54,870
Poiché la struttura di base del codice è simile

88
00:06:54,870 --> 00:06:58,610
al nome e al cognome che hai già aggiunto al modulo,

89
00:06:58,610 --> 00:07:02,370
quindi ho intenzione di copiare il codice dal nome e

90
00:07:02,370 --> 00:07:08,000
dal cognome e quindi incollarlo qui e quindi modificare il codice di conseguenza.

91
00:07:08,000 --> 00:07:11,910
Quindi, ho incollato il codice dal nome e dal cognome qui.

92
00:07:11,910 --> 00:07:17,080
Andiamo avanti e ora modificare questo per trasformarlo in campi che consentono

93
00:07:17,080 --> 00:07:22,745
all'utente di inserire il numero di telefono e l'ID e-mail.

94
00:07:22,745 --> 00:07:24,420
Quindi, per il numero di telefono,

95
00:07:24,420 --> 00:07:28,200
quindi qui abbiamo già il nome e il cognome sopra.

96
00:07:28,200 --> 00:07:34,380
Quindi, il terzo, cambierò questo in etichetta per «telnum».

97
00:07:34,380 --> 00:07:38,745
Quindi, questo è dal numero di telefono e poi dalle classi,

98
00:07:38,745 --> 00:07:44,790
ho intenzione di applicare una classe col-12 a questo dicendo che questa etichetta sarà nel

99
00:07:44,790 --> 00:07:52,795
suo disegno quando il modulo è mostrato su schermi di dimensioni extra piccole o piccole.

100
00:07:52,795 --> 00:07:55,660
E poi, per dimensioni medio-superiori dello schermo,

101
00:07:55,660 --> 00:07:59,945
questo sarebbe visualizzato in due colonne

102
00:07:59,945 --> 00:08:04,655
di quella particolare riga qui in modo che questo è il cambiamento che faremo lì.

103
00:08:04,655 --> 00:08:06,875
E poi anche, l'etichetta stessa,

104
00:08:06,875 --> 00:08:14,860
lasciatemi cambiare per contattare il numero di telefono, contattare Tel.

105
00:08:15,230 --> 00:08:18,915
Ora, il numero di telefono stesso,

106
00:08:18,915 --> 00:08:22,600
lasceremo che l'utente lo inserisca come due parti; una,

107
00:08:22,600 --> 00:08:25,485
che è il prefisso e la seconda,

108
00:08:25,485 --> 00:08:28,225
che sarebbe il numero di telefono effettivo.

109
00:08:28,225 --> 00:08:31,120
Quindi, prenderò questa parte del codice,

110
00:08:31,120 --> 00:08:34,640
che era il campo di input che avevamo per

111
00:08:34,640 --> 00:08:40,315
il nome e poi

112
00:08:40,315 --> 00:08:44,190
creerò un altro qui sotto, che userò per il numero di telefono stesso.

113
00:08:44,190 --> 00:08:50,560
E ora trasformeremo questo primo nel campo per inserire il prefisso.

114
00:08:50,560 --> 00:08:52,540
Puoi anche usarlo per esempio,

115
00:08:52,540 --> 00:08:57,220
per il codice del paese se questo è quello che desideri inserire nel modulo.

116
00:08:57,220 --> 00:09:00,190
Quindi, per il prefisso stesso,

117
00:09:00,190 --> 00:09:02,520
ho intenzione di applicare per il div,

118
00:09:02,520 --> 00:09:09,105
le classi = «col-5 col-md-3 qui».

119
00:09:09,105 --> 00:09:13,410
Quindi, si noti che per lo schermo medio,

120
00:09:13,410 --> 00:09:16,805
abbiamo due colonne occupate dall'etichetta,

121
00:09:16,805 --> 00:09:20,630
tre colonne occupate dal prefisso stesso e

122
00:09:20,630 --> 00:09:25,385
le restanti sette colonne lo darò al campo di testo qui.

123
00:09:25,385 --> 00:09:29,650
Così, allo stesso modo, per il prefisso dico col 5.

124
00:09:29,650 --> 00:09:32,680
Quindi, per schermi extra piccoli o piccoli, questo occuperà

125
00:09:32,680 --> 00:09:37,520
cinque colonne e poi per le restanti sette colonne,

126
00:09:37,520 --> 00:09:42,640
lasceremo che il numero di telefono si occupi a.

127
00:09:42,640 --> 00:09:48,510
Quindi, lasciami cambiare il prossimo in col-7 e col-md-7 qui.

128
00:09:49,540 --> 00:09:54,365
Ora, questo campo cambierò questo in tel,

129
00:09:54,365 --> 00:09:58,965
tipo di input tel per il numero di telefono e la classe è controllo modulo,

130
00:09:58,965 --> 00:10:08,830
l'ID è prefisso e il nome è prefisso e quindi il

131
00:10:08,830 --> 00:10:12,415
segnaposto, lo cambierò in prefisso.

132
00:10:12,415 --> 00:10:14,215
E la parte successiva,

133
00:10:14,215 --> 00:10:21,885
cambieremo anche questo tipo tel e ID è telnum,

134
00:10:21,885 --> 00:10:28,060
il nome è telnum e il segnaposto,

135
00:10:28,060 --> 00:10:34,830
stesso, sarebbe il numero di tel.

136
00:10:34,830 --> 00:10:40,975
Quindi, questo formerà il campo numero di telefono,

137
00:10:40,975 --> 00:10:42,840
che verrà inserito come due parti;

138
00:10:42,840 --> 00:10:45,160
il prefisso e il numero di telefono.

139
00:10:45,160 --> 00:10:47,180
Quindi, stiamo usando, ancora una volta,

140
00:10:47,180 --> 00:10:51,540
le classi di colonna per strutturare come

141
00:10:51,540 --> 00:10:57,260
le due parti del campo di input vengono visualizzate nel modulo lì.

142
00:10:57,260 --> 00:10:59,490
Ora l'ultimo, ovviamente,

143
00:10:59,490 --> 00:11:02,940
questo sarebbe per l'ID e-mail, quindi l'etichetta,

144
00:11:02,940 --> 00:11:08,595
lo trasformo in ID e-mail e quindi l'etichetta stessa

145
00:11:08,595 --> 00:11:14,345
è e-mail e il tipo di input è e-mail.

146
00:11:14,345 --> 00:11:16,575
Ora, cambiamo il tipo di e-mail,

147
00:11:16,575 --> 00:11:22,060
che è consentito in HTML in modo che in seguito, se abbiamo bisogno di fare la convalida del modulo,

148
00:11:22,060 --> 00:11:24,040
allora sappiamo che questo campo dovrebbe contenere

149
00:11:24,040 --> 00:11:28,730
solo un tipo di e-mail di voce lì, e l'ID,

150
00:11:28,730 --> 00:11:37,490
stesso, ID e-mail e il nome ID e-mail e il segnaposto.

151
00:11:38,600 --> 00:11:42,295
E-mail. Questo è tutto.

152
00:11:42,295 --> 00:11:47,335
Salviamo le modifiche e andiamo a dare un'occhiata al modulo aggiornato.

153
00:11:47,335 --> 00:11:49,820
Andando al modulo nel browser,

154
00:11:49,820 --> 00:11:54,030
ora vedi due righe aggiuntive aggiunte nel nostro modulo.

155
00:11:54,030 --> 00:11:57,030
Il nome e il cognome devono essere aggiunti nella parte precedente dell'esercizio.

156
00:11:57,030 --> 00:11:59,050
Quindi, qui, abbiamo il numero di telefono di contatto,

157
00:11:59,050 --> 00:12:01,805
che è diviso in prefisso e numero di telefono.

158
00:12:01,805 --> 00:12:06,515
Si noti come abbiamo utilizzato le classi di colonna per posizionare questi due

159
00:12:06,515 --> 00:12:11,650
nel modulo stesso e quindi il campo e-mail qui.

160
00:12:11,650 --> 00:12:15,775
Diamo un'occhiata alla stessa cosa su una dimensione dello schermo extra piccola.

161
00:12:15,775 --> 00:12:18,465
Quindi, quando vai a una dimensione dello schermo extra piccola,

162
00:12:18,465 --> 00:12:20,800
noterai come è disposto il modulo stesso.

163
00:12:20,800 --> 00:12:24,690
Vedrai che l'etichetta è in alto e poi il campo stesso in basso.

164
00:12:24,690 --> 00:12:26,055
Quindi nome, cognome.

165
00:12:26,055 --> 00:12:28,605
Si noti come i

166
00:12:28,605 --> 00:12:33,160
campi di immissione del numero di telefono del contatto sono posizionati utilizzando le classi di colonna

167
00:12:33,160 --> 00:12:34,855
, quindi il prefisso qui

168
00:12:34,855 --> 00:12:36,085
, il numero di telefono

169
00:12:36,085 --> 00:12:38,410
e quindi l'ID e-mail qui.

170
00:12:38,410 --> 00:12:41,630
Ora, continueremo con l'esercizio.

171
00:12:41,630 --> 00:12:44,145
Continuando nel passaggio successivo,

172
00:12:44,145 --> 00:12:49,680
aggiungeremo in una casella di controllo e poi in seguito aggiungeremo in un selezionare due o quattro.

173
00:12:49,680 --> 00:12:51,680
Per aggiungere una casella di controllo,

174
00:12:51,680 --> 00:12:57,590
cerchiamo di copiare questo gruppo di moduli qui in modo che lo aggiungeremo come un'altra riga qui,

175
00:12:57,590 --> 00:13:01,595
e quindi aggiungere nel gruppo modulo div qui,

176
00:13:01,595 --> 00:13:04,970
e quindi chiudere il div qui.

177
00:13:04,970 --> 00:13:08,860
E poi all'interno di questa riga del gruppo di moduli,

178
00:13:08,860 --> 00:13:11,280
quindi questo ci dà un'altra riga nel modulo.

179
00:13:11,280 --> 00:13:13,330
Quindi all'interno di questa riga del gruppo di moduli,

180
00:13:13,330 --> 00:13:16,120
lasciami aggiungere prima la casella di controllo.

181
00:13:16,120 --> 00:13:22,655
Quindi, per fare ciò, aggiungeremo un div con la classe = «col-md-6",

182
00:13:22,655 --> 00:13:26,610
quindi vedrai che questo occuperà

183
00:13:26,610 --> 00:13:31,695
sei colonne nella dimensione dello schermo da media a extra large,

184
00:13:31,695 --> 00:13:36,800
e quindi offset-md-2, quindi questo lo compenserà a

185
00:13:36,800 --> 00:13:43,850
destra di due colonne e quindi mostrerà la casella di controllo lì.

186
00:13:43,850 --> 00:13:48,490
Ora, dentro qui, per aggiungere una casella di controllo,

187
00:13:48,490 --> 00:13:58,170
diremo div con la classe = «form-check» e

188
00:13:58,170 --> 00:14:07,200
all'interno di questa classe di controllo del modulo aggiungeremo un tipo di input = «checkbox»

189
00:14:07,200 --> 00:14:17,990
e la classe = «form-check-input» e poi lasciami andare alla riga successiva e poi

190
00:14:17,990 --> 00:14:24,400
dire name = «approva» e

191
00:14:24,400 --> 00:14:32,560
id = «approva» e il valore è una stringa vuota lì.

192
00:14:32,560 --> 00:14:35,360
E a questa casella di controllo,

193
00:14:35,360 --> 00:14:36,735
aggiungiamo un'etichetta.

194
00:14:36,735 --> 00:14:38,380
Quindi, per aggiungere un'etichetta,

195
00:14:38,380 --> 00:14:41,940
andremo e aggiungeremo in

196
00:14:41,940 --> 00:14:50,885
classe etichetta = «form-check-label» e poi questa etichetta

197
00:14:50,885 --> 00:14:53,775
è per questa casella di controllo che abbiamo appena aggiunto.

198
00:14:53,775 --> 00:15:00,270
Quindi, è per questo che diremo per = «approva» quindi nota che per la casella di controllo,

199
00:15:00,270 --> 00:15:03,635
avevamo dato il nome e l'ID come approvazione, quindi è per questo che qui,

200
00:15:03,635 --> 00:15:07,090
saremo salvati per l'etichetta per l'approvazione.

201
00:15:07,090 --> 00:15:09,560
E poi all'interno di questa etichetta,

202
00:15:09,560 --> 00:15:19,250
specificheremo il contenuto come 'Possiamo contattarti? '

203
00:15:19,250 --> 00:15:24,240
E poi salvare le modifiche e andiamo a dare un'occhiata al nostro modulo.

204
00:15:24,240 --> 00:15:25,810
Andando alla pagina web,

205
00:15:25,810 --> 00:15:30,970
ora puoi vedere che abbiamo aggiunto in una casella di controllo insieme a un'etichetta qui e notare

206
00:15:30,970 --> 00:15:36,685
che questa etichetta è in grassetto a causa dell'uso del tag «forte» lì,

207
00:15:36,685 --> 00:15:40,270
e abbiamo fatto offset-md-2.

208
00:15:40,270 --> 00:15:42,850
Ecco perché spinge questa casella di controllo fin qui.

209
00:15:42,850 --> 00:15:46,750
Questo non ha un'etichetta qui, ma invece questo è spinto proprio qui,

210
00:15:46,750 --> 00:15:50,765
quindi questa è la ragione per usare offset-md-2 qui,

211
00:15:50,765 --> 00:15:56,980
e questo occupa md-6 quindi sei colonne qui.

212
00:15:56,980 --> 00:15:59,180
Non abbiamo ancora finito con questo.

213
00:15:59,180 --> 00:16:03,075
Ho intenzione di aggiungere nella parte successiva qui,

214
00:16:03,075 --> 00:16:06,995
che è una casella di selezione lì.

215
00:16:06,995 --> 00:16:11,230
Quindi applicherò un altro div qui con

216
00:16:11,230 --> 00:16:20,475
la classe = «col-md-3 offset-md-1" qui.

217
00:16:20,475 --> 00:16:23,375
E all'interno di questo div,

218
00:16:23,375 --> 00:16:27,160
ho intenzione di definire una selezione.

219
00:16:27,160 --> 00:16:30,590
Quindi, ancora una volta, dalla tua conoscenza dell'HTML,

220
00:16:30,590 --> 00:16:33,260
sai cosa fa una selezione per te.

221
00:16:33,260 --> 00:16:36,635
Ora, la selezione applicherà

222
00:16:36,635 --> 00:16:45,920
il controllo del modulo delle classi, quindi questa è la classe Bootstrap che sto applicando alla selezione qui

223
00:16:46,130 --> 00:16:49,245
e chiuderà la selezione.

224
00:16:49,245 --> 00:16:53,745
E qui dentro, ho bisogno di dare le opzioni per la selezione.

225
00:16:53,745 --> 00:16:57,500
Quindi, sto usando una semplice selezione qui,

226
00:16:57,500 --> 00:17:02,570
e quindi il primo è un'opzione

227
00:17:02,570 --> 00:17:09,060
per telefono o e-mail e chiudere l'opzione.

228
00:17:09,060 --> 00:17:13,735
Quindi, questo crea un elemento di selezione nel mio modulo,

229
00:17:13,735 --> 00:17:15,310
che ha due opzioni:

230
00:17:15,310 --> 00:17:17,080
telefono ed e-mail, quindi,

231
00:17:17,080 --> 00:17:18,505
salviamo le modifiche.

232
00:17:18,505 --> 00:17:20,180
Dando un'occhiata alla nostra pagina web, è

233
00:17:20,180 --> 00:17:26,960
ora possibile vedere come la casella di selezione telefono e e-mail è ora creata qui in modo che questo

234
00:17:26,960 --> 00:17:34,025
mi permette di selezionare quale fare e poi si può anche selezionare la casella di controllo in questo modo.

235
00:17:34,025 --> 00:17:36,730
Quindi, questo termina la riga successiva.

236
00:17:36,730 --> 00:17:39,040
Aggiungiamo un'altra riga,

237
00:17:39,040 --> 00:17:42,960
che consentirà all'utente di digitare effettivamente il proprio feedback.

238
00:17:42,960 --> 00:17:47,535
Quindi, userò un'area di testo per formattarlo.

239
00:17:47,535 --> 00:17:51,615
Per il prossimo, userò un'area di testo.

240
00:17:51,615 --> 00:17:58,840
Quindi, quello che ho intenzione di fare è solo andare su e copiare questa parte e-mail di esso.

241
00:17:58,840 --> 00:18:02,115
Sono troppo pigro per continuare a digitare tutto il tempo.

242
00:18:02,115 --> 00:18:06,950
Quindi, tendo a tagliare e incollare dove possibile, ma per questo,

243
00:18:06,950 --> 00:18:15,670
l'etichetta dovrebbe essere il feedback e l'etichetta del modulo colonna,

244
00:18:15,670 --> 00:18:24,575
e quindi il testo effettivo è, «Il tuo feedback qui».

245
00:18:24,575 --> 00:18:26,450
Quindi questa è l'etichetta.

246
00:18:26,450 --> 00:18:28,795
E poi, qui, il secondo,

247
00:18:28,795 --> 00:18:32,530
formatterò questo.

248
00:18:32,530 --> 00:18:34,140
Invece del tipo di input,

249
00:18:34,140 --> 00:18:39,085
lo cambierò in un'area di testo,

250
00:18:39,085 --> 00:18:42,815
e quindi non ho bisogno del tipo lì.

251
00:18:42,815 --> 00:18:51,400
Area di testo, la classe è ancora controllo modulo e l'ID è feedback.

252
00:18:51,400 --> 00:18:58,890
Il nome è un feedback e il segnaposto non è necessario

253
00:18:58,890 --> 00:19:02,880
qui e invece cambiarlo in quante righe

254
00:19:02,880 --> 00:19:06,890
voglio dare dal feedback per l'area di testo?

255
00:19:06,890 --> 00:19:10,340
Quindi dirò 12 righe e poi chiuderò il testo.

256
00:19:10,340 --> 00:19:15,215
Quindi nota come ho incluso la textarea nel mio modulo.

257
00:19:15,215 --> 00:19:16,680
Salvare le modifiche.

258
00:19:16,680 --> 00:19:19,560
Dai un'occhiata. Andando alla mia pagina web,

259
00:19:19,560 --> 00:19:23,910
ora vedi il mio modulo prendere la sua forma completa qui.

260
00:19:23,910 --> 00:19:25,470
Hai il nome, il cognome, il

261
00:19:25,470 --> 00:19:28,050
telefono, l'email e poi il feedback.

262
00:19:28,050 --> 00:19:30,720
L' area di testo di 12 righe.

263
00:19:30,720 --> 00:19:36,080
Ora, avrai bisogno di un pulsante che l'utente dovrebbe fare clic per inviare il loro feedback.

264
00:19:36,080 --> 00:19:40,715
Quindi, consente di aggiungere un pulsante di invio a questo modulo.

265
00:19:40,715 --> 00:19:44,030
Tornando di nuovo al modulo,

266
00:19:44,030 --> 00:19:47,195
crea un'altra riga qui usando

267
00:19:47,195 --> 00:19:55,715
il div qui con la riga del gruppo di moduli

268
00:19:55,715 --> 00:19:59,405
qui, e dentro qui aggiungerò un pulsante qui.

269
00:19:59,405 --> 00:20:02,300
Quindi, direi, div

270
00:20:02,340 --> 00:20:10,500
class = «offset-md-2" perché voglio che il mio pulsante sia

271
00:20:10,500 --> 00:20:13,880
posizionato proprio sotto tutti quei campi che

272
00:20:13,880 --> 00:20:17,850
ho qui in modo che le due colonne di sinistra vengano utilizzate per l'etichetta.

273
00:20:17,850 --> 00:20:21,750
Quindi il pulsante di invio non ha bisogno di un'etichetta, quindi ho intenzione di

274
00:20:21,750 --> 00:20:25,890
spingerlo a destra qui e poi

275
00:20:25,890 --> 00:20:35,090
direi «col-md-10" in modo che questo occupi le restanti 10 colonne lì.

276
00:20:35,090 --> 00:20:37,310
E poi dentro quei div,

277
00:20:37,310 --> 00:20:40,045
ho intenzione di aggiungere un pulsante lì.

278
00:20:40,045 --> 00:20:45,020
Quindi, quando aggiungi un pulsante al tuo modulo,

279
00:20:45,020 --> 00:20:50,190
usa il tag pulsante qui con un tipo di invio.

280
00:20:50,190 --> 00:20:56,440
Quindi, questo è il pulsante di invio per il tuo modulo lì e la classe.

281
00:20:56,440 --> 00:21:02,890
Ricorda le classi dei pulsanti, il pulsante primario,

282
00:21:02,890 --> 00:21:07,890
quindi questo creerebbe un pulsante blu scuro nel tuo modulo e

283
00:21:07,890 --> 00:21:15,110
quindi chiuderò il pulsante lì,

284
00:21:15,110 --> 00:21:19,805
e poi andrò semplicemente dentro e dentro il pulsante,

285
00:21:19,805 --> 00:21:28,725
darò il nome come «Invia feedback» e quindi salverò le modifiche.

286
00:21:28,725 --> 00:21:31,295
Ora, il nostro modulo è completo.

287
00:21:31,295 --> 00:21:36,600
Quindi, diamo un'occhiata alla versione finale del nostro modulo.

288
00:21:36,600 --> 00:21:38,660
Andando alla nostra pagina web,

289
00:21:38,660 --> 00:21:40,875
è ora possibile vedere il modulo completato.

290
00:21:40,875 --> 00:21:43,135
Tutti questi campi che abbiamo visto già,

291
00:21:43,135 --> 00:21:46,610
il pulsante in basso con la scritta «Invia

292
00:21:46,610 --> 00:21:51,265
Feedback» e il pulsante blu scuro a causa dell'uso del pulsante «primario».

293
00:21:51,265 --> 00:21:58,870
Quindi, questo completa il modulo che volevamo creare nella nostra pagina web.

294
00:21:58,870 --> 00:22:02,380
Con questo, completiamo questo esercizio,

295
00:22:02,380 --> 00:22:07,135
dove abbiamo visto come possiamo costruire un modulo e includerlo nella nostra pagina web.

296
00:22:07,135 --> 00:22:10,130
Lavorerai con i moduli in alcuni degli

297
00:22:10,130 --> 00:22:13,720
esercizi successivi, incluso il tuo secondo incarico.

298
00:22:13,720 --> 00:22:19,310
Questo è un buon momento per voi per fare un buon commento con i moduli di messaggio.