Número de entrada html

Às vezes, ao criar formulários da Web, você pretende coletar dados numerados. O melhor do HTML é que ele fornece tags dedicadas para coletar esses tipos de dados. A tag de entrada numérica do HTML se enquadra na categoria de tais tags e, neste artigo, tentaremos explorar o uso dessa tag html em profundidade.

Qual é a tag de entrada numérica em html?

A tag de entrada número em HTML permite que você insira uma entrada numerada. Esta entrada pode ser qualquer número, incluindo números inteiros negativos e não negativos, bem como "0". A tag de entrada número em HTML permite que você digite a entrada numerada através do teclado ou selecione -a na lista fornecida por esta tag. Além disso, esta tag também possui outros atributos associados a ela que são usados ​​para servir a propósitos diferentes. Por exemplo, você pode usar os atributos "min" e "max" da tag de entrada numérica para especificar o limite de entrada mínimo e máximo. Da mesma forma, você pode usar o atributo "Step" para especificar os intervalos de entrada. Para saber mais sobre como funciona a tag de entrada do número em HTML, você terá que passar pelas seções anteriores deste artigo.

Uso da tag de entrada número em html:

Para dominar o uso da tag de entrada numérica no HTML, você terá que entender os dois exemplos a seguir:

Exemplo # 1: Entrando na idade entre um certo limite:

Vamos projetar este exemplo de tal maneira que ele poderá coletar a idade de um usuário dentro do limite especificado. O script HTML que usamos é mostrado na imagem abaixo:

Neste exemplo, primeiro definimos o rótulo para nossa entrada numerada, eu.e., Idade. Em seguida, usamos a tag de entrada número para definir o limite de idade, que mantivemos entre 15 e 30. Isso significa que esse script HTML solicitará ao usuário que insira sua idade, mas essa idade deve ser restringida entre 15 e 30. Além disso, adicionamos um botão de envio a este script para torná -lo mais apresentável.

Ao executar o script HTML mostrado acima, a seguinte página da web foi exibida em nosso navegador. Você pode ver que recebemos um campo de entrada numérico no qual podemos digitar um número específico dentro do intervalo especificado com nosso teclado ou até usar as teclas de seta associadas ao campo de entrada numérica para selecionar a idade desejada.

A imagem mostrada abaixo representa uma idade selecionada aleatoriamente:

Além disso, como o limite mínimo de idade é de 15, não seremos capazes de digitar nada abaixo dele nem poder selecionar um número abaixo de 15 usando as setas. Quando atingirmos o limite mínimo de idade, esse número será destacado automaticamente, conforme mostrado na imagem a seguir, indicando que não podemos se mover abaixo desse limite de idade.

Da mesma forma, também não teremos permissão para ir além do limite máximo de idade, que é "30" neste caso. Isso é retratado na imagem mostrada abaixo:

Exemplo # 2: Inserindo o número de maçãs com um intervalo especificado:

Neste exemplo, apresentaremos a você um novo atributo associado à tag de entrada numérica de html, i i.e., o atributo de etapa. Este atributo é usado para especificar os intervalos com os quais você deseja aumentar ou diminuir a entrada numerada. Para fazer isso, escrevemos o seguinte script HTML:

Neste exemplo, queríamos que o usuário insira o número de maçãs que ele/ela queria em quilogramas em múltiplos de "2", eu.e., Ele/ela pode entrar 2, 4, 6, 8, e assim por diante. Para alcançar essa funcionalidade, especificamos o atributo "Step" com a tag do tipo de entrada e mantemos seu valor como "2".

Quando executamos esse script, recebemos a página da web mostrada na imagem abaixo:

A imagem a seguir mostra que selecionamos 6 kg de maçãs:

No entanto, neste exemplo, não definimos nenhum limite inferior ou superior devido à possibilidade de o usuário acabar selecionando um número negativo (que tecnicamente seria inválido), como mostrado na imagem abaixo:

Para impedir que isso aconteça, modificaremos ligeiramente o script acima, usando o atributo "min" para especificar que a quantidade mínima de maçãs não pode ser inferior a 2 kg, como mostrado na imagem a seguir:

Quando executamos nosso script HTML depois de fazer essa modificação, não tivemos permissão para ficar abaixo de 2 kg, como mostrado na imagem abaixo:

Conclusão:

Através deste artigo, queríamos transmitir o uso da tag de entrada numérica oin html para nossos leitores. Primeiro desenvolvemos um entendimento básico dessa tag, discutindo alguns dos atributos associados a ela. Depois disso, explicamos o uso desta tag com a ajuda de dois exemplos relevantes. Depois de passar por este guia, você entenderá claramente como a tag de entrada do número funciona no HTML.