Atributos de formulário de entrada em html
Como os atributos de entrada funciona no HTML
A funcionalidade dos atributos depende dos valores transportados por esses atributos. Os atributos e seus valores suportados são descritos aqui.
Atributo de tipo
Como o elemento de entrada é a parte central dos formulários HTML, o atributo de tipo é o ingrediente chave do elemento de entrada. Ele define o tipo de entrada que possui um dos seguintes valores.
- texto: usado para descrever um campo de texto
- número: usado para criar um campo que aceite valores numéricos
- e-mail: usado para inserir um endereço de e -mail
- cor: Defina a cor de um campo de entrada
- Caixa de seleção: Para criar uma caixa de seleção
- rádio: Para criar um botão de rádio
- Tel: cria um campo que aceita números de telefone
- imagem: usado para obter o arquivo de imagem do usuário
- escondido: Um campo que não será exibido na tela do usuário
- data: cria um campo que aceita a data
- mês: cria um campo que contém mês e ano a ser selecionado
- enviar: um botão que enviaria os dados do formulário
- reiniciar: Isso cria um botão que redefine todos os dados de formulário
Os mencionados acima são os valores mais utilizados do atributo de tipo e o exemplo abaixo do estado faz uso de poucos deles.
Exemplo
O código escrito abaixo executa alguns valores do tipo atributo.
Quatro tipos de entrada diferentes são usados no código acima que usa o texto dos valores, email, envio e redefinir.
Saída
Atributo de valor
Sempre que um formulário HTML é definido, recomenda -se atribuir um valor inicial a cada elemento. Para fazer isso, você tem que usar o atributo de valor. O tipo de entrada deve ser definido para usar este atributo.
Exemplo
O código fornecido abaixo práticas atributo de valor no tipo de entrada = texto e tipo de entrada = enviar.
Saída
Atributo somente leitura
Este atributo não permitiria escrever dentro do campo de entrada.
Exemplo
O código HTML forneceu pratica o somente leitura atributo em um campo de entrada.
Saída
O campo de texto mostrado na saída não permitirá que você escreva nem o clique do mouse tomaria qualquer ação.
Atributo desativado
O tipo de entrada que carrega esse atributo exibiria apenas a área coberta pelo campo de entrada. No entanto, você não pode executar nenhuma ação nesse elemento de entrada.
Exemplo
O desabilitado atributo do elemento de entrada é praticado no código a seguir
Saída
Observação: O atributo somente leitura é enviado com o formulário, enquanto o atributo desativado permite o valor para envio.
Atributo de padrão
Este atributo aceita expressões regulares para as quais o valor desse campo será verificado. É usado com poucos tipos de entrada, como texto, email, tel, URL, senha e data.
Exemplo
No código a seguir, o padrão O atributo é usado em um campo de texto que aceitará apenas pequenos alfabetos.
Saída
Para verificação do atributo padrão, tentamos entrar nos alfabetos de capital. No entanto, um erro provocou pedir para corresponder ao formato solicitado.
Atributo de espaço reservado
Este atributo adiciona caracteres fictícios que ajudam o usuário a subestimar o objetivo desse campo.
Exemplo
O código mencionado abaixo se aplica o espaço reservado Campo de atributo para descrever que o campo de texto deve aceitar seu nome.
Saída
Observa-se a partir da saída que o campo de texto instrui o usuário a inserir seu nome.
Atributo necessário
Os tipos de entrada que usam atributos necessários são obrigatórios para serem preenchidos.
Exemplo
O código escrito abaixo define o atributo necessário para um campo de texto.
Saída
Como o campo é obrigatório a ser preenchido, a submissão não será realizada até que algum texto seja escrito dentro do campo de texto.
Atributo de foco automático
Se a página da web estiver recarregada, o campo de entrada será focado no qual o atributo de foco automático será usado.
Exemplo
O código a seguir define o auto-foco atributo do elemento de entrada.
Saída
Como usamos o auto-foco atributo em um campo de texto, portanto, sempre que a página for carregada, o cursor continuará marcando.
Atributo múltiplo
Este atributo permite adicionar vários valores (anexar vários arquivos é o principal uso deste atributo).
Exemplo
O código fornecido abaixo leva o arquivo como um tipo de entrada e múltiplo o atributo é aplicado no tipo de entrada.
Saída
A saída mostra que três arquivos estão anexados que descrevem o funcionamento de vários atributos.
Atributo de altura e largura
Este atributo é usado com o tipo de imagem e define a altura e a largura da imagem.
Exemplo
O tipo de entrada é definido como imagem e o altura largura atributos são aplicados nele.
Saída
A imagem na saída seria ajustada de acordo com o valor de largura e altura.
Atributo min/max
Os valores mínimo/máximo para vários tipos de entrada são especificados por esses atributos. Os tipos de entrada podem incluir texto, número, data, alcance, mês, hora e semana.
Exemplo
O código fornecido abaixo usa o min e máx atributo onde o tipo de entrada é definido como número.
Saída
Como mostrado na saída, o campo numérico não está aceitando 21, pois o limite foi definido como 20.
Atributo maxlength
O número de caracteres para um tipo de entrada pode ser especificado usando o atributo maxLength.
Exemplo
O código seguinte limita o número de caracteres para 5 em um campo de texto.
Saída
A saída acima contém 5 caracteres no campo de texto, o campo de texto não permitirá o 6º caractere devido a comprimento máximo atributo.
Conclusão
O elemento de entrada possui uma extensa lista de atributos para criar um formulário HTML destacado. Esta postagem informativa lista os atributos do elemento de entrada dos formulários HTML. Os atributos suportados pelo elemento de entrada são, tipo, valor, desativado, somente leitura, foco automático, múltiplo, altura e largura, maxlength etc,. Além disso, cada atributo é praticado usando um exemplo que ajudará a subestimar a funcionalidade.