Início /Programação /HTML /Como limitar a quantidade de caracteres nos campos de um formulário HTML

Como limitar a quantidade de caracteres nos campos de um formulário HTML

Por: Angelo Luis Ferreira | 31/05/2022 Acessos: 6.336

Neste artigo vamos mostrar como limitar a quantidade de caracteres que podem ser digitados em campos de um formulário HTML. Para isso, utilizaremos os atributos minlength e maxlength que definem a quantidade mínima e máxima de caracteres permitidos para o elemento input.

Observações:

a) Os atributos apresentados neste tutorial resolvem as validações diretamente no HTML, ou seja, diretamente no navegador do usuário (front-end).

b) No entanto, é recomendável validar também no back-end. Isso se faz necessário porque usuários mais avançados podem burlar a limitação de caracteres, digitando algum código diretamente pelo front-end. Para obter maior segurança, recomenda-se portanto, fazer as duas validações: no front-end (HTML) e no back-end (PHP, Python, ou qualquer outra linguagem de programação back-end), evitando-se assim usuários mal intencionados ou eventuais bugs.

1. Utilizando os atributos "minlength" e "maxlength" elemento "input" do HTML

1.1. O atributo minlength especifica o número mínimo de caracteres permitidos no elemento <input>

1.2.1. Um elemento <input> com um comprimento mínimo de 3 caracteres:. Veja o exemplo abaixo:

<input type="text" id="username" name="username" minlength="3">

1.2. O atributo maxlength especifica o número máximo de caracteres permitidos no elemento <input>

1.2.1. Um elemento <input> com um comprimento máximo de 5 caracteres:. Veja o exemplo abaixo:

<input type="text" id="username" name="username" maxlength="5">

1.3. Se desejar, é possível utilizar os dois atributos em um mesmo <input>, limitando a quantidade mínima e máxima de um campo do formulário. Veja o exemplo abaixo:

<input type="text" id="username" name="username" minlength="3" maxlength="10">

1.4. A seguir, veja o exemplo onde utilizamos os os dois atributos minlength e maxlength em um único <input>.

😀 Teste o nosso exemplo no CodePen abaixo. No campo username, digite nomes menores de 3 e maiores de 10 caracteres para testar.


  See the Pen
  Limitar quantidade de caracteres no input - HTML by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Documentação Oficial

1. [Input - Atributo minlength] » MDN Web Docs - Mozilla

2. [HTML attribute: minlength] » MDN Web Docs - Mozilla

3. [Input - Atributo maxlength] » MDN Web Docs - Mozilla

4. [HTML attribute: maxlength] » MDN Web Docs - Mozilla

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO