Entrada de dados em formulaŕios HTML

Como adicionar uma entrada de dados no formulário HTML?

Para adicionar uma entrada de dados em um formulário HTML, utilize o elemento <input>. Esta tag permite a inserção de diversos tipos de dados, como texto, números, datas, entre outros.

Exemplo:

<input type="text">

Atributos relacionados ao campo type="text":

A seguir veremos diversos exemplos de uso do elemento input.

Campo de check

Os campos de checkbox permitem que o usuário selecione uma ou mais opções de um conjunto de escolhas.

<input type="checkbox" value="html" checked> HTML <br>
<input type="checkbox" value="css"> CSS <br>
<input type="checkbox" value="js"> JavaScript

Utilize o atributo checked para deixar um dos campos já selecionado.

Campo de seletor de cor

O campo de seletor de cor permite que o usuário escolha uma cor a partir de uma paleta de cores.

<input type="color" value="#ff0000">

Campo de data

O campo de data permite que o usuário selecione uma data específica.

<input type="date" value="1999-05-21">

Atributos relacionados ao campo type="date":

Campo de data/hora

O campo de data/hora permite que o usuário selecione uma data e uma hora específicas.

<input type="datetime-local" value="1999-05-21T12:30">

Atributos relacionados ao campo type="datetime-local":

Campo de email

O campo de email é utilizado para inserir endereços de email. Ele valida automaticamente se o valor inserido é um email válido.

<input type="email" value="webmaster@exemplo.org">

Atributos relacionados ao campo type="email":

Campo de envio de arquivo

O campo de envio de arquivo permite que o usuário selecione um ou mais arquivos para serem enviados.

<input type="file">

Atributos relacionados ao campo type="file":

Campo oculto

O campo oculto é utilizado para armazenar dados que não são visíveis para o usuário. É frequentemente usado para armazenar tokens de autenticação ou outros dados que precisam ser enviados com o formulário.

<input type="hidden" valor="texto-oculto">

No exemplo acima, não é possível ver o resultado do código pois o campo está oculto. Ou seja, utilize esse tipo de campo quando quiser que um dado fique escondido na página. É usado com frequência para esconder tokens de autenticação.

Campo de número

O campo de número permite que o usuário insira um valor numérico.

<input type="number" value="42">

Atributos relacionados ao campo type="number":

Campo de senha

O campo de senha é utilizado para inserir senhas. O valor inserido é mascarado para garantir a privacidade.

<input type="password" value="123456">

Atributos relacionados ao campo type="password":

Campo de radio

Os campos de radio permitem que o usuário selecione uma única opção de um conjunto de escolhas.

<input type="radio" value="sim" checked> Sim <br>
<input type="radio" value="não"> Não

Utilize o atributo checked para deixar um dos campos já selecionado.

Campo de range slider

O campo de range slider permite que o usuário selecione um valor dentro de um intervalo definido.

<input type="range">

Atributos relacionados ao campo type="range":

Campo de busca

O campo de busca é utilizado para inserir termos de pesquisa.

<input type="search" value="Como programar bem?">

Atributos relacionados ao campo type="search":

Campo de telefone

O campo de telefone é utilizado para inserir números de telefone. Ele pode validar automaticamente o formato do número inserido.

<input type="tel" value="(55) 99999-5555">

Atributos relacionados ao campo type="tel":

Campo de hora

O campo de hora permite que o usuário selecione uma hora específica.

<input type="time" value="10:30">

Atributos relacionados ao campo type="time":

Campo de URL

O campo de URL é utilizado para inserir endereços de websites. Ele valida automaticamente se o valor inserido é uma URL válida.

<input type="url" value="https://w3mix.com">

Atributos relacionados ao campo type="url":