Tag input do HTML: Neste artigo, vamos explorar a tag input, um dos elementos mais versáteis e úteis do HTML. A tag input é usada para criar controles interativos para formulários da web que permitem aos usuários inserir dados.
Vamos mergulhar nos detalhes de como a tag input funciona e como ela pode ser usada para criar campos de email, senha, números, campos ocultos e definir valores padrão.
Campo de Email
O campo de email é usado quando queremos que os usuários insiram um endereço de email. Para criar um campo de email, usamos a tag input com o atributo type definido como email.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Neste exemplo, o navegador irá renderizar um campo de texto que espera um endereço de email. Além disso, alguns navegadores também validam se o texto inserido é um endereço de email válido.
Campo de Senha
O campo de senha é usado quando queremos que os usuários insiram uma senha. Para criar um campo de senha, usamos a tag input com o atributo type definido como password.
<label for="pwd">Senha:</label>
<input type="password" id="pwd" name="pwd">
Neste exemplo, o navegador irá renderizar um campo de texto que oculta o texto inserido, substituindo-o por pontos ou asteriscos.
Campo de Números
O campo de números é usado quando queremos que os usuários insiram um número. Para criar um campo de números, usamos a tag input com o atributo type definido como number.
<label for="quantity">Quantidade:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
Neste exemplo, o navegador irá renderizar um campo de texto que espera um número. Além disso, os atributos min e max limitam o intervalo de números que os usuários podem inserir.
Campo Oculto
O campo oculto é usado quando queremos incluir dados que não são visíveis ou modificáveis pelos usuários, mas que devem ser enviados quando o formulário é submetido. Para criar um campo oculto, usamos a tag input com o atributo type definido como hidden.
<input type="hidden" id="userid" name="userid" value="1234">
Neste exemplo, o campo oculto armazena o ID do usuário, que é enviado quando o formulário é submetido, mas não é visível para o usuário. Ele está entre o exemplo do código e este parágrafo, pode acreditar!!!
Definindo Valores Padrão
Podemos definir um valor padrão para um campo de entrada usando o atributo value. O valor padrão é o valor inicial do campo de entrada quando a página é carregada.
<label for="name">Nome:</label>
<input type="text" id="name" name="name" value="Thiago Rossi">
Neste exemplo, o campo de texto será pré-preenchido com “Thiago Rossi” quando a página for carregada.
Conclusão
Tag input do HTML: Em resumo, a tag input é uma ferramenta poderosa que permite criar uma variedade de campos de entrada para formulários da web. Compreender como usar a tag input e seus vários tipos e atributos é uma habilidade essencial para qualquer desenvolvedor web.
E para que seus inputs funcionem e para que você interaja com seus internautas ou usuários de sistema, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!
