1
00:00:03,250 --> 00:00:07,810
Agora que vimos como adicionar botões à nossa página web.

2
00:00:07,810 --> 00:00:12,560
Neste exercício, vamos olhar para formulários e como podemos adicionar formulários à

3
00:00:12,560 --> 00:00:19,220
nossa página web e também estilizar esses elementos de formulário usando as classes Bootstrap.

4
00:00:19,220 --> 00:00:23,065
Voltando para a página contactus.html,

5
00:00:23,065 --> 00:00:28,215
role para baixo até ver esse comentário chamado “Formulário vai aqui”.

6
00:00:28,215 --> 00:00:32,990
Nós vamos substituir isso pelo formulário nesta página web.

7
00:00:32,990 --> 00:00:35,715
Então, vamos excluir isso e, em seguida, construir

8
00:00:35,715 --> 00:00:39,945
o formulário em que determinado local dentro da div lá.

9
00:00:39,945 --> 00:00:41,855
Para começar com o formulário,

10
00:00:41,855 --> 00:00:50,585
eu vou usar a tag HTML formulário e construir o formulário dentro desta tag HTML.

11
00:00:50,585 --> 00:00:52,960
Então, dentro desta tag formulário,

12
00:00:52,960 --> 00:00:57,925
vamos adicionar os elementos de raio do nosso formulário.

13
00:00:57,925 --> 00:01:00,195
Então, dentro desta forma,

14
00:01:00,195 --> 00:01:04,405
eu vou dividir esta forma em várias linhas lá.

15
00:01:04,405 --> 00:01:06,780
Para dividir seu formulário em linhas,

16
00:01:06,780 --> 00:01:17,020
você pode simplesmente usar um div com o class="form-group” e, em seguida, aplicar a classe de linha a ele.

17
00:01:20,370 --> 00:01:26,540
Então, com isso, vamos adicionar em dois grupos de formulários aqui.

18
00:01:26,540 --> 00:01:29,795
Vou copiar isto e depois colá-lo aqui em baixo.

19
00:01:29,795 --> 00:01:34,055
Então, você pode ver que eu vou adicionar duas linhas a este formulário aqui.

20
00:01:34,055 --> 00:01:36,690
Então, para adicionar um item neste formulário,

21
00:01:36,690 --> 00:01:44,330
vamos para este div e então eu vou começar usando uma tag label aqui.

22
00:01:44,330 --> 00:01:46,550
E para as etiquetas de rótulo,

23
00:01:46,550 --> 00:01:48,460
então eu terei duas linhas;

24
00:01:48,460 --> 00:01:51,270
uma permitindo que o usuário preencha seu primeiro nome,

25
00:01:51,270 --> 00:01:53,470
e a segunda para seu sobrenome.

26
00:01:53,470 --> 00:02:01,530
Então, este é o lugar onde vamos usar esse rótulo para especificar a classe lá.

27
00:02:01,530 --> 00:02:09,080
Agora, Além disso, Bootstrap nos permite usar a grade Bootstrap

28
00:02:09,080 --> 00:02:19,300
para especificar como esses formulários vão ser dispostos anúncio para que eu vou aplicar o col-md-2.

29
00:02:19,300 --> 00:02:27,720
Você pode ver que eu apliquei as classes de coluna md-2 para este item específico.

30
00:02:27,720 --> 00:02:31,360
Então, este item no formulário ocupará duas colunas.

31
00:02:31,360 --> 00:02:33,465
Então, dentro deste elemento de forma,

32
00:02:33,465 --> 00:02:37,950
temos dividido cada linha em 12 colunas.

33
00:02:37,950 --> 00:02:40,940
Então, porque já usamos a linha para a div, de

34
00:02:40,940 --> 00:02:45,030
modo que nos fornecerá 12 colunas dentro do div lá.

35
00:02:45,030 --> 00:02:52,560
Além disso, tenho de aplicar o rótulo do formulário de classe col a este respeito.

36
00:02:52,560 --> 00:02:56,905
Então, isso é o que me permite especificar um rótulo aqui.

37
00:02:56,905 --> 00:02:58,395
Então, para este rótulo,

38
00:02:58,395 --> 00:03:07,070
eu vou preencher o rótulo como um primeiro nome e, em seguida, fechar a etiqueta rótulo.

39
00:03:07,070 --> 00:03:10,485
Então, esta tag rótulo me permite dar um rótulo,

40
00:03:10,485 --> 00:03:14,150
que ocupará duas colunas à esquerda nesta linha particular.

41
00:03:14,150 --> 00:03:22,740
No lado direito, eu vou usar outra div que a classe aplicada como col-md-10.

42
00:03:22,740 --> 00:03:28,420
Observe que o rótulo anterior usou o col-md-2 lá.

43
00:03:28,420 --> 00:03:29,665
Então, para esta div,

44
00:03:29,665 --> 00:03:32,755
eu vou aplicar o col-md-10 lá.

45
00:03:32,755 --> 00:03:35,120
E, em seguida, dentro desta div,

46
00:03:35,120 --> 00:03:38,700
eu vou aplicar um elemento de entrada,

47
00:03:38,700 --> 00:03:42,750
que é do tipo texto.

48
00:03:42,750 --> 00:03:46,770
Então, se você estiver familiarizado com os formulários de HTML,

49
00:03:46,770 --> 00:03:50,460
você verá que estamos usando os elementos de formulário de HTML para

50
00:03:50,460 --> 00:03:55,910
criar esse formulário aqui para que a caixa de entrada aqui é do texto do tipo.

51
00:03:55,910 --> 00:04:00,410
Agora, este é o lugar onde nós estamos indo para aplicar as classes Bootstrap para este

52
00:04:00,410 --> 00:04:05,500
e a classe Bootstrap correspondente para este

53
00:04:05,500 --> 00:04:10,710
é o controle de formulário e, em seguida, eu posso especificar

54
00:04:10,710 --> 00:04:16,165
um ID para isso como primeiro nome.

55
00:04:16,165 --> 00:04:21,260
Então, observe que esse ID corresponde a esse rótulo para div.

56
00:04:21,260 --> 00:04:26,625
Então, primeiro nome e, em seguida, nome como

57
00:04:26,625 --> 00:04:30,735
primeiro nome e também vou especificar

58
00:04:30,735 --> 00:04:37,190
um espaço reservado para isso então deixe-me usar a próxima linha aqui,

59
00:04:37,940 --> 00:04:46,890
espaço reservado como, tenho certeza de que a partir do seu conhecimento de HTML,

60
00:04:46,890 --> 00:04:52,020
você entende como esta especificação é feita aqui.

61
00:04:52,020 --> 00:04:59,355
Então, com isso, agora criamos nosso primeiro elemento de forma em nossa forma.

62
00:04:59,355 --> 00:05:03,170
Vamos dar uma olhada rápida na página da web.

63
00:05:03,170 --> 00:05:08,310
Indo para a nossa página web, agora você pode ver como adicionar nos elementos de formulário criou

64
00:05:08,310 --> 00:05:14,515
esta caixa de texto de entrada e o rótulo no lado esquerdo.

65
00:05:14,515 --> 00:05:18,105
Agora, eu vou adicionar em outra linha com o sobrenome.

66
00:05:18,105 --> 00:05:23,150
Voltando ao meu contactus.html,

67
00:05:23,150 --> 00:05:29,215
deixe-me simplesmente copiar esta parte e, em seguida, colá-la na segunda div aqui,

68
00:05:29,215 --> 00:05:32,875
e então entrar e editar isso.

69
00:05:32,875 --> 00:05:39,890
Do primeiro nome eu mudo isso para sobrenome.

70
00:05:39,890 --> 00:05:45,090
Certifique-se de que você concluir todas as edições corretamente.

71
00:05:45,550 --> 00:05:49,470
Mesmo uma edição inadequada faltando,

72
00:05:49,470 --> 00:05:53,210
fará com que seu formulário não funcione corretamente, então certifique-se de que

73
00:05:53,210 --> 00:05:58,220
todas as coisas primeiro nome aqui são substituídas pelo meu sobrenome.

74
00:05:58,220 --> 00:05:59,795
Então, o sobrenome,

75
00:05:59,795 --> 00:06:02,640
controle de formulário de texto md-10.

76
00:06:02,640 --> 00:06:11,510
O ID aqui deve ser sobrenome e o nome também deve

77
00:06:11,510 --> 00:06:14,945
ser sobrenome e o espaço reservado

78
00:06:14,945 --> 00:06:21,030
novamente o sobrenome, então isso deve adicionar em uma segunda linha com o sobrenome.

79
00:06:21,030 --> 00:06:22,530
Indo para sua página web,

80
00:06:22,530 --> 00:06:24,000
você pode ver agora o formulário

81
00:06:24,000 --> 00:06:28,150
lentamente entrando em forma para que você tenha o primeiro nome e sobrenome.

82
00:06:28,150 --> 00:06:33,790
Agora, vamos em seguida adicionar em um elementos de entrada.

83
00:06:33,790 --> 00:06:38,260
Vamos ver como isso funciona à medida que adicionamos no código.

84
00:06:38,260 --> 00:06:41,989
Passando agora para a próxima parte do exercício,

85
00:06:41,989 --> 00:06:46,220
aqui vamos adicionar mais dois campos em

86
00:06:46,220 --> 00:06:51,690
nosso formulário aqui para inserir o número de telefone e o ID de e-mail.

87
00:06:51,690 --> 00:06:54,870
Uma vez que a estrutura básica do código é semelhante

88
00:06:54,870 --> 00:06:58,610
ao nome e sobrenome que você já adicionou ao formulário,

89
00:06:58,610 --> 00:07:02,370
então eu vou apenas copiar o código do primeiro nome e sobrenome e, em

90
00:07:02,370 --> 00:07:08,000
seguida, colá-lo aqui e, em seguida, modificar o código de acordo.

91
00:07:08,000 --> 00:07:11,910
Então, eu colei o código do primeiro nome e sobrenome aqui.

92
00:07:11,910 --> 00:07:17,080
Vamos em frente e agora modificar isso para transformá-lo em campos que permitem que

93
00:07:17,080 --> 00:07:22,745
o usuário insira o número de telefone e o ID de e-mail.

94
00:07:22,745 --> 00:07:24,420
Então, para o número de telefone,

95
00:07:24,420 --> 00:07:28,200
então aqui já temos o primeiro nome e o sobrenome acima.

96
00:07:28,200 --> 00:07:34,380
Então, o terceiro, eu vou mudar isso para rótulo de “telnum”.

97
00:07:34,380 --> 00:07:38,745
Então, isto é a partir do número de telefone e, em seguida, as classes,

98
00:07:38,745 --> 00:07:44,790
eu vou aplicar uma classe col-12 para este dizendo que este rótulo será em

99
00:07:44,790 --> 00:07:52,795
seu próprio desenho quando o formulário é mostrado em tamanhos de tela extra pequeno a pequeno.

100
00:07:52,795 --> 00:07:55,660
E então, para tamanho de tela médio a maior,

101
00:07:55,660 --> 00:07:59,945
isso seria exibido em duas colunas

102
00:07:59,945 --> 00:08:04,655
dessa linha particular aqui, então essa é a mudança que vamos fazer lá.

103
00:08:04,655 --> 00:08:06,875
E então também, o rótulo em si,

104
00:08:06,875 --> 00:08:14,860
deixe-me mudar isso para o número de telefone de contato, entre em contato com Tel.

105
00:08:15,230 --> 00:08:18,915
Agora, o número de telefone em si,

106
00:08:18,915 --> 00:08:22,600
vamos deixar o usuário inseri-lo como duas partes; uma,

107
00:08:22,600 --> 00:08:25,485
que é o código de área e a segunda,

108
00:08:25,485 --> 00:08:28,225
que seria o número de telefone real.

109
00:08:28,225 --> 00:08:31,120
Então, eu vou pegar essa parte do código,

110
00:08:31,120 --> 00:08:34,640
que era o campo de entrada que tínhamos para

111
00:08:34,640 --> 00:08:40,315
o primeiro nome e, em seguida, criar outro abaixo aqui,

112
00:08:40,315 --> 00:08:44,190
que eu vou usar para o próprio número de telefone.

113
00:08:44,190 --> 00:08:50,560
E agora vamos transformar este primeiro no campo para inserir o código de área.

114
00:08:50,560 --> 00:08:52,540
Você também pode usá-lo, por exemplo,

115
00:08:52,540 --> 00:08:57,220
para o código do país, se é isso que você deseja colocar no formulário.

116
00:08:57,220 --> 00:09:00,190
Então, para o código de área em si,

117
00:09:00,190 --> 00:09:02,520
eu vou aplicar para o div,

118
00:09:02,520 --> 00:09:09,105
as classes="col-5 col-md-3 aqui”.

119
00:09:09,105 --> 00:09:13,410
Então, note que para a tela média,

120
00:09:13,410 --> 00:09:16,805
temos duas colunas ocupadas pelo rótulo,

121
00:09:16,805 --> 00:09:20,630
três colunas ocupadas pelo próprio código de área e

122
00:09:20,630 --> 00:09:25,385
as restantes sete colunas eu vou dar para o campo de texto aqui.

123
00:09:25,385 --> 00:09:29,650
Assim, da mesma forma, para o código de área eu digo col cinco.

124
00:09:29,650 --> 00:09:32,680
Então, para telas extra pequenas a pequenas isso ocupará

125
00:09:32,680 --> 00:09:37,520
cinco colunas e, em seguida, para as sete colunas restantes,

126
00:09:37,520 --> 00:09:42,640
vamos deixar o número de telefone alimentar-se em si ocupado em.

127
00:09:42,640 --> 00:09:48,510
Então, deixe-me mudar o próximo para col-7 e col-md-7 aqui.

128
00:09:49,540 --> 00:09:54,365
Agora, este campo eu vou mudar isso para tel,

129
00:09:54,365 --> 00:09:58,965
tipo de entrada tel para número de telefone e a classe é controle de formulário,

130
00:09:58,965 --> 00:10:08,830
o ID é código de área e o nome é código de área e, em seguida, o espaço reservado,

131
00:10:08,830 --> 00:10:12,415
eu vou mudar isso para código de área.

132
00:10:12,415 --> 00:10:14,215
E a próxima parte,

133
00:10:14,215 --> 00:10:21,885
vamos mudar isso também tipo tel e ID é telnum,

134
00:10:21,885 --> 00:10:28,060
o nome é telnum e o espaço reservado,

135
00:10:28,060 --> 00:10:34,830
em si, seria o número tel.

136
00:10:34,830 --> 00:10:40,975
Então, isso formará o campo de número de telefone,

137
00:10:40,975 --> 00:10:42,840
que será inserido como duas partes;

138
00:10:42,840 --> 00:10:45,160
o código de área e o número de telefone.

139
00:10:45,160 --> 00:10:47,180
Então, estamos usando, novamente,

140
00:10:47,180 --> 00:10:51,540
as classes de coluna, a fim de estruturar como

141
00:10:51,540 --> 00:10:57,260
as duas partes do campo de entrada são exibidas no formulário lá.

142
00:10:57,260 --> 00:10:59,490
Agora o último, é claro,

143
00:10:59,490 --> 00:11:02,940
isso seria para ID de e-mail então o rótulo,

144
00:11:02,940 --> 00:11:08,595
eu transformo isso em ID de e-mail e, em seguida, o rótulo em si

145
00:11:08,595 --> 00:11:14,345
é e-mail e tipo de entrada é e-mail.

146
00:11:14,345 --> 00:11:16,575
Agora, nós mudamos o tipo para e-mail,

147
00:11:16,575 --> 00:11:22,060
que é permitido em HTML para que mais tarde se precisarmos fazer validação de formulário,

148
00:11:22,060 --> 00:11:24,040
então sabemos que este campo deve conter

149
00:11:24,040 --> 00:11:28,730
apenas um tipo de entrada de e-mail lá, e o ID,

150
00:11:28,730 --> 00:11:37,490
em si, ID de e-mail e o ID de e-mail nome e o espaço reservado.

151
00:11:38,600 --> 00:11:42,295
E-mail. É isso.

152
00:11:42,295 --> 00:11:47,335
Vamos salvar as alterações e ir e dar uma olhada no formulário atualizado.

153
00:11:47,335 --> 00:11:49,820
Indo para o formulário no navegador,

154
00:11:49,820 --> 00:11:54,030
agora você vê duas linhas adicionais adicionadas ao nosso formulário.

155
00:11:54,030 --> 00:11:57,030
O nome e o sobrenome devem ser adicionados na parte anterior do exercício.

156
00:11:57,030 --> 00:11:59,050
Então, aqui, temos o número de telefone de contato,

157
00:11:59,050 --> 00:12:01,805
que é dividido em código de área e número de telefone.

158
00:12:01,805 --> 00:12:06,515
Observe como usamos as classes de coluna para posicionar esses dois

159
00:12:06,515 --> 00:12:11,650
no próprio formulário e, em seguida, o campo de e-mail aqui.

160
00:12:11,650 --> 00:12:15,775
Vamos dar uma olhada na mesma coisa em um tamanho de tela extra pequeno.

161
00:12:15,775 --> 00:12:18,465
Então, quando você vai para um tamanho de tela extra pequeno,

162
00:12:18,465 --> 00:12:20,800
você notará como o próprio formulário é colocado para fora.

163
00:12:20,800 --> 00:12:24,690
Você verá que o rótulo está na parte superior e, em seguida, o próprio campo na parte inferior.

164
00:12:24,690 --> 00:12:26,055
Então, primeiro nome, último nome.

165
00:12:26,055 --> 00:12:28,605
Observe como os

166
00:12:28,605 --> 00:12:33,160
campos de entrada de número de telefone de contato são posicionados usando as classes de coluna, de

167
00:12:33,160 --> 00:12:34,855
modo que o código de área aqui,

168
00:12:34,855 --> 00:12:36,085
o número de telefone

169
00:12:36,085 --> 00:12:38,410
e, em seguida, o ID de e-mail aqui.

170
00:12:38,410 --> 00:12:41,630
Agora, vamos continuar com o exercício.

171
00:12:41,630 --> 00:12:44,145
Continuando na próxima etapa,

172
00:12:44,145 --> 00:12:49,680
vamos adicionar em uma caixa de seleção e, em seguida, vamos adicionar em um seleto dois ou quatro.

173
00:12:49,680 --> 00:12:51,680
Para adicionar uma caixa de seleção,

174
00:12:51,680 --> 00:12:57,590
vamos apenas copiar este grupo de formulários aqui para que nós vamos adicioná-lo como outra linha aqui,

175
00:12:57,590 --> 00:13:01,595
e em seguida, adicionar no grupo de formulário div aqui,

176
00:13:01,595 --> 00:13:04,970
e, em seguida, fechar a div aqui.

177
00:13:04,970 --> 00:13:08,860
E, em seguida, dentro desta linha de grupo de formulário,

178
00:13:08,860 --> 00:13:11,280
então isso nos dá mais uma linha no formulário.

179
00:13:11,280 --> 00:13:13,330
Então, dentro desta linha de grupo de formulários,

180
00:13:13,330 --> 00:13:16,120
deixe-me adicionar em primeiro lugar a caixa de seleção.

181
00:13:16,120 --> 00:13:22,655
Então, para fazer isso, vamos adicionar em uma div com a class="col-md-6" para que

182
00:13:22,655 --> 00:13:26,610
você veja que isso vai ocupar

183
00:13:26,610 --> 00:13:31,695
seis colunas no tamanho de tela médio a extra grande,

184
00:13:31,695 --> 00:13:36,800
e então offset-md-2, então isso irá deslocá-lo para

185
00:13:36,800 --> 00:13:43,850
a direita por duas colunas e, em seguida, exibir a caixa de seleção lá.

186
00:13:43,850 --> 00:13:48,490
Agora, aqui dentro, para adicionar uma caixa de seleção,

187
00:13:48,490 --> 00:13:58,170
vamos dizer div com a class="form-check” e

188
00:13:58,170 --> 00:14:07,200
dentro desta classe form-check vamos adicionar em um tipo de entrada ="checkbox”

189
00:14:07,200 --> 00:14:17,990
e a class="form-check-input” e então deixe-me ir para a próxima linha e, em seguida,

190
00:14:17,990 --> 00:14:24,400
dizer name="approve” e o

191
00:14:24,400 --> 00:14:32,560
id="approve” e o valor é uma string vazia lá.

192
00:14:32,560 --> 00:14:35,360
E a esta caixa de seleção,

193
00:14:35,360 --> 00:14:36,735
vamos adicionar um rótulo.

194
00:14:36,735 --> 00:14:38,380
Então, para adicionar um rótulo,

195
00:14:38,380 --> 00:14:41,940
vamos e adicionar em label

196
00:14:41,940 --> 00:14:50,885
class="form-check-label” e, em seguida, este rótulo

197
00:14:50,885 --> 00:14:53,775
é para esta caixa de seleção que acabamos de adicionar.

198
00:14:53,775 --> 00:15:00,270
Então, é por isso que vamos dizer para “aprovar” então note que para a caixa de seleção,

199
00:15:00,270 --> 00:15:03,635
nós tínhamos dado o nome e o ID como aprovar, então é por isso que aqui,

200
00:15:03,635 --> 00:15:07,090
nós estaremos salvos para o rótulo para aprovação.

201
00:15:07,090 --> 00:15:09,560
E, em seguida, dentro deste rótulo,

202
00:15:09,560 --> 00:15:19,250
especificaremos o conteúdo como 'Podemos entrar em contato com você? '

203
00:15:19,250 --> 00:15:24,240
E então salve as alterações e vamos dar uma olhada no nosso formulário.

204
00:15:24,240 --> 00:15:25,810
Indo para a página web,

205
00:15:25,810 --> 00:15:30,970
agora você pode ver que nós adicionamos em uma caixa de seleção junto com um rótulo aqui e notar

206
00:15:30,970 --> 00:15:36,685
que este rótulo está em negrito por causa do uso da tag “strong” lá,

207
00:15:36,685 --> 00:15:40,270
e nós fizemos offset-md-2.

208
00:15:40,270 --> 00:15:42,850
Então é por isso que empurramos esta caixa de seleção até aqui.

209
00:15:42,850 --> 00:15:46,750
Isso não tem um rótulo aqui, mas em vez disso isso é empurrado aqui,

210
00:15:46,750 --> 00:15:50,765
então essa é a razão para usar offset-md-2 aqui,

211
00:15:50,765 --> 00:15:56,980
e este ocupa md-6 então seis colunas aqui.

212
00:15:56,980 --> 00:15:59,180
Ainda não terminamos com isso.

213
00:15:59,180 --> 00:16:03,075
Vou adicionar na próxima parte aqui,

214
00:16:03,075 --> 00:16:06,995
que é uma caixa de seleção lá.

215
00:16:06,995 --> 00:16:11,230
Então eu vou aplicar mais uma div aqui com

216
00:16:11,230 --> 00:16:20,475
o class="col-md-3 offset-md-1" aqui.

217
00:16:20,475 --> 00:16:23,375
E dentro desta div,

218
00:16:23,375 --> 00:16:27,160
vou definir um seleto.

219
00:16:27,160 --> 00:16:30,590
Então, novamente, a partir do seu conhecimento de HTML,

220
00:16:30,590 --> 00:16:33,260
você sabe o que um seletor faz por você.

221
00:16:33,260 --> 00:16:36,635
Agora, a seleção irá aplicar

222
00:16:36,635 --> 00:16:45,920
o controle de formulário classes para que esta é a classe Bootstrap que eu estou aplicando para a seleção aqui,

223
00:16:46,130 --> 00:16:49,245
e fechar a seleção.

224
00:16:49,245 --> 00:16:53,745
E aqui dentro, eu preciso dar as opções para a seleção.

225
00:16:53,745 --> 00:16:57,500
Então, eu estou usando uma seleção simples aqui,

226
00:16:57,500 --> 00:17:02,570
e assim o primeiro é uma opção

227
00:17:02,570 --> 00:17:09,060
para telefone ou e-mail e fechar a opção.

228
00:17:09,060 --> 00:17:13,735
Então, isso cria um elemento de seleção no meu formulário,

229
00:17:13,735 --> 00:17:15,310
que tem duas opções:

230
00:17:15,310 --> 00:17:17,080
telefone e e-mail, então,

231
00:17:17,080 --> 00:17:18,505
vamos salvar as alterações.

232
00:17:18,505 --> 00:17:20,180
Olhando para a nossa página web,

233
00:17:20,180 --> 00:17:26,960
agora você pode ver como a caixa de seleção de telefone e e-mail é agora criada aqui, então isso

234
00:17:26,960 --> 00:17:34,025
me permite selecionar qual deles fazer e, em seguida, você também pode marcar a caixa de seleção como esta.

235
00:17:34,025 --> 00:17:36,730
Então, isso termina a próxima linha.

236
00:17:36,730 --> 00:17:39,040
Vamos adicionar mais uma linha, o

237
00:17:39,040 --> 00:17:42,960
que permitirá que o usuário realmente digite seus comentários.

238
00:17:42,960 --> 00:17:47,535
Então, usarei uma área de texto para formatar isso.

239
00:17:47,535 --> 00:17:51,615
Para a próxima, vou usar uma área de texto.

240
00:17:51,615 --> 00:17:58,840
Então, o que eu vou fazer é ir lá para cima e copiar esta parte do e-mail.

241
00:17:58,840 --> 00:18:02,115
Sou preguiçoso demais para escrever tudo o tempo todo.

242
00:18:02,115 --> 00:18:06,950
Então, eu costumo cortar e colar sempre que possível, mas para este,

243
00:18:06,950 --> 00:18:15,670
o rótulo deve ser feedback e o rótulo do formulário da coluna,

244
00:18:15,670 --> 00:18:24,575
e então o texto real é, “Seu feedback aqui”.

245
00:18:24,575 --> 00:18:26,450
Então esse é o rótulo.

246
00:18:26,450 --> 00:18:28,795
E então, aqui, o segundo,

247
00:18:28,795 --> 00:18:32,530
vou formatar este.

248
00:18:32,530 --> 00:18:34,140
Em vez do tipo de entrada,

249
00:18:34,140 --> 00:18:39,085
eu vou mudar isso para uma área de texto,

250
00:18:39,085 --> 00:18:42,815
e então eu não preciso do tipo lá.

251
00:18:42,815 --> 00:18:51,400
Área de texto, a classe ainda é controle de formulário e o ID é feedback.

252
00:18:51,400 --> 00:18:58,890
Nome é feedback e o espaço reservado não é necessário

253
00:18:58,890 --> 00:19:02,880
aqui e, em vez disso, alterá-lo para quantas linhas eu

254
00:19:02,880 --> 00:19:06,890
quero dar a partir do feedback para a área de texto?

255
00:19:06,890 --> 00:19:10,340
Então eu vou dizer 12 linhas e, em seguida, fechar o texto.

256
00:19:10,340 --> 00:19:15,215
Então, observe como eu incluí a área de texto no meu formulário.

257
00:19:15,215 --> 00:19:16,680
Salve as alterações.

258
00:19:16,680 --> 00:19:19,560
Dê uma olhada. Indo para minha página web,

259
00:19:19,560 --> 00:19:23,910
agora você vê meu formulário tomando sua forma completa aqui.

260
00:19:23,910 --> 00:19:25,470
Você tem o primeiro nome, sobrenome,

261
00:19:25,470 --> 00:19:28,050
telefone, e-mail lá e, em seguida, o feedback.

262
00:19:28,050 --> 00:19:30,720
A área de texto de 12 linhas.

263
00:19:30,720 --> 00:19:36,080
Agora, você precisará de um botão no qual o usuário deve clicar para enviar seus comentários.

264
00:19:36,080 --> 00:19:40,715
Então, vamos adicionar em um botão enviar a este formulário.

265
00:19:40,715 --> 00:19:44,030
Voltando ao formulário novamente,

266
00:19:44,030 --> 00:19:47,195
crie mais uma linha aqui usando

267
00:19:47,195 --> 00:19:55,715
o div aqui com a linha de grupo de formulários

268
00:19:55,715 --> 00:19:59,405
aqui, e dentro aqui eu vou adicionar um botão aqui.

269
00:19:59,405 --> 00:20:02,300
Então, eu diria, div

270
00:20:02,340 --> 00:20:10,500
class="offset-md-2" porque eu quero que meu botão seja

271
00:20:10,500 --> 00:20:13,880
posicionado logo abaixo de todos os campos que eu

272
00:20:13,880 --> 00:20:17,850
tenho aqui para que as duas colunas à esquerda estão sendo usadas para o rótulo.

273
00:20:17,850 --> 00:20:21,750
Então o botão enviar não precisa de um rótulo, então eu vou apenas

274
00:20:21,750 --> 00:20:25,890
empurrá-lo para a direita aqui e então eu

275
00:20:25,890 --> 00:20:35,090
diria “col-md-10" então isso ocuparia as 10 colunas restantes lá.

276
00:20:35,090 --> 00:20:37,310
E então dentro desses div,

277
00:20:37,310 --> 00:20:40,045
eu vou adicionar um botão lá.

278
00:20:40,045 --> 00:20:45,020
Então, quando você adicionar um botão ao seu formulário,

279
00:20:45,020 --> 00:20:50,190
use a tag botão aqui com um tipo enviar.

280
00:20:50,190 --> 00:20:56,440
Então, este é o botão enviar para o seu formulário lá e classe.

281
00:20:56,440 --> 00:21:02,890
Lembre-se de classes de botão, botão primário,

282
00:21:02,890 --> 00:21:07,890
então isso criaria um botão azul escuro em seu formulário e, em

283
00:21:07,890 --> 00:21:15,110
seguida, feche o botão lá,

284
00:21:15,110 --> 00:21:19,805
e então eu vou simplesmente entrar e dentro do botão,

285
00:21:19,805 --> 00:21:28,725
eu vou dar o nome como “Enviar feedback” e, em seguida, salvar as alterações.

286
00:21:28,725 --> 00:21:31,295
Agora, nosso formulário está completo.

287
00:21:31,295 --> 00:21:36,600
Então, vamos dar uma olhada na versão final do nosso formulário.

288
00:21:36,600 --> 00:21:38,660
Indo para a nossa página web,

289
00:21:38,660 --> 00:21:40,875
agora você pode ver o formulário preenchido.

290
00:21:40,875 --> 00:21:43,135
Todos esses campos que já vimos,

291
00:21:43,135 --> 00:21:46,610
o botão na parte inferior com a frase “Enviar

292
00:21:46,610 --> 00:21:51,265
feedback” e o botão azul escuro por causa do uso do botão “primário”.

293
00:21:51,265 --> 00:21:58,870
Então, isso preenche o formulário que queríamos criar em nossa página web.

294
00:21:58,870 --> 00:22:02,380
Com isso, completamos este exercício,

295
00:22:02,380 --> 00:22:07,135
onde vimos como podemos construir um formulário e incluí-lo em nossa página web.

296
00:22:07,135 --> 00:22:10,130
Você estará trabalhando com formulários em alguns

297
00:22:10,130 --> 00:22:13,720
dos exercícios posteriores, incluindo sua segunda tarefa.

298
00:22:13,720 --> 00:22:19,310
Este é um bom momento para você fazer um bom comentário com os formulários de mensagem.