Photo by Leon Dewiwje on Unsplash

HTML Forms e Tables (All you need to you to get start)

Tópicos Avançados para Formulários HTML

Tipos de Input HTML

Vamos explorar cada tipo de <input> HTML e fornecer exemplos para cada caso.

1. text

Entrada de texto padrão.

<form>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
</form>

2. password

Entrada para senhas, oculta os caracteres.

<form>
    <label for="senha">Senha:</label>
    <input type="password" id="senha" name="senha">
</form>

3. email

Entrada para endereços de e-mail, valida o formato de e-mail.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>

4. url

Entrada para URLs, valida o formato de URL.

<form>
    <label for="website">Website:</label>
    <input type="url" id="website" name="website">
</form>

5. tel

Entrada para números de telefone.

<form>
    <label for="telefone">Telefone:</label>
    <input type="tel" id="telefone" name="telefone">
</form>

6. number

Entrada para números, com atributos adicionais como min, max, e step.

<form>
    <label for="idade">Idade:</label>
    <input type="number" id="idade" name="idade" min="0" max="100">
</form>

7. range

Controle deslizante para selecionar um valor dentro de um intervalo.

<form>
    <label for="quantidade">Quantidade:</label>
    <input type="range" id="quantidade" name="quantidade" min="0" max="100">
</form>

8. date

Selecionador de data.

<form>
    <label for="data">Data:</label>
    <input type="date" id="data" name="data">
</form>

9. time

Selecionador de hora.

<form>
    <label for="hora">Hora:</label>
    <input type="time" id="hora" name="hora">
</form>

10. datetime-local

Selecionador de data e hora local.

<form>
    <label for="datahora">Data e Hora:</label>
    <input type="datetime-local" id="datahora" name="datahora">
</form>

11. month

Selecionador de mês e ano.

<form>
    <label for="mes">Mês:</label>
    <input type="month" id="mes" name="mes">
</form>

12. week

Selecionador de semana e ano.

<form>
    <label for="semana">Semana:</label>
    <input type="week" id="semana" name="semana">
</form>

13. color

Selecionador de cor.

<form>
    <label for="cor">Cor Favorita:</label>
    <input type="color" id="cor" name="cor">
</form>

14. file

Entrada para upload de arquivos (image,audio,pdf,any file).

<form>
    <label for="arquivo">Arquivo:</label>
    <input type="file" id="arquivo" name="arquivo">
</form>l

15. checkbox

Caixa de seleção para opções múltiplas.

<form>
    <label>Interesses:</label>
    <input type="checkbox" id="esportes" name="interesses" value="esportes">
    <label for="esportes">Esportes</label>
    <input type="checkbox" id="musica" name="interesses" value="musica">
    <label for="musica">Música</label>
</form>

16. radio

Botões de opção para escolha única.

<form>
    <label>Gênero:</label>
    <input type="radio" id="masculino" name="genero" value="masculino">
    <label for="masculino">Masculino</label>
    <input type="radio" id="feminino" name="genero" value="feminino">
    <label for="feminino">Feminino</label>
</form>

17. hidden

Entrada oculta.

<form>
    <input type="hidden" id="usuario_id" name="usuario_id" value="12345">
</form>

18. submit

Botão para enviar o formulário.

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

<form>
    <button type="submit" value="Enviar"></button>
    <button>Create new form</button>
</form>

19. button

Botão genérico.

<form>
    <button type="button" onclick="alert('Botão clicado!')">Clique-me</button>
</form>

20. reset

Botão para resetar o formulário.

<form>
    <input type="reset" value="Resetar">
</form>

21. image

Botão de envio com imagem.

<form>
    <input type="image" src="enviar.png" alt="Enviar">
</form>

22. search

Entrada para pesquisas.

<form>
    <label for="pesquisa">Pesquisa:</label>
    <input type="search" id="pesquisa" name="pesquisa">
</form>

23. textarea

Área de texto multilinha.

<form>
    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem"></textarea>
</form>

Exemplo Complexo do Mundo Real

Caso de Uso: Formulário de Registro de Usuário

Requisitos:

1. Nome completo
2. Email
3. Senha
4. Data de nascimento
5. Gênero
6. Interesses (múltipla escolha)
7. País
8. Comentários adicionais

Solução:

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Registro de Usuário</title>
</head>
<body>
    <h1>Formulário de Registro de Usuário</h1>
    <form action="/registrar" method="post">
        <label for="nome">Nome Completo:</label>
        <input type="text" id="nome" name="nome" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="senha">Senha:</label>
        <input type="password" id="senha" name="senha" required>
        
        <label for="data_nascimento">Data de Nascimento:</label>
        <input type="date" id="data_nascimento" name="data_nascimento" required>
        
        <label>Gênero:</label>
        <input type="radio" id="masculino" name="genero" value="masculino" required>
        <label for="masculino">Masculino</label>
        <input type="radio" id="feminino" name="genero" value="feminino" required>
        <label for="feminino">Feminino</label>
        
        <label>Interesses:</label>
        <input type="checkbox" id="esportes" name="interesses" value="esportes">
        <label for="esportes">Esportes</label>
        <input type="checkbox" id="musica" name="interesses" value="musica">
        <label for="musica">Música</label>
        <input type="checkbox" id="tecnologia" name="interesses" value="tecnologia">
        <label for="tecnologia">Tecnologia</label>
        
        <label for="pais">País:</label>
        <select id="pais" name="pais" required>
            <option value="brasil">Brasil</option>
            <option value="eua">EUA</option>
            <option value="canada">Canadá</option>
        </select>
        
        <label for="comentarios">Comentários Adicionais:</label>
        <textarea id="comentarios" name="comentarios"></textarea>
        
        <input type="submit" value="Registrar">
    </form>
</body>
</html>

Explicação da Solução:

1. Nome Completo: Campo de texto obrigatório (required).
2. Email: Campo de email obrigatório com validação automática (required).
3. Senha: Campo de senha obrigatório (required).
4. Data de Nascimento: Campo de data obrigatório (required).
5. Gênero: Botões de rádio para selecionar uma única opção de gênero, obrigatório (required).
6. Interesses: Caixas de seleção para permitir múltiplas escolhas.
7. País: Menu suspenso (select) para escolher o país, obrigatório (required).
8. Comentários Adicionais: Área de texto para entradas multilinha.

Este formulário de registro cobre diversos tipos de entradas, garantindo que todas as informações essenciais sejam coletadas de maneira organizada e eficiente. Ele utiliza atributos HTML5 como required para validação de campos, garantindo que o usuário forneça todas as informações necessárias antes de enviar o formulário. Além disso, a utilização de diferentes tipos de entradas (text, email, password, date, radio, checkbox, select, textarea) demonstra a versatilidade e a capacidade de HTML5 em criar formulários ricos e funcionais.