Como definir a quantidade de caracteres em um barra de entrada com CSS

Escrito por marina martin | Traduzido por rodrigo da silva
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como definir a quantidade de caracteres em um barra de entrada com CSS
O CSS define a largura visual de uma barra de entrada, não a entrada máxima de caracteres (Comstock/Comstock/Getty Images)

Você pode limitar o número de caracteres que alguém pode digitar na barra de entrada de um formulário web, ou caixa de texto, usando o atributo "maxlength" da tag "<input>" do HTML. É possível especificar a largura visual da caixa de texto com CSS, ou Cascading Style Sheets. Por si só, o CSS não pode limitar o número de caracteres de entrada em uma caixa de texto. Combinando HTML e CSS, é possível criar uma barra de entrada de formulário em uma largura com aproximadamente o mesmo tamanho que seu comprimento máximo de entrada.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo HTML, o editor de páginas da Web ou outro local onde o código HTML do seu formulário esteja localizado.

  2. 2

    Adicione o seguinte atributo na tag "<input>" para a barra de entrada apropriada:

    style="width:40px;"

    Altere "40" para a largura preferencial da barra de entrada, em pixels. Sua tag final "<input>" deverá se parecer com:

    <input type="text" style="width:40px;" />

  3. 3

    Adicione o seguinte dentro da tag "<input>" para definir um máximo de entrada em caracteres:

    maxlength="40"

    Altere "40" para o número máximo de caracteres que você deseja permitir no campo. Sua tag "<input>" agora deverá se parecer com:

    <input type="text" style="width:40px;" maxlength="40" />

  4. 4

    Salve suas alterações.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível