O elemento HTML input faz parte do conjunto de tags utilizadas para realizar a interação com a pessoa usuária. Ele é um dos principais recursos para a construção de formulários e pode receber diferentes tipos de dados, como textos, arquivos, URLs, datas e muito mais, conforme a definição do atributo type.
Por ter diferentes possibilidades de entrada de dados, é preciso atenção ao utilizar esse elemento para que ele receba o tipo de informação desejada. Para te ajudar a conhecer um pouco mais sobre esse recurso, preparamos este conteúdo que contém os seguintes tópicos:
- O que é a tag e como usar?
- Quais são os Input types?
- Quais os atributos do elemento HTML ?
- Qual a compatibilidade com os navegadores?
Continue conosco e boa leitura!
O que é a tag e como usar?
A tag é utilizada para proporcionar interatividade à página, pois permite receber informações fornecidas pela pessoa usuária. Com ela podemos, por exemplo, criar um formulário com diversas questões, que solicitam tipos de dados diferentes, e obter o resultado apropriado para cada uma delas.
O elemento não necessita da tag de fechamento, como acontece com outros elementos HTML. Entretanto, ele contém o atributo type, que se não for especificado, será considerado como text pelo navegador. É por meio desse atributo que fazemos a diferenciação sobre qual o tipo de informação a pessoa usuária fornecerá para a aplicação.
Quais são os Input types?
A principal característica do elemento são os diferentes tipos de dados que ele é capaz de receber. Para isso, é preciso utilizar o atributo type para informar qual recurso será utilizado.
Em cada tipo de dados, entretanto, ainda pode haver a necessidade de informar atributos adicionais. Por isso, o elemento não tem uma sintaxe única. Confira quais os possíveis conteúdos podemos receber por meio da tag .
O button tem a função de executar uma determinada ação no formulário que não corresponde ao envio dos dados para o servidor. Na prática, ele deve ser associado a um evento click para realizar algum tipo de interação realizada por meio de código JavaScript, como adicionar o endereço da página ao grupo de favoritos ou fazer uma pesquisa de CEP para preencher o formulário de forma automática.
O checkbox é utilizado quando queremos que a pessoa usuária da aplicação selecione uma ou mais alternativas em uma lista de itens. Ele exibe uma caixa de seleção quadrada para cada opção e quando o item é selecionado, o atributo checked passa a ter o valor de verdadeiro. Dessa forma, conseguimos acessar o conteúdo programaticamente e identificar quais itens foram selecionados.
O type color é utilizado para que a pessoa usuária da aplicação possa selecionar uma cor desejada. Ele abre uma caixa de seleção de cores em que é possível arrastar o botão de seleção até a cor específica. Vale ressaltar que existem navegadores que não oferecem esse suporte a esse recurso.
O HTML input date exibe um campo de entrada no formato date e um ícone de calendário ao lado que, ao ser clicado, abre um caixa de seleção de datas. Dessa forma, a pessoa usuária pode navegar pelo controle para escolher a data desejada ou clicar no link “Hoje”, que traz a data atual como resultado. Vale ressaltar que esse recurso não é suportado no Internet Explorer 11 e Safari.
O type datetime-local funciona de forma semelhante ao date, entretanto, ele também permite selecionar a hora e os minutos. Ao clicar sobre o ícone de calendário, é selecionado o dia e o horário atual e sem as informações sobre o timezone.
O do tipo email é utilizado para garantir que o formato do texto digitado no campo corresponda a um endereço de e-mail. Para que a validação aconteça, é preciso utilizar o atributo required, que torna obrigatório o preenchimento do campo para que o formulário seja submetido.
Assim, se a pessoa digitar apenas o nome, será exibida uma mensagem para preencher o campo no formato de e-mail. Veja um código de exemplo:
O HTML input file é utilizado quando queremos enviar arquivos para o servidor, em diferentes formatos, como texto, PDF, vídeo, entre outros.
O type hidden é utilizado para esconder campos do formulário. Uma de suas utilidades é não exibir o campo id, mas deixá-lo disponível para enviar os dados completos quando o formulário for submetido para o servidor. Outra aplicação desse recurso é esconder campos que só serão exibidos em função da seleção de outras alternativas. Veja um exemplo:
Utilizamos o type image para vincular uma imagem ao botão de submit do formulário. Para isso, é preciso adicionar o atributo src para especificar o caminho da imagem. É importante dizer que o atributo value não pode ser utilizado com o type image. Confira o código fonte abaixo:
O type month funciona de forma semelhante ao date, porém, apenas os meses e anos são exibidos pelo controle. Ao carregar a página HTML e acionar o controle, é feito o posicionamento automático no mês e ano corrente, caso nenhum valor padrão tenha sido definido no atributo value. Confira um exemplo:
O HTML input number determina que apenas dados numéricos podem ser inseridos pela pessoa usuária da aplicação. Entretanto, somente números inteiros são aceitos, tanto os positivos quanto os negativos. Também é possível definir qual o valor mínimo e o máximo permitido pelo campo. Veja um exemplo:
Quando a pessoa usuária digita a sua senha em um campo, essa informação não deve ficar visível para outras pessoas. Isso é feito com o type password, que transforma o valor digitado em pequenos círculos. Veja um exemplo:
O type radio é semelhante ao controle checkbox. Entretanto, enquanto o checkbox permite a seleção de diversas alternativas em uma lista de opções, o type radio é indicado quando queremos que apenas uma alternativa seja selecionada. Além disso, seu controle tem o formato redondo. Confira o exemplo abaixo:
Se queremos que a pessoa usuária informe os valores numéricos dentro de uma faixa específica, devemos utilizar o type range. Ele utiliza os atributos min e max para definir os respectivos limites. Além disso, podemos definir qual o valor servirá de escala para o controle com o atributo step.
Também podemos definir um valor padrão para quando o controle for carregado na página por meio do atributo value. Vale dizer que, se nada for declarado, é utilizado o padrão min igual a zero e max igual a 100. Veja um exemplo abaixo:
O reset é utilizado para limpar os dados do formulário, funciona como um botão e não necessita de código adicional para realizar a tarefa. Veja um exemplo:
O type search é utilizado para definir um campo de busca e contém algumas características adicionais, como exibir a lista de sugestões com as últimas buscas. Ele também pode ser utilizado em conjunto com outros atributos, como o placeholder, que permite definir um termo para ser exibido no controle, como “Pesquisar” ou outro texto qualquer.
Ao definir o atributo name como “q”, o autocomplete é preenchido com as buscas realizadas em outros formulários que utilizam o mesmo name, o que aumenta a quantidade de sugestões de termos. Veja o exemplo abaixo:
O type submit é um dos mais utilizados em formulários, tanto que, em quase todos os exemplos mostrados acima, usamos esse recurso. Na prática, ele tem a função de enviar os dados do formulário para o servidor.
O type tel é utilizado para receber números de telefones. O controle pode ser utilizado em conjunto com o atributo pattern, que recebe uma expressão regular para definir o formato do número.
Também podemos utilizar o atributo placeholder para informar à pessoa usuária em qual formato o conteúdo deve ser digitado. Assim, caso a informação não esteja no formato apropriado, será exibida uma mensagem de erro. Veja no exemplo:
Já utilizamos o HTML input text em alguns exemplos de códigos acima. Basicamente, ele é usado para receber informações do tipo texto. Entretanto, ele aceita todos os tipos de dados do teclado, como letras, números e símbolos.
Para restringir o campo a somente letras é preciso utilizar o atributo pattern com uma expressão regular correspondente. No exemplo abaixo somente as letras maiúsculas ou minúsculas são aceitas.
<input type=”time”>
O type time funciona de forma semelhante ao date. Entretanto, o conteúdo exibido pelo controle corresponde à hora que, em um primeiro momento, equivale ao horário atual se não for definido um valor padrão por meio do atributo value. A pessoa usuária pode modificar o conteúdo conforme a necessidade.
Utilizamos o type url quando precisamos inserir o endereço de alguma página no campo do formulário, como o link da rede social. Ao utilizar esse atributo, o conteúdo é validado para garantir que o formato é correspondente ao de uma URL. Também é possível utilizar o atributo pattern para definir o modelo do endereço aceito pelo campo. Veja um código de exemplo:
O type week também funciona semelhante aos outros controles de data, entretanto, ele faz a seleção numérica correspondente a semana escolhida. Por padrão, o controle abre na semana atual, porém o valor pode ser alterado pela pessoa usuária ou definido no atributo value. Também é possível definir o valor inicial e final com a utilização dos atributos min e max. Confira um exemplo:
Quais os atributos do elemento HTML ?
Além das diferentes possibilidades de uso do elemento HTML , ele também contém uma série de atributos que ajudam a aumentar a sua funcionalidade. Confira os principais deles a seguir.
Definindo o tipo de arquivo que pode ser enviado: accept
Quando utilizamos o type file, podemos especificar algumas condições para restringir o tipo de arquivo enviado pela pessoa usuária. Isso é definido por meio do atributo accept, que pode conter as seguintes variações:
- file_extension: em que é especificada qual a extensão do arquivo, como .JPG, .PDF, .PNG, entre outros;
- audio/*: em que são especificados arquivos de áudio, como o MP3;
- vídeo/*: são aceitos arquivos em formato de vídeo, como o MP4;
- image/*: são aceitos somente arquivos de imagens;
- media_type: conforme os formatos relacionados na IANA Media Types, que contém todos os tipos de mídia válidos para a internet.
Adicionando texto alternativo em imagens: alt
O atributo alt é utilizado para oferecer um texto alternativo quando utilizamos o type image. Dessa forma, caso ocorra alguma falha no carregamento do arquivo, o texto alternativo será exibido na página.
Ativando ou desativando o preenchimento automático: autocomplete
Os tipos de em que são inseridos textos ou números têm a função autocomplete habilitada por padrão. Entretanto, é possível ativar e desativar esse recurso por meio do atributo autocomplete. Para isso, basta defini-lo como off para desabilitar a funcionalidade e on para ativá-la novamente.
Vale ressaltar que o atributo autocomplete também pode ser configurado na tag
.Nesse cenário, é preciso criar um vínculo entre o elemento separado e o formulário. Isso é feito por meio da definição do atributo id no formulário e a utilização do atributo form no elemento em que será criado o vínculo. Veja um exemplo.
Definindo o destino dos dados de um formulário: formaction
Ao utilizar a tag
