DIRETO AO PONTO: Tipos de Input no html

Dessa fez vamo fala de input e seus tipos !

Input é nada mais nada menos que campos, ou espaços, para o usuário escrever e o site ou sistema usar esse dado para alguma finalidade. Por exemplo um input para escrever seu email e por fim fazer o login.

Sintaxe do input

  <input type="texte" id="email">

Tipos

Como outros elementos o input também tem atributos, vou explicar alguns que mais usam:

type

O type define o tipo do input:

  • text Um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor entrado.

  • email: Um campo para editar um endereço de e-mail. O valor do campo é validado para estar vazio ou ter um único endereço de e-mail válido antes de ser enviado. As pseudoclasses CSS :valid e :invalid são aplicadas apropriadamente.

  • button: Um botão sem comportamento padrão.

  • checkbox: Uma caixa de marcação. Você deve usar o atributo value para definir o valor enviado por este item. Use o atributo checked para indicar se o item está selecionado por padrão. Você também pode usar o atributo indeterminate para indicar que a caixa de marcação está em um estado indeterminado (na maioria das plataformas, isso desenha uma linha horizontal cortando a caixa).

  • color: Um controle para especificar cores. A interface de um seletor de cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores simples em texto

  • date: Um controle para inserir uma data (ano, mês e dia, sem horário).

  • datetime: Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.

  • datetime-local: Um controle para inserir data e horário, sem fuso horário.

  • file: Um controle que permite ao usuário selecionar um arquivo. Use o atributoaccept para definir os tipos de arquivo que o controle pode selecionar.

  • hidden: Um controle que não é exibido mas cujo valor é enviado ao servidor.

  • image: Um botão gráfico para enviar o formulário. Você deve usar o atributo src para definir a fonte da imagem e o atributo alt para definir um texto alternativo. Você pode usar os atributos height e width para definir o tamanho da imagem em pixels.

  • month: Um controle para inserir mês e ano, sem fuso horário.

  • number: Um controle para inserir um número de ponto flutuante.

  • password: Um campo de texto com uma só linha cujo valor é obscurecido. Use o atributo maxlength para especificar o comprimento máximo do valor que pode ser inserido.

  • radio: Um botão de escolha. Você deve usar o atributo value para definir o valor a ser enviado por este item. Use o atributo checked para indicar se este item deve estar selecionado por padrão. Botões de escolha que têm o mesmo valor para o atributo name estão no mesmo "grupo de botões de escolha"; apenas um botão de escolha no grupo pode estar selecionado de cada vez..

  • range: Um controle para inserir um número cujo valor exato não é importante. Este tipo de controle usa os seguintes valores padrão se os atributos correspondentes não forem especificados: -min: 0 -max: 100 -value: min + (max-min)/2, ou min se max for menos que min -step: 1

  • reset: Um botão que faz o conteúdo do formulário voltar a ter seus valores padrão

  • search: Um campo de texto com uma só linha para digitar termos de busca; quebras de linha são automaticamente removidas do valor entrado

  • submit: Um botão que envia o formulário.

  • tel: Um controle para inserir um número de telefone; quebras de linha são automaticamente removidas do valor entrado, mas nenhuma outra sintaxe é imposta. Você pode usar atributos como pattern e maxlength para restringir os valores inseridos no controle. As pseudoclasses CSS :valid e :invalid são aplicadas apropriadamente.

  • time: Um controle para inserir um horário sem fuso horário.

  • url: Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como pattern e maxlength para restringir os valores inseridos no controle

  • week: Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.