Atributos HTML <Input>
Este artigo discute sobre os atributos de entrada HTML . Existem vários atributos HTML que podem ser aplicados ao elemento <input> . Este capítulo explica esses atributos em detalhes.
Atributo de valor
Quando um campo de entrada é acessado por meio de atributos de entrada HTML , seu valor é inserido da seguinte forma:
Os seguintes campos têm valores padrão (iniciais):
Example
- Atributos HTML <Input>:
- Atributo de valor:
- Atributo desativado:
- Atributo somente leitura:
- Atributo de tamanho:
- Atributos mínimo e máximo:
- Atributo comprimento máximo:
- Atributo Múltiplo:
- Atributo de espaço reservado:
- Atributo padrão:
- Atributo Necessário:
- Atributo de foco automático:
- Atributo da Etapa:
- Atributos de altura e largura:
- Atributo de preenchimento automático:
- Atributo de lista:
- Formulário HTML e elementos de entrada:
- Vantagens dos atributos HTML <Input>:
Atributo desativado
Nos atributos de entrada HTML, o atributo de entrada desabilitada significa que os campos de entrada devem ser desabilitados para que não possam ser preenchidos.
Quando um campo de entrada está desabilitado , ele é inútil e não pode ser clicado.
Os envios de formulários não enviarão o valor dos campos de entrada desabilitados!
Há um campo de entrada desabilitado:
Example
O atributo desativado também pode ser aplicado aos botões aqui está um exemplo de como:
Example:
Atributo somente leitura
Em atributos de entrada HTML , input readonly indica um campo de entrada somente leitura.
Ao contrário dos campos de entrada editáveis, os campos de entrada somente leitura não podem ser personalizados (embora os usuários possam destacá-los e copiar seu conteúdo).
Ao enviar um formulário, o valor de um campo de entrada somente leitura será enviado.
O seguinte campo de entrada é somente leitura:
Example
Atributo de tamanho
O atributo de tamanho de entrada nos atributos de entrada HTML indica a largura de um campo de entrada renderizado em caracteres. Define o tamanho em caracteres do campo de entrada.
O tamanho é definido como 20 por padrão.
É imperativo observar que o atributo tamanho funciona com os seguintes tipos de entrada: texto, pesquisa, tel, url, e-mail e senha.
Para definir a largura de um campo de entrada, siga estas etapas:
Example
Atributos mínimo e máximo
Os atributos de entrada HTML input Min e Max indicam os valores mínimo e máximo para os campos de entrada.
Os tipos de entrada para os atributos min e max consistem em número, intervalo, data, data-hora-local, mês, hora e semana.
Você pode criar um intervalo de valores legais usando os atributos max e min em conjunto uns com os outros.
Você pode definir uma data máxima, uma data mínima e um intervalo de valores legais para conseguir isso:
Example
Aqui está outro exemplo do atributo max e min no campo de texto:
Example:
Atributo comprimento máximo
O comprimento máximo de um campo de entrada é controlado pelo atributo input maxlength nos atributos de entrada HTML . Indica quantos caracteres são permitidos em um campo de entrada.
Maxlength define o número máximo de caracteres que o campo de entrada permitirá. Apesar disso, esse atributo não fornece feedback.
Você deve escrever código JavaScript se quiser alertar o usuário.
O comprimento máximo de um campo de entrada pode ser definido da seguinte forma:
Example
Atributo Múltiplo
Há um atributo múltiplo de entrada que significa que um usuário tem permissão para inserir mais de um valor em um campo de entrada.
Vários atributos funcionam com e-mail e tipos de entrada de arquivo em formulários HTML.
Vários valores podem ser inseridos em um campo de upload de arquivo:
Example
Vários atributos podem ser definidos para apenas o tipo que seria selecionado aqui está um exemplo:
Example:
Atributo de espaço reservado
Em atributos de entrada HTML , os espaços reservados de entrada indicam uma breve descrição do valor esperado de um campo (um valor de amostra ou uma breve descrição de seu formato esperado).
Uma dica curta aparece antes que o usuário insira um valor no campo de entrada.
Os tipos de entrada suportados pelo atributo de espaço reservado incluem:
- Texto
- Procurar
- url
- Tel
- Senha
Há um texto de espaço reservado no campo de entrada:
Example:
Atributo padrão:
Uma expressão regular é necessária quando o atributo padrão de entrada é incluído nos atributos de entrada HTML, para que o valor do campo de entrada seja validado com base nela.
Os tipos de entrada suportados pelo atributo padrão incluem:
- Texto
- Data
- Procurar
- url
- Tel
- Senha
Você pode ajudar o usuário descrevendo o padrão por meio do atributo de título global.
Por favor, dê uma olhada em nosso tutorial de JavaScript para mais informações sobre expressões regulares.
Uma área de texto que pode consistir em apenas três letras sem números ou caracteres especiais (por exemplo, uma letra maiúscula):
Example
O atributo padrão é útil em muitas áreas aqui está um exemplo de atributo padrão no email do tipo de entrada:
Example:
Atributo Necessário
Os atributos de entrada HTML, como entrada obrigatória , especificam que os campos de entrada devem ser preenchidos antes do envio.
Funciona com os seguintes tipos de entrada:
- Texto
- Selecionadores de data
- Procurar
- url
- Tel
- Número
- Caixa de seleção
- Arquivo
- Rádio
- Senha
O seguinte campo de entrada é obrigatório:
Example
Atributo de foco automático
Quando a página é carregada, o atributo de foco automático de entrada garante que o campo de entrada ganhe foco proativamente.
Assim que a página for carregada, o campo de entrada “Primeiro nome do proprietário:” ganhará foco automaticamente:
Example
Aqui está um exemplo completo do atributo autofocus em um formulário:
Example:
Atributo de Etapa
Em atributos de entrada HTML, o atributo de etapa de entrada identifica um intervalo de número válido para um campo de entrada.
Por exemplo, se step=”3″, os números legais podem ser -3, 0, 3, 6, etc.
Para gerar um intervalo de valores permitidos, emparelhe esse atributo com os atributos max e min.
Números, intervalos, datas, local de data e hora, meses, horas e semanas são todos suportados pelo atributo step.
Campo de entrada com intervalos de números legais:
Example
Informações Adicionais: Existem muitas maneiras de adicionar entrada ilegal ao JavaScript, e as restrições de entrada não são 100% confiáveis. Também é necessário que o receptor (o servidor) verifique a entrada para restringi-la com segurança!
Atributos de Altura e Largura
A altura e a largura de um elemento <input type=”image”> são determinadas por meio das propriedades de altura e largura de entrada .
Sugestões: Ao adicionar uma imagem a um <input> HTML, certifique-se de incluir os parâmetros de altura e largura. Se a altura e a largura da imagem forem predeterminadas, o espaço necessário será alocado quando o site for carregado.
Sem esses parâmetros, o navegador não consegue alocar espaço suficiente para a imagem, pois não tem certeza de seu tamanho.
O resultado será um ajuste no layout do site durante o carregamento (enquanto as imagens são carregadas).
Considere uma imagem como o botão enviar com características de altura e largura:
Example
Atributo de preenchimento automático
A propriedade autocomplete indica se o preenchimento automático deve ser ativado ou desativado para um formulário ou campo de entrada.
Com o preenchimento automático, o navegador da Web pode antecipar o valor. Com base nos valores inseridos anteriormente nos atributos de entrada HTML, o navegador deve fornecer alternativas ao usuário quando ele começar a digitar em um campo.
A propriedade autocomplete é suportada pelos tipos form> e input> listados abaixo:
- Texto
- Selecionadores de data
- Procurar
- url
- Telefone
- Cor
- faixa
- Senha
Uma entrada HTML com preenchimento automático ativado para um campo de entrada e desativado para os outros:
Example
Atributo de lista
O atributo da lista de entrada , ao se referir aos atributos de entrada HTML, designa um elemento <datalist> que possui opções predefinidas para um elemento <input>.
Valores predefinidos para um elemento <input> em um <datalist> :
Example
Formulário HTML e elementos de entrada
Marcação | Visão geral |
---|---|
<forma> | Cria um formulário HTML de entrada do usuário. |
<entrada> | Especifica uma entrada de controle. |
Dica: visite nossa referência de tags HTML para obter uma lista abrangente de todas as tags HTML possíveis .
HTML <Input> Atributos Vantagens
Os atributos de entrada HTML oferecem várias vantagens ao criar formulários da Web ou outros cenários de entrada do usuário:
- Experiência do usuário aprimorada: os atributos de entrada HTML podem ajudar a orientar os usuários, fornecendo dicas úteis ou campos obrigatórios. Isso pode tornar a experiência do usuário mais intuitiva e melhorar as chances de os usuários enviarem o formulário com sucesso.
- Flexibilidade: A variedade de tipos de entrada e atributos disponíveis com elementos de entrada HTML torna possível criar uma variedade de controles de formulário personalizados para atender a diferentes necessidades.
- Acessibilidade: certos atributos, como o atributo “obrigatório”, podem tornar os formulários da Web mais acessíveis para usuários com deficiências, fornecendo orientações claras sobre como preencher o formulário.
- Validação simplificada: os atributos de entrada HTML podem ser usados para validar os dados do formulário antes de serem enviados, o que pode ajudar a reduzir erros e evitar que dados incompletos ou imprecisos sejam inseridos.
- Segurança aprimorada: os atributos de entrada HTML podem ser usados para evitar ataques mal-intencionados, como injeção de SQL ou script entre sites, validando os dados antes de serem enviados.