E bem-vindo de volta.
Entraremos em algumas tags mais avançadas e provavelmente a tag mais importante que você usará, além das
que abordamos até agora, são as tags que precisamos para criar formulários.
Como você sabe, quando você acessa sites, geralmente há algum tipo de login ou formulário de registro.
Então, vamos construir isso hoje para começar.
Vamos apenas criar um novo arquivo aqui.
Vamos salvá-lo e chamá-lo de HTML registrado em nosso desktop.
Perfeito, e sabemos que queremos usar também o nosso atalho e vamos intitulá-lo de registro, salve isso.
E agora, no arquivo de índice, vamos adicionar outro link.
Essas referências registram ponto html e direi apenas aqui, registre-se.
Tudo bem, vamos salvar esses dois arquivos e atualizar, temos o registro.
Clique em registrar.
Bem, não temos nada ainda, mas parece que está funcionando, vamos adicionar isso em uma nova linha só porque
parece mais bonito assim.
Então, para fazer isso, se você se lembra, vamos adicionar uma etiqueta de freio.
Então, vamos atualizar.
Ai está.
Temos nova página e cadastro.
OK, então vamos construir este formulário se formos registrar o DOT.
A maneira como escrevemos formulários em HTML, embora convenientemente haja uma tag de formulário.
OK, mas essa tag de formulário em si, precisa ter o formulário real dentro dela.
Então, que tipo de elementos de formulário nós temos?
Bem, novamente, se nos lembrarmos do nosso bom e velho amigo W três C, vamos digitar o forms.
E podemos ver aqui que temos uma pequena fazenda.
E a atualização tornará a tela inteira e você pode ver aqui que há uma tonelada de informações sobre
ela, mas você mesmo pode pesquisar por agora.
Vou apresentar a você os mais comuns, provavelmente aqueles que você usará 90 por cento do
tempo.
O primeiro, como fazemos com qualquer formulário e vamos nessa base por enquanto, é o que queremos inserir nosso
nome.
Então, como fazemos isso?
Temos uma tag de entrada.
Isso tem um tipo de texto porque, bem, nosso nome estará na forma de texto e podemos fechar isso e, na verdade, é uma
tag de fechamento automático.
Agora, se eu salvar e atualizar, OK, temos uma pequena caixa aqui.
Espero que você possa ver isso.
Mas, bem, provavelmente devemos intitulá-lo porque não saberemos o que responder dessa forma.
Então, vamos colocar aqui.
Vamos dizer o primeiro nome.
Ponto-e-vírgula e salvar, vamos atualizar, temos o primeiro nome e agora vamos torná-lo um pouco maior.
Ai está.
Agora você pode inserir seu nome aqui.
Incrível.
Bem, vamos adicionar outro para o nosso sobrenome.
E novamente, teremos nosso tipo de entrada, portanto, é um atributo e um valor de texto.
E se atualizarmos, temos o sobrenome, OK, mas parece meio feio, lembre-se de que o HTML só lê linha por
linha e não sabe realmente que queremos um espaço aqui.
Então, novamente, podemos adicionar um.
Quebre aqui e atualize, e nós temos nome e sobrenome.
OK, isso é bastante autoexplicativo.
Agora, o que mais temos em um formulário?
Temos email.
Então, vamos adicionar outro campo, que é e-mail, e faremos a entrada novamente.
Digite chamadas, texto.
Bem, adicione outra quebra aqui, porque vamos precisar desse espaçamento.
E vamos salvar a atualização, incrível.
OK, então temos nosso formulário de registro geral.
E, obviamente, com qualquer formulário, precisamos de algum tipo de botão, certo, precisamos enviar isso em algum lugar para que possamos
nos registrar.
Bem, novamente, há um bom apetite para isso.
Portanto, fazemos a entrada em vez de um tipo de texto.
Existe um tipo de envio.
Então, é isso.
Se tivéssemos outra chance aqui.
E eu digo isso, eu atualizo tem uma cúpula.
Agora, de onde veio essa cúpula?
Bem, quando você coloca um envio de tipo de entrada, ele cria automaticamente um botão.
E se você não especificar o que dizer, terei apenas este texto.
Mas podemos mudar isso para que possamos atribuir valor.
E vamos colocar o registro.
Salve essa atualização, agora temos um botão de registro.
OK, mas e se cometermos erros neste campo, escrevermos coisas e para o que queremos redefinir isso, novamente, há
uma entrada agora para isso.
E o tipo dessa entrada, como você pode imaginar, é redefinido.
Então, agora, se fecharmos isso em outro intervalo aqui, na verdade, podemos manter isso na mesma linha,
vamos salvar a atualização.
E nós redefinimos, então agora se eu digitar qualquer coisa aqui e digamos que não quero bem, não gosto disso,
preciso redefinir o formulário.
Posso apenas clicar em redefinir e limpar tudo para nós.
OK, você pode estar se perguntando o que acontece quando clicamos em registrar antes de entrarmos nisso. Quero apenas passar por todos os
tipos de entrada comuns e, em seguida, clicaremos em registros para ver o que acontece
com o e-mail.
O ideal é que, em primeiro lugar, seja solicitado que, ao clicar em registrar-se, não tenha fornecido
um e-mail, ele não o deixe se registrar.
E há um atributo que podemos usar para isso e é obrigatório.
E aqui não temos realmente que especificar um valor porque automaticamente é assumido que obrigatório é igual a verdadeiro, o
que significa que este campo de formulário é obrigatório.
Então, se eu disser que atualizo e deixar em branco e clicar em registrar, direi: por favor, preencha este
campo.
Agora, também queremos ter certeza de que é um campo de e-mail apropriado, então, se eu digitar algo assim, ainda queremos
ter certeza de que, você sabe, este é um e-mail incorreto.
Não queremos registrar.
Então, o tipo de texto de entrada que eu disse para o e-mail está realmente errado, há um específico
que podemos usar, que é, como você pode imaginar, e-mail.
Então, agora, se eu atualizar e digitar algo que não seja um e-mail e clicar em registrar.
Direi por favor inclua um e o endereço de e-mail.
Muito agradável.
É como mágica, faz isso por você, o que é muito, muito bom.
Vamos expandir nosso conhecimento sobre entradas e adicionar mais alguns campos que provavelmente precisarão
saber o aniversário de alguém.
Então, vamos adicionar aniversário aqui.
E para este tipo de entrada, vamos digitar.
Encontro.
Então, se eu disser isso e atualizar, veja que temos um pequeno selecionador de data para que eu possa escolher qualquer coisa aqui.
Tudo bem, o que mais precisamos?
Também precisamos de gênero, então faremos o tipo de entrada e para gênero.
Bem, não existe um apetite específico para o gênero, mas existe algo chamado rádio.
E o rádio é, como o nome sugere, botões de rádio.
Então agora.
Clique em atualizar e, bem, eu tenho um botão de opção, mas o ideal é ter opções, certo?
Então, como fazemos isso?
Então, para o rádio, também precisamos dizer se é masculino ou feminino, vamos ver dentro do gênero.
Vamos fazer uma pausa aqui na fila e vamos dizer.
E colocar rádio tipo e vamos dizer masculino e também queremos.
Fêmea.
E nós também queremos.
De outros.
E quando atualizamos isso, temos masculino, feminino e outro, mas você vê um problema aqui, eu apenas clico nos botões de
opção e não consigo desmarcá-los e, idealmente, você pode.
Você só deve poder selecionar um.
E agora, do jeito que os botões de rádio estão, eles não sabem da existência um do outro.
Queremos ter certeza de que eles sabem que estão conectados, são família e apenas um deles pode ser
escolhido.
Então, como fazemos isso?
A maneira como fazemos isso é por meio do atributo name.
Portanto, o nome dirá gênero.
E esse atributo de nome precisa corresponder a todos os botões de opção para que eles saibam que estão juntos, fazem parte
do campo de entrada de gênero.
Então, se eu salvar aqui e atualizar.
Agora você pode ver que só posso selecionar um.
Tudo bem, perfeito.
O que mais devemos ter?
Bem, digamos que eu realmente queira saber se você tem animais de estimação.
O mesmo acontece com os animais de estimação.
Teremos o tipo de entrada ou você pode ter vários animais de estimação, então não serão botões de rádio, queremos caixa de seleção.
Então, caixa de seleção, queríamos ter gatos ou cachorros, mas queríamos ter gatos.
Não é possível digitar hoje.
Caixa de seleção e queremos cães.
Então, vamos salvar isso, vamos atualizar e olhar para isso, temos animais de estimação, mas desta vez são caixas de seleção, o que
significa.
Posso selecionar vários.