7. Formulários e inputs em HTML

Formulários são uma parte essencial da interação do usuário com uma página da web. Eles permitem que os usuários insiram dados que podem ser enviados para um servidor para processamento. Os formulários podem ser usados para coisas como pesquisa, login, inscrição e muito mais. Neste capítulo, vamos discutir como criar formulários e usar diferentes tipos de input em HTML.

Formulários em HTML

Os formulários em HTML são criados usando a tag <form>. A tag <form> atua como um contêiner para diferentes elementos de formulário, como campos de entrada, botões e muito mais.

<form action="/submit" method="post">
  <!-- elementos do formulário aqui -->
</form>

O atributo 'action' na tag <form> especifica para onde os dados do formulário devem ser enviados quando o formulário é enviado. O atributo 'method' especifica como os dados do formulário devem ser enviados. Os métodos mais comuns são 'get' e 'post'.

Inputs em HTML

Os campos de entrada são usados para coletar dados do usuário. Eles são criados usando a tag <input>. Existem muitos tipos diferentes de campos de entrada que podem ser usados, dependendo do tipo de dados que você deseja coletar.

Texto

Para coletar um único linha de texto, você pode usar o tipo de entrada 'text'.

<input type="text" name="firstname" id="firstname">

O atributo 'name' é usado para identificar o campo de entrada quando os dados são enviados. O atributo 'id' é usado para identificar o campo de entrada no CSS e JavaScript.

Senha

Para coletar uma senha, você pode usar o tipo de entrada 'password'. Isso oculta os caracteres à medida que são digitados.

<input type="password" name="password" id="password">

Email

Para coletar um endereço de e-mail, você pode usar o tipo de entrada 'email'. Isso valida automaticamente o campo para garantir que um endereço de e-mail válido seja inserido.

<input type="email" name="email" id="email">

Botões

Os botões são usados para enviar o formulário. Eles são criados usando a tag <button> ou a tag <input> com o tipo definido como 'submit'.

<button type="submit">Enviar</button>
<input type="submit" value="Enviar">

Outros tipos de entrada

Existem muitos outros tipos de entrada que você pode usar, incluindo 'radio', 'checkbox', 'file', 'date', 'color' e muito mais. Cada tipo tem suas próprias características e usos específicos.

Conclusão

Os formulários e campos de entrada são uma parte essencial da construção de sites interativos. Eles permitem que você colete dados do usuário e os envie para um servidor para processamento. Ao entender como usar diferentes tipos de campos de entrada, você pode criar formulários mais eficientes e eficazes que atendam às necessidades de seus usuários.

Pratique a criação de diferentes tipos de formulários e usando diferentes tipos de entrada. Experimente diferentes atributos e veja como eles afetam o comportamento do seu formulário. Lembre-se de que a melhor maneira de aprender é fazendo!