Agora que vimos como adicionar botões à nossa página web.
Neste exercício, vamos olhar para formulários e como podemos adicionar formulários à
nossa página web e também estilizar esses elementos de formulário usando as classes Bootstrap.
Voltando para a página contactus.html,
role para baixo até ver esse comentário chamado “Formulário vai aqui”.
Nós vamos substituir isso pelo formulário nesta página web.
Então, vamos excluir isso e, em seguida, construir
o formulário em que determinado local dentro da div lá.
Para começar com o formulário,
eu vou usar a tag HTML formulário e construir o formulário dentro desta tag HTML.
Então, dentro desta tag formulário,
vamos adicionar os elementos de raio do nosso formulário.
Então, dentro desta forma,
eu vou dividir esta forma em várias linhas lá.
Para dividir seu formulário em linhas,
você pode simplesmente usar um div com o class="form-group” e, em seguida, aplicar a classe de linha a ele.
Então, com isso, vamos adicionar em dois grupos de formulários aqui.
Vou copiar isto e depois colá-lo aqui em baixo.
Então, você pode ver que eu vou adicionar duas linhas a este formulário aqui.
Então, para adicionar um item neste formulário,
vamos para este div e então eu vou começar usando uma tag label aqui.
E para as etiquetas de rótulo,
então eu terei duas linhas;
uma permitindo que o usuário preencha seu primeiro nome,
e a segunda para seu sobrenome.
Então, este é o lugar onde vamos usar esse rótulo para especificar a classe lá.
Agora, Além disso, Bootstrap nos permite usar a grade Bootstrap
para especificar como esses formulários vão ser dispostos anúncio para que eu vou aplicar o col-md-2.
Você pode ver que eu apliquei as classes de coluna md-2 para este item específico.
Então, este item no formulário ocupará duas colunas.
Então, dentro deste elemento de forma,
temos dividido cada linha em 12 colunas.
Então, porque já usamos a linha para a div, de
modo que nos fornecerá 12 colunas dentro do div lá.
Além disso, tenho de aplicar o rótulo do formulário de classe col a este respeito.
Então, isso é o que me permite especificar um rótulo aqui.
Então, para este rótulo,
eu vou preencher o rótulo como um primeiro nome e, em seguida, fechar a etiqueta rótulo.
Então, esta tag rótulo me permite dar um rótulo,
que ocupará duas colunas à esquerda nesta linha particular.
No lado direito, eu vou usar outra div que a classe aplicada como col-md-10.
Observe que o rótulo anterior usou o col-md-2 lá.
Então, para esta div,
eu vou aplicar o col-md-10 lá.
E, em seguida, dentro desta div,
eu vou aplicar um elemento de entrada,
que é do tipo texto.
Então, se você estiver familiarizado com os formulários de HTML,
você verá que estamos usando os elementos de formulário de HTML para
criar esse formulário aqui para que a caixa de entrada aqui é do texto do tipo.
Agora, este é o lugar onde nós estamos indo para aplicar as classes Bootstrap para este
e a classe Bootstrap correspondente para este
é o controle de formulário e, em seguida, eu posso especificar
um ID para isso como primeiro nome.
Então, observe que esse ID corresponde a esse rótulo para div.
Então, primeiro nome e, em seguida, nome como
primeiro nome e também vou especificar
um espaço reservado para isso então deixe-me usar a próxima linha aqui,
espaço reservado como, tenho certeza de que a partir do seu conhecimento de HTML,
você entende como esta especificação é feita aqui.
Então, com isso, agora criamos nosso primeiro elemento de forma em nossa forma.
Vamos dar uma olhada rápida na página da web.
Indo para a nossa página web, agora você pode ver como adicionar nos elementos de formulário criou
esta caixa de texto de entrada e o rótulo no lado esquerdo.
Agora, eu vou adicionar em outra linha com o sobrenome.
Voltando ao meu contactus.html,
deixe-me simplesmente copiar esta parte e, em seguida, colá-la na segunda div aqui,
e então entrar e editar isso.
Do primeiro nome eu mudo isso para sobrenome.
Certifique-se de que você concluir todas as edições corretamente.
Mesmo uma edição inadequada faltando,
fará com que seu formulário não funcione corretamente, então certifique-se de que
todas as coisas primeiro nome aqui são substituídas pelo meu sobrenome.
Então, o sobrenome,
controle de formulário de texto md-10.
O ID aqui deve ser sobrenome e o nome também deve
ser sobrenome e o espaço reservado
novamente o sobrenome, então isso deve adicionar em uma segunda linha com o sobrenome.
Indo para sua página web,
você pode ver agora o formulário
lentamente entrando em forma para que você tenha o primeiro nome e sobrenome.
Agora, vamos em seguida adicionar em um elementos de entrada.
Vamos ver como isso funciona à medida que adicionamos no código.
Passando agora para a próxima parte do exercício,
aqui vamos adicionar mais dois campos em
nosso formulário aqui para inserir o número de telefone e o ID de e-mail.
Uma vez que a estrutura básica do código é semelhante
ao nome e sobrenome que você já adicionou ao formulário,
então eu vou apenas copiar o código do primeiro nome e sobrenome e, em
seguida, colá-lo aqui e, em seguida, modificar o código de acordo.
Então, eu colei o código do primeiro nome e sobrenome aqui.
Vamos em frente e agora modificar isso para transformá-lo em campos que permitem que
o usuário insira o número de telefone e o ID de e-mail.
Então, para o número de telefone,
então aqui já temos o primeiro nome e o sobrenome acima.
Então, o terceiro, eu vou mudar isso para rótulo de “telnum”.
Então, isto é a partir do número de telefone e, em seguida, as classes,
eu vou aplicar uma classe col-12 para este dizendo que este rótulo será em
seu próprio desenho quando o formulário é mostrado em tamanhos de tela extra pequeno a pequeno.
E então, para tamanho de tela médio a maior,
isso seria exibido em duas colunas
dessa linha particular aqui, então essa é a mudança que vamos fazer lá.
E então também, o rótulo em si,
deixe-me mudar isso para o número de telefone de contato, entre em contato com Tel.
Agora, o número de telefone em si,
vamos deixar o usuário inseri-lo como duas partes; uma,
que é o código de área e a segunda,
que seria o número de telefone real.
Então, eu vou pegar essa parte do código,
que era o campo de entrada que tínhamos para
o primeiro nome e, em seguida, criar outro abaixo aqui,
que eu vou usar para o próprio número de telefone.
E agora vamos transformar este primeiro no campo para inserir o código de área.
Você também pode usá-lo, por exemplo,
para o código do país, se é isso que você deseja colocar no formulário.
Então, para o código de área em si,
eu vou aplicar para o div,
as classes="col-5 col-md-3 aqui”.
Então, note que para a tela média,
temos duas colunas ocupadas pelo rótulo,
três colunas ocupadas pelo próprio código de área e
as restantes sete colunas eu vou dar para o campo de texto aqui.
Assim, da mesma forma, para o código de área eu digo col cinco.
Então, para telas extra pequenas a pequenas isso ocupará
cinco colunas e, em seguida, para as sete colunas restantes,
vamos deixar o número de telefone alimentar-se em si ocupado em.
Então, deixe-me mudar o próximo para col-7 e col-md-7 aqui.
Agora, este campo eu vou mudar isso para tel,
tipo de entrada tel para número de telefone e a classe é controle de formulário,
o ID é código de área e o nome é código de área e, em seguida, o espaço reservado,
eu vou mudar isso para código de área.
E a próxima parte,
vamos mudar isso também tipo tel e ID é telnum,
o nome é telnum e o espaço reservado,
em si, seria o número tel.
Então, isso formará o campo de número de telefone,
que será inserido como duas partes;
o código de área e o número de telefone.
Então, estamos usando, novamente,
as classes de coluna, a fim de estruturar como
as duas partes do campo de entrada são exibidas no formulário lá.
Agora o último, é claro,
isso seria para ID de e-mail então o rótulo,
eu transformo isso em ID de e-mail e, em seguida, o rótulo em si
é e-mail e tipo de entrada é e-mail.
Agora, nós mudamos o tipo para e-mail,
que é permitido em HTML para que mais tarde se precisarmos fazer validação de formulário,
então sabemos que este campo deve conter
apenas um tipo de entrada de e-mail lá, e o ID,
em si, ID de e-mail e o ID de e-mail nome e o espaço reservado.
E-mail. É isso.
Vamos salvar as alterações e ir e dar uma olhada no formulário atualizado.
Indo para o formulário no navegador,
agora você vê duas linhas adicionais adicionadas ao nosso formulário.
O nome e o sobrenome devem ser adicionados na parte anterior do exercício.
Então, aqui, temos o número de telefone de contato,
que é dividido em código de área e número de telefone.
Observe como usamos as classes de coluna para posicionar esses dois
no próprio formulário e, em seguida, o campo de e-mail aqui.
Vamos dar uma olhada na mesma coisa em um tamanho de tela extra pequeno.
Então, quando você vai para um tamanho de tela extra pequeno,
você notará como o próprio formulário é colocado para fora.
Você verá que o rótulo está na parte superior e, em seguida, o próprio campo na parte inferior.
Então, primeiro nome, último nome.
Observe como os
campos de entrada de número de telefone de contato são posicionados usando as classes de coluna, de
modo que o código de área aqui,
o número de telefone
e, em seguida, o ID de e-mail aqui.
Agora, vamos continuar com o exercício.
Continuando na próxima etapa,
vamos adicionar em uma caixa de seleção e, em seguida, vamos adicionar em um seleto dois ou quatro.
Para adicionar uma caixa de seleção,
vamos apenas copiar este grupo de formulários aqui para que nós vamos adicioná-lo como outra linha aqui,
e em seguida, adicionar no grupo de formulário div aqui,
e, em seguida, fechar a div aqui.
E, em seguida, dentro desta linha de grupo de formulário,
então isso nos dá mais uma linha no formulário.
Então, dentro desta linha de grupo de formulários,
deixe-me adicionar em primeiro lugar a caixa de seleção.
Então, para fazer isso, vamos adicionar em uma div com a class="col-md-6" para que
você veja que isso vai ocupar
seis colunas no tamanho de tela médio a extra grande,
e então offset-md-2, então isso irá deslocá-lo para
a direita por duas colunas e, em seguida, exibir a caixa de seleção lá.
Agora, aqui dentro, para adicionar uma caixa de seleção,
vamos dizer div com a class="form-check” e
dentro desta classe form-check vamos adicionar em um tipo de entrada ="checkbox”
e a class="form-check-input” e então deixe-me ir para a próxima linha e, em seguida,
dizer name="approve” e o
id="approve” e o valor é uma string vazia lá.
E a esta caixa de seleção,
vamos adicionar um rótulo.
Então, para adicionar um rótulo,
vamos e adicionar em label
class="form-check-label” e, em seguida, este rótulo
é para esta caixa de seleção que acabamos de adicionar.
Então, é por isso que vamos dizer para “aprovar” então note que para a caixa de seleção,
nós tínhamos dado o nome e o ID como aprovar, então é por isso que aqui,
nós estaremos salvos para o rótulo para aprovação.
E, em seguida, dentro deste rótulo,
especificaremos o conteúdo como 'Podemos entrar em contato com você? '
E então salve as alterações e vamos dar uma olhada no nosso formulário.
Indo para a página web,
agora você pode ver que nós adicionamos em uma caixa de seleção junto com um rótulo aqui e notar
que este rótulo está em negrito por causa do uso da tag “strong” lá,
e nós fizemos offset-md-2.
Então é por isso que empurramos esta caixa de seleção até aqui.
Isso não tem um rótulo aqui, mas em vez disso isso é empurrado aqui,
então essa é a razão para usar offset-md-2 aqui,
e este ocupa md-6 então seis colunas aqui.
Ainda não terminamos com isso.
Vou adicionar na próxima parte aqui,
que é uma caixa de seleção lá.
Então eu vou aplicar mais uma div aqui com
o class="col-md-3 offset-md-1" aqui.
E dentro desta div,
vou definir um seleto.
Então, novamente, a partir do seu conhecimento de HTML,
você sabe o que um seletor faz por você.
Agora, a seleção irá aplicar
o controle de formulário classes para que esta é a classe Bootstrap que eu estou aplicando para a seleção aqui,
e fechar a seleção.
E aqui dentro, eu preciso dar as opções para a seleção.
Então, eu estou usando uma seleção simples aqui,
e assim o primeiro é uma opção
para telefone ou e-mail e fechar a opção.
Então, isso cria um elemento de seleção no meu formulário,
que tem duas opções:
telefone e e-mail, então,
vamos salvar as alterações.
Olhando para a nossa página web,
agora você pode ver como a caixa de seleção de telefone e e-mail é agora criada aqui, então isso
me permite selecionar qual deles fazer e, em seguida, você também pode marcar a caixa de seleção como esta.
Então, isso termina a próxima linha.
Vamos adicionar mais uma linha, o
que permitirá que o usuário realmente digite seus comentários.
Então, usarei uma área de texto para formatar isso.
Para a próxima, vou usar uma área de texto.
Então, o que eu vou fazer é ir lá para cima e copiar esta parte do e-mail.
Sou preguiçoso demais para escrever tudo o tempo todo.
Então, eu costumo cortar e colar sempre que possível, mas para este,
o rótulo deve ser feedback e o rótulo do formulário da coluna,
e então o texto real é, “Seu feedback aqui”.
Então esse é o rótulo.
E então, aqui, o segundo,
vou formatar este.
Em vez do tipo de entrada,
eu vou mudar isso para uma área de texto,
e então eu não preciso do tipo lá.
Área de texto, a classe ainda é controle de formulário e o ID é feedback.
Nome é feedback e o espaço reservado não é necessário
aqui e, em vez disso, alterá-lo para quantas linhas eu
quero dar a partir do feedback para a área de texto?
Então eu vou dizer 12 linhas e, em seguida, fechar o texto.
Então, observe como eu incluí a área de texto no meu formulário.
Salve as alterações.
Dê uma olhada. Indo para minha página web,
agora você vê meu formulário tomando sua forma completa aqui.
Você tem o primeiro nome, sobrenome,
telefone, e-mail lá e, em seguida, o feedback.
A área de texto de 12 linhas.
Agora, você precisará de um botão no qual o usuário deve clicar para enviar seus comentários.
Então, vamos adicionar em um botão enviar a este formulário.
Voltando ao formulário novamente,
crie mais uma linha aqui usando
o div aqui com a linha de grupo de formulários
aqui, e dentro aqui eu vou adicionar um botão aqui.
Então, eu diria, div
class="offset-md-2" porque eu quero que meu botão seja
posicionado logo abaixo de todos os campos que eu
tenho aqui para que as duas colunas à esquerda estão sendo usadas para o rótulo.
Então o botão enviar não precisa de um rótulo, então eu vou apenas
empurrá-lo para a direita aqui e então eu
diria “col-md-10" então isso ocuparia as 10 colunas restantes lá.
E então dentro desses div,
eu vou adicionar um botão lá.
Então, quando você adicionar um botão ao seu formulário,
use a tag botão aqui com um tipo enviar.
Então, este é o botão enviar para o seu formulário lá e classe.
Lembre-se de classes de botão, botão primário,
então isso criaria um botão azul escuro em seu formulário e, em
seguida, feche o botão lá,
e então eu vou simplesmente entrar e dentro do botão,
eu vou dar o nome como “Enviar feedback” e, em seguida, salvar as alterações.
Agora, nosso formulário está completo.
Então, vamos dar uma olhada na versão final do nosso formulário.
Indo para a nossa página web,
agora você pode ver o formulário preenchido.
Todos esses campos que já vimos,
o botão na parte inferior com a frase “Enviar
feedback” e o botão azul escuro por causa do uso do botão “primário”.
Então, isso preenche o formulário que queríamos criar em nossa página web.
Com isso, completamos este exercício,
onde vimos como podemos construir um formulário e incluí-lo em nossa página web.
Você estará trabalhando com formulários em alguns
dos exercícios posteriores, incluindo sua segunda tarefa.
Este é um bom momento para você fazer um bom comentário com os formulários de mensagem.