Introdução
Nas aulas anteriores vimos conteúdos importantes para a construção de páginas HTML, entre eles: imagens (<img/>), listas (<ol>, <ul> ou <dl>), links (<a>) e tabelas (<table>).
Relembrando…
Para inserir uma tabela, colocamos a tag <table> </table>, e inserimos dentro dessa tag as linhas (<tr>) e células(<td>) da tabela.
Exemplo visual:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
O código acima geraria uma tabela com 3 linhas e 3 colunas (pois cada linha tem 3 células), similar ao que podemos observar na imagem abaixo.
Agora que já revisamos o conteúdo vamos agregar ainda mais conhecimento com um novo tema : Formulários.
Formulários
O que são?
São estruturas usadas para coletar dados do usuário: cadastro, pesquisa, login… ou seja, todos os lugares que o usuário precisa informar algo.
Ele é criado usando a tag <form> </form>; dentro dessa tag nós organizamos o conteúdo que queremos exibir para coletar as informações por meio de algumas tags que podem ser de texto, inserção de dados ou que realiza alguma ação (evento).
A tag form possui o atributo action que define onde os dados serão enviados e o atributo method que define o método HTTP que será utilizado no envio desses dados. Para entender um pouco mais sobre os métodos HTTP que são utilizados nós recomendamos darem uma olhada nesse site: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods
Algumas tags que podem ser utilizadas dentro do form:
- <input> – Define um campo de entrada de dados;
- <textarea> – Define uma área de texto, podendo conter diversas linhas de texto;
- <button> – Define um botão;
- <select> – Define uma lista selecionável, também conhecida como drop-down;
- <option> – Define uma lista de opções dentro de um drop-down;
- <optgroup> – Define um grupo de opções;
- <fieldset> – Define um grupo de campos;
- <label> – Define um rótulo ou legenda para um campo ou controle do formulário;
- <output> – Define elementos de saída para o formulário;
- <legend> – Define um título para o conjunto de campos.
Mais informações podem ser encontradas no site: https://www.w3schools.com/html/html_forms.asp
As tags apresentadas possuem atributos para configurá-las. A tag <input> possui um atributo type que permite gerar tipos de campos diferentes e também podem acrescentar uma validação no campo de texto.Ex: ao usar <input type=”email”> o usuário só conseguirá enviar o formulário se tiver digitado um formato de email válido.
Há outras opções de type como password para senhas, checkbox, text para texto. Além desse atributo podemos nomear nosso campo com o atributo name, o placeholder para dar uma dica ao usuário do que deve ser preenchido e por fim o atributo value onde podemos passar um valor que irá aparecer no campo.
Vamos dar alguns exemplos abaixo:
<input type=”password” name=”senha” placeholder=”Digite uma senha”>
<input type=”checkbox” name=”area” value=”neuro”>
Não deixe de olhar a documentação para construir formulários bem legais.
Vamos praticar?
Crie um site com 3 páginas: uma página de login, uma página de cadastro e uma página principal.
- Página de login:
- A página de login deve enviar os dados para a página principal e ter um link para a página de cadastro
- Página de cadastro
- A página de cadastro deve enviar os dados para a página principal e ter um link para a página de login
Bons estudos !
Exercícios extras: https://drive.google.com/drive/folders/1i0V6lGovBA_rbG1azzsIbIHvsjLfapq7?usp=sharing
