Html <input> Atributos da tag | Explicado

A tag HTML é usada para gerenciar os controles dos formulários da Web e é usada no HTML para coletar os dados inseridos do usuário. Sem tag, não podemos criar um formulário da web, por isso é um dos elementos mais significativos dos formulários HTML. HTML fornece vários atributos para a tag que pode ser usada para controlar o comportamento da tag. Os seguintes atributos serão discutidos neste tutorial:

• Atributo de tipo
• Atributo de nome
• Atributo min e max
• Atributo de foco automático
• Atributo desativado
• Atributo de espaço reservado
• Atributo readonly
• Atributo necessário
• Atributo múltiplo
• Atributo de tamanho
• Atributo de preenchimento automático

Este artigo apresentará uma visão abrangente de todos os atributos acima mencionados. Vamos prosseguir!

Atributo de tipo

Como o nome em si sugere o atributo de tipo na tag determina o tipo de entrada, o valor de By-DeFault do atributo de tipo é o texto. Podemos atribuir valores diferentes ao atributo de tipo, como senha, email, etc. A sintaxe básica do atributo de tipo é mostrada na figura a seguir:

Valores diferentes são especificados para o atributo de tipo em tag. O comportamento do atributo de tipo será diferente para valores diferentes.

Atributo de nome

Ele especifica o nome do elemento de entrada, a seguir será a sintaxe básica do atributo de nome:

Não afetaria a saída, em vez do atributo de nome informa ao servidor sobre o campo de entrada.

Atributo min e max

Esses atributos são usados ​​para especificar os valores mínimo e máximo do elemento de entrada. O trecho abaixo mostra a sintaxe dos atributos Min e Max:

Atributo de foco automático

O atributo de foco automático determina que um elemento deve obter foco automático quando a página carrega e a figura abaixo mostra a sintaxe do atributo de foco automático:

Atributo desativado

O atributo desativado nos permite desativar um elemento; nesse caso, o usuário não poderá usar ou clicar nesse campo:

Exemplo

Vamos considerar o código abaixo que implementa todos os atributos mencionados acima para diferentes campos:

Nome do aluno:




Nome do pai:




Idade:

O trecho acima cria vários campos de entrada, o atributo de foco automático é ativado no primeiro campo, para que, sempre que carregamos a página, o cursor apontará para esse campo. Não poderíamos clicar no segundo campo porque ele contém o atributo desativado. O terceiro campo de entrada é um campo de tipo numérico e especificamos os atributos Min e Max nele, para que ele leve o valor entre 20 e 60 apenas:

A saída verifica que todos os atributos estão operando corretamente.

Atributo de espaço reservado

Ele fornece uma dica sobre o valor esperado do campo de entrada. A sintaxe básica do atributo de espaço reservado será o seguinte:

Qualquer coisa que especificamos dentro do espaço reservado será exibido como uma dica como mostrado abaixo:

Atributo readonly

Ele determina que o campo é somente leitura, o que significa que o campo não pode ser modificado. A sintaxe do atributo somente leitura é mostrada na figura a seguir:

Especificamos Value = "Michael" e Ativamos o atributo somente leitura. Como resultado, não poderíamos alterar o valor desse campo de entrada:

Atributo necessário

O atributo necessário determina que o formulário não pode ser enviado se o campo de entrada não estiver preenchido. A sintaxe básica do atributo necessária é mostrada no seguinte snippet:

Se clicarmos no botão Enviar sem preencher o campo de entrada, obteremos o seguinte resultado:

Atributo múltiplo

Ele nos permite inserir vários valores e é usado principalmente com o tipo de entrada "arquivo", onde permite que um usuário escolha vários arquivos. Abaixo do snippet de código, mostra a sintaxe do atributo "múltiplo":

Snippet acima gera a seguinte saída:

Atributo de tamanho

É usado para definir o tamanho (largura) do campo de entrada, a sintaxe do atributo de tamanho é mostrada no snippet abaixo do rumo:

O tamanho padrão dos campos de entrada é de 20 caracteres e modificamos o tamanho do primeiro campo de entrada como 35, então ele gerará a seguinte saída:

Atributo de preenchimento automático

Ativando o atributo de preenchimento automático permite que um navegador preveja e complete automaticamente o campo de entrada. O snippet abaixo-dado mostra como usar o atributo autocompleto na tag de entrada:

Acima do snippet de código mostra a seguinte saída:

A saída verificou que, se AutoComplete = "ON", o navegador sugere os dados já inseridos.

Conclusão

Os atributos da tag são usados ​​para controlar o comportamento dos campos de entrada do formulário e.g. O atributo de tipo determina o tipo de entrada, o atributo de foco automático é usado para se concentrar no elemento específico na página Carregar. A habilitação do atributo de preenchimento automático fornece dados já inseridos como sugestões e atributos múltiplos nos permitem adicionar vários arquivos. Esta redação demonstrou um guia detalhado para o profundo entendimento dos atributos de tag html.