HTML - Atributos de Entrada
Atributos Comuns de Entrada
type
O atributo type define o tipo de elemento de entrada, como texto, senha, caixa de seleção, botão de opção e outros. Ele determina a aparência e o comportamento do campo de entrada. Configurar
Exemplo
<input type="password">ocultará os caracteres digitados pelo usuário, enquanto
Exemplo
<input type="checkbox">cria uma caixa de seleção que pode ser marcada ou desmarcada.
name
O atributo name dá um nome ao elemento de entrada. Ele é usado para identificar o elemento ao enviar os dados do formulário para o servidor. O atributo name é importante para o processamento e manipulação de dados no lado do servidor. Ele permite acessar o valor do campo de entrada usando o nome como referência.
value
O atributo value define o valor inicial do elemento de entrada. Pode ser preenchido com um valor padrão ou deixado vazio para o usuário preencher.
Exemplo
<input type="text" value="João da Silva">preencheria previamente o campo de texto com o valor "João da Silva". O atributo value também é usado para especificar o valor de botões de opção e caixas de seleção.
placeholder
O atributo placeholder fornece um texto de dica ou exemplo dentro do campo de entrada. Ele é exibido quando o campo de entrada está vazio e desaparece quando o usuário começa a digitar. Os placeholders ajudam a orientar os usuários sobre o tipo de informação esperada no campo de entrada.
Exemplo
<input type="email" placeholder="Digite seu e-mail">mostraria "Digite seu e-mail" como texto de placeholder.
required
O atributo required especifica que o campo de entrada deve ser preenchido antes de enviar o formulário. Se o usuário tentar enviar o formulário sem preencher um campo obrigatório, o navegador exibirá uma mensagem de erro e impedirá o envio do formulário. Esse atributo ajuda a verificar a entrada do usuário e garantir que as informações necessárias sejam fornecidas.
readonly
O atributo readonly torna o campo de entrada somente leitura, impedindo que o usuário altere seu valor. No entanto, o valor ainda pode ser selecionado e copiado. Campos somente leitura são úteis para exibir valores pré-preenchidos ou calculados que não devem ser alterados pelo usuário. Os dados dos campos somente leitura ainda são enviados quando o formulário é submetido.
disabled
O atributo disabled desativa o elemento de entrada, tornando-o não clicável e não editável. Campos desativados ficam acinzentados e não respondem às interações do usuário. Eles não são enviados como parte dos dados do formulário. Campos desativados são comumente usados quando certos campos de entrada não são aplicáveis ou não devem ser alterados com base em outras condições.
Atributos de Validação
min e max
Os atributos min e max definem os valores mínimo e máximo permitidos para tipos de entrada numérica, como número, intervalo e data. Esses atributos ajudam a verificar se o valor inserido pelo usuário está dentro de um intervalo definido.
Exemplo: Campo de entrada numérica com min e max
<input type="number" min="0" max="100">Se o usuário inserir um valor fora desse intervalo, o formulário não será enviado e o navegador exibirá uma mensagem de erro.
minlength e maxlength
Os atributos minlength e maxlength definem o comprimento mínimo e máximo permitido para tipos de entrada de texto, como texto, e-mail e senha. Esses atributos limitam o número de caracteres que podem ser inseridos no campo de entrada.
Exemplo: Campo de senha com minlength e maxlength
<input type="password" minlength="8" maxlength="20">Se o valor inserido não atender aos requisitos de comprimento, o formulário não será enviado.
pattern
O atributo pattern define um padrão de expressão regular que o valor de entrada deve corresponder. É usado para verificar o formato dos dados inseridos, como endereços de e-mail, números de telefone ou padrões específicos. O padrão é definido usando a sintaxe de expressão regular.
Exemplo: Campo de entrada de e-mail com pattern
<input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}">Se o valor inserido não corresponder ao padrão definido, o formulário não será enviado e o navegador exibirá uma mensagem de erro.
step
O atributo step define os incrementos para tipos de entrada numérica ao usar teclas de seta ou controles de rotação. Ele define a granularidade dos valores permitidos.
Exemplo: Campo de entrada numérica com step
<input type="number" step="0.1">Definir step="0.1" em um campo de entrada numérica permitirá valores com uma casa decimal, como 0.1, 0.2, 0.3, etc. Definir step="10" permitirá valores em incrementos de 10, como 10, 20, 30, etc. O atributo step funciona junto com os atributos min e max para controlar o intervalo e o incremento dos valores permitidos.
Esses atributos de validação fornecem uma maneira de verificar e limitar a entrada do usuário no lado do cliente antes de enviar o formulário. Eles ajudam a manter a integridade dos dados, reduzem a validação no lado do servidor e fornecem feedback imediato ao usuário. Ao usar esses atributos, você pode criar formulários mais robustos e amigáveis que orientam os usuários a inserir dados válidos e esperados.
Atributos de Acessibilidade
autocomplete
O atributo autocomplete especifica se o navegador deve preencher o campo de entrada com base nos valores anteriores do usuário. Ele ajuda os usuários a preencherem formulários de forma mais rápida e precisa, especialmente para informações comuns como nomes, endereços de e-mail e endereços de entrega.
Exemplo: Campo de entrada com preenchimento automático ativado
<input type="email" autocomplete="on">Definir autocomplete="on" ativará o recurso de preenchimento automático do navegador para o campo de entrada. O navegador sugerirá valores anteriores que correspondam ao tipo e nome da entrada. Os usuários podem selecionar entre as sugestões, economizando tempo e reduzindo erros de digitação.
autofocus
O atributo autofocus coloca o foco no campo de entrada quando a página é carregada. Ele direciona a atenção do usuário para um campo específico, deixando-o pronto para receber entrada. Apenas um elemento de formulário pode ter o atributo autofocus por página.
Exemplo: Campo de entrada com foco automático
<input type="text" autofocus>Quando a página for carregada, o cursor será posicionado dentro do campo de entrada com o atributo autofocus. Isso é útil para formulários onde o campo principal de entrada é conhecido antecipadamente, como barras de pesquisa ou formulários de login.
aria-label e aria-labelledby
Os atributos aria-label e aria-labelledby fornecem rótulos acessíveis para elementos de entrada. Eles ajudam a melhorar a acessibilidade para usuários com tecnologias assistivas, como leitores de tela.
O atributo aria-label permite que você especifique um rótulo de texto para o campo de entrada que é lido por tecnologias assistivas. É útil quando o rótulo visual não é suficiente ou quando não há um rótulo visível com o campo de entrada.
Exemplo: Campo de entrada com aria-label
<input type="text" aria-label="Pesquisar">Neste exemplo, as tecnologias assistivas lerão "Pesquisar" como o rótulo para o campo de entrada, mesmo que não haja um rótulo visível na página.
O atributo aria-labelledby, por outro lado, permite que você associe o campo de entrada a um elemento existente na página que serve como seu rótulo. O valor de aria-labelledby deve ser o ID do elemento de rotulagem.
Exemplo: Campo de entrada com aria-labelledby
<label id="rotulo-nome">Nome:</label>
<input type="text" aria-labelledby="rotulo-nome">Neste caso, as tecnologias assistivas usarão o conteúdo de texto do elemento com o ID "rotulo-nome" como o rótulo para o campo de entrada.
Ao usar esses atributos de acessibilidade, você pode tornar seus formulários mais inclusivos e fáceis de usar para pessoas com deficiências. Eles fornecem contexto e informações adicionais para tecnologias assistivas, ajudando os usuários a entender o propósito e a entrada esperada de cada campo do formulário.
Atributos de Estilo
size
O atributo size define a largura visível do elemento de entrada em caracteres. Ele altera o tamanho do campo de entrada sem mudar o comprimento real do valor que pode ser inserido. O atributo size é usado para definir o tamanho físico do campo de entrada, tornando-o maior ou menor com base no número especificado de caracteres.
Exemplo: Campo de entrada com atributo size
<input type="text" size="40">O campo de entrada de texto será exibido com uma largura que pode acomodar cerca de 40 caracteres. No entanto, os usuários ainda podem inserir mais caracteres do que o tamanho especificado, e o campo de entrada irá rolar horizontalmente para mostrar o conteúdo extra.
O atributo size não limita o número de caracteres que podem ser inseridos no campo de entrada. Ele apenas controla a largura visual do campo. Para limitar o comprimento do valor inserido, você deve usar o atributo maxlength.
width e height
Os atributos width e height permitem que você defina a largura e a altura do elemento de entrada usando unidades CSS. Esses atributos oferecem mais controle sobre o tamanho e o layout dos campos de entrada dentro do seu formulário.
Exemplo: Campo de entrada com atributos width e height
<input type="text" style="width: 200px; height: 30px;">O campo de entrada de texto terá uma largura de 200 pixels e uma altura de 30 pixels. Você pode usar várias unidades CSS, como pixels (px), porcentagens (%) ou ems (em), para definir os tamanhos desejados.
Usando os atributos width e height, você pode criar campos de entrada com tamanhos personalizados que se encaixam bem no layout do seu formulário. Isso é útil quando você tem necessidades específicas de design ou deseja alinhar os campos de entrada com outros elementos na página.
Os atributos width e height devem ser usados com o atributo style ou um arquivo CSS externo para aplicar os tamanhos desejados. O atributo style permite que você defina estilos CSS inline diretamente no elemento de entrada.
style
O atributo style permite que você aplique estilos CSS inline ao elemento de entrada. Ele oferece flexibilidade na personalização da aparência dos campos de entrada além dos atributos básicos.
Com o atributo style, você pode definir várias propriedades CSS para controlar o estilo visual do campo de entrada. Isso inclui propriedades como cores, fontes, bordas, preenchimento e muito mais.
Exemplo: Campo de entrada com atributo style
<input type="text" style="border: 2px solid blue; padding: 5px; font-size: 16px; color: #333;">O campo de entrada de texto terá uma borda sólida azul de 2 pixels, 5 pixels de preenchimento, um tamanho de fonte de 16 pixels e uma cor de texto #333 (cinza escuro). Você pode adicionar várias propriedades CSS dentro do atributo style, separando-as com ponto e vírgula.
O uso do atributo style oferece grande controle sobre a apresentação visual dos seus campos de entrada. Você pode combinar o estilo dos campos de entrada com o design geral da sua página web, criando uma interface de usuário coesa e visualmente atraente.
No entanto, geralmente é recomendado usar arquivos CSS externos ou tags <style> na seção <head> do seu documento HTML para aplicar estilos aos seus campos de entrada. Essa abordagem separa a apresentação da estrutura e torna seu código mais fácil de manter e reutilizar.
Ao usar esses atributos de estilo, você pode melhorar a aparência visual dos seus campos de entrada, tornando-os mais atraentes e fáceis de usar. Você pode ajustar o tamanho, as dimensões ou aplicar estilos personalizados para criar formulários bem projetados.