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