Tag input do HTML parte 2

Tempo de leitura: 3 minutos

Tag input do HTML parte 2 A tag <input> é um elemento fundamental em HTML, utilizado para criar diversos tipos de campos de entrada em formulários. Ela permite que os usuários interajam com a página, fornecendo dados que podem ser processados pelo servidor.

Neste artigo, vamos explorar em detalhes os diferentes tipos de campos que podem ser criados com a tag <input>, com exemplos práticos e dicas para utilização.

A Versatilidade da Tag <input>

A versatilidade da tag <input> reside no atributo type, que define o tipo de campo que será criado. Cada tipo de campo possui características e funcionalidades específicas, permitindo a coleta de diferentes tipos de dados.

Campos de Data e Hora

• date: Campo para seleção de datas.

HTML

<input type="date" name="nascimento">

• month: Campo para seleção de meses.

HTML

<input type="month" name="mes">

week: Campo para seleção de semanas.

HTML

<input type="week" name="semana">

time: Campo para seleção de horas.

HTML

<input type="time" name="hora">

datetime-local: Campo para seleção de data e hora local.

HTML

<input type="datetime-local" name="evento">

Campos de Seleção e Controle

• color: Permite ao usuário escolher uma cor utilizando um seletor de cores.

HTML

<input type="color" name="cor">

• range: Cria um controle deslizante para selecionar um valor dentro de um intervalo.

HTML

<input type="range" name="volume" min="0" max="100">

• file: Permite ao usuário selecionar um arquivo para upload.

HTML

<input type="file" name="arquivo">

Botões

• button: Cria um botão personalizado, que pode ser utilizado para executar funções JavaScript.

HTML

<input type="button" value="Clique aqui" onclick="alert('Gostando do curso de HTML?')">

• submit: Cria um botão para enviar os dados do formulário.

HTML

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

• reset: Cria um botão para limpar os campos do formulário.

HTML

<input type="reset" value="Limpar">

• image: Cria um botão que utiliza uma imagem como elemento clicável.

HTML

<input type="image" src="https://thiagorossi.com.br/wp-content/uploads/2024/04/html-300x169.webp" alt="Enviar">

Conclusão

Tag input do HTML parte 2: A tag <input> é uma ferramenta poderosa e versátil para criar formulários interativos. Ao dominar os diferentes tipos de campos e seus atributos, você poderá criar formulários mais eficientes e acessíveis.

Dicas para utilizar a tag <input>:

• Utilize labels: Associe sempre um rótulo (<label>) a cada elemento de formulário, utilizando o atributo for para vinculá-lo ao id do elemento.
• Utilize o atributo required: Indique quais campos são obrigatórios para o usuário preencher.
• Utilize o atributo placeholder: Forneça um texto de dica dentro do campo de entrada para orientar o usuário.
• Utilize o tipo de campo adequado: Escolha o tipo de campo de entrada mais adequado para cada tipo de dado.
• Valide os dados do formulário: Utilize JavaScript para validar os dados antes de enviá-los para o servidor.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: