Quais os inputs mais usados?
Deixe um comentário / Blog / Por Vanessa Alcântara
O que são inputs?
Você programador ou desenvolvedor já se deparou com os elementos input do HTML como por exemplo: “button’’, “checkbox’’, e “color’’ que são tipos de dados dentre vários que estão presentes nos formulários de login armazenando os dados fornecidos usando a linguagem de marcação. Continue lendo para saber mais!
Quais são os inputs mais usados?
O elemento HTML input faz parte do conjunto de tags utilizadas para realizar a interação com o usuário. Ele é um dos principais recursos para 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.
A tag <input> é utilizada para proporcionar interatividade à página, pois permite receber informações fornecidas pelo usuário e 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.
Entretanto o elemento <input> não necessita da tag de fechamento, como acontece com outros elementos HTML. 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 o usuário 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, ainda pode haver a necessidade de informar atributos adicionais. Por isso, o elemento < input> não tem uma sintaxe única.
Veja a seguir os possíveis conteúdos que podemos receber por meio da tag <input>.
<input type=”button”>: 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.
<h1>Input type button</h1>
<input type="button" value="Clique aqui"><input type=”checkbox“>: O checkbox é utilizado quando queremos que o usuário 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.
<h1>Input type checkbox</h1>
<input type="checkbox" id="chocolate" name="chocolate">
<label for="chocolate">chocolate</label>
<input type="checkbox" id="morango" name="morango">
<label for="morango">morango</label><input type=”color“>: O type color é utilizado para que o usuário 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.
<h1>Input type color</h1>
<input type="color" id="vermelho" name="vermelho" value="#FF0000">
<label for="vermelho">vermelho</label>
<input type="color" id="azul" name="azul" value="#1D5DEC">
<label for="azul">azul</label><input type=”date“>: O HTML input date exibe um campo de entrada no formato data e um ícone de calendário ao lado que, ao ser clicado, abre um caixa de seleção de datas. Dessa forma, o usuário 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.
<h1>Input type date</h1>
<input type="date"><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. O usuário pode modificar o conteúdo conforme a necessidade.
<h1>Input type time</h1>
<input type="time"><input type=”email“>: O <input> 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.
<h1>Input type email</h1>
<input type="email"><input type=”file“>: O HTML input file é utilizado quando queremos enviar arquivos para o servidor, em diferentes formatos, como texto, PDF, vídeo, entre outros.
<h1>Input type file</h1>
<input type="file"><input type=”hidden“>: 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:
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" value="My excellent blog post" />
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657" />
</form><input type=”image“>: 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:
<h1>Input type image</h1>
<input type="image"><input type=”month“>: 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:
<h1>Input type month</h1>
<input type="month">
<input type=”number“>: O HTML input number determina que apenas dados numéricos podem ser inseridos pelo usuário 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:
<h1>Input type number</h1>
<input type="number"><input type=”password“>: Quando o usuário 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:
<h1>Input type password</h1>
<input type="password"><input type=”radio“>: 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:
<h1>Input type radio</h1>
<input type="radio" id="carne">
<label for="carne">carne</label>
<input type="radio" id="frango">
<label for="frango">frango</label><input type=”range“>: Se queremos que o usuário 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:
<h1>Input type range</h1>
<input type="range" min="-10" max="10"><input type=”reset“>: 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:
<h1>Input type reset</h1>
<form>
<div class="controls">
<label for="id">User ID:</label>
<input type="text" id="id" name="id">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</div>
</form><input type=”search“>: 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:
<h1>Input type search</h1>
<input type="search"><input type=”submit“>: 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.
<h1>Input type submit</h1>
<input type="submit"><input type=”tel“>: 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 o usuário 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:
<h1>Input type tel</h1>
<input type="tel"><input type=”text“>: 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.
<h1>Input type text</h1>
<input type="text"><input type=”url“>: 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:
<h1>Input type url</h1>
<input type="url"><input type=”week“>: 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 pelo usuário 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:
<h1>Input type week</h1>
<input type="week">Referencias: https://blog.betrybe.com/html/input-html/