Questão de Programação — HTML (HyperText Markup Language) — Quadrix 2025

HTML5: atributos de validação e sugestão em formulários

Gabarito: ERRADO (E). O código apresentado na imagem não atende plenamente aos requisitos do enunciado, pois, embora seja possível restringir a entrada a letras e definir um tamanho mínimo e máximo, a validação de "apenas letras" não é garantida apenas com os atributos HTML5 padrão, e a oferta de sugestões enquanto o usuário digita exige o atributo list combinado com um elemento <datalist>, que não está presente no código. A alternativa correta é a letra E. O HTML5 introduziu uma série de atributos para validação de formulários diretamente no HTML, sem necessidade de JavaScript. Para o campo "Usuário", os requisitos são: aceitar apenas letras (maiúsculas ou minúsculas), com no mínimo 3 e no máximo 10 caracteres, e oferecer sugestões de nomes comuns enquanto o usuário digita. Vamos decompor cada requisito e ver como o HTML5 atende (ou não) a cada um. 1. Aceitar apenas letras: O HTML5 não possui um atributo nativo que restrinja a entrada a apenas letras. O atributo pattern permite definir uma expressão regular que o valor do campo deve corresponder para ser considerado válido. Para aceitar apenas letras (maiúsculas ou minúsculas), a expressão regular seria [A-Za-z]+. No entanto, é importante notar que o atributo pattern apenas valida o valor quando o formulário é submetido; ele não impede o usuário de digitar outros caracteres. Para uma restrição em tempo real, seria necessário JavaScript. Além disso, o atributo pattern não é suportado em todos os navegadores de forma consistente, e a validação pode ser contornada. 2. Mínimo de 3 e máximo de 10 caracteres: O HTML5 oferece os atributos minlength e maxlength para definir o número mínimo e máximo de caracteres, respectivamente. O maxlength impede que o usuário digite mais do que o limite, enquanto o minlength é usado para validação (o formulário não é submetido se o valor tiver menos caracteres que o mínimo). Esses atributos são bem suportados e atendem a esse requisito. 3. Oferecer sugestões de nomes de usuário comuns enquanto o usuário digita: Para isso, o HTML5 fornece o elemento <datalist>, que define uma lista de opções pré-definidas. O campo de entrada deve ter o atributo list apontando para o id do <datalist>. Quando o usuário digita, o navegador mostra as opções que correspondem ao texto digitado. Sem o <datalist>, não há como oferecer sugestões nativamente em HTML5. Portanto, o código correto deveria incluir:

• Um campo <input type="text"> com os atributos pattern="[A-Za-z]+", minlength="3", maxlength="10" e list="sugestoes".

• Um elemento <datalist id="sugestoes"> contendo as opções de nomes de usuário.

  A banca explora a confusão entre os atributos de validação e a necessidade do <datalist> para sugestões.

Item — ❌ ERRADO

O item afirma que o código apresentado é suficiente para criar o formulário com todas as características descritas. Isso é falso, pois:

• Falta o elemento <datalist>: Sem ele, não é possível oferecer sugestões de nomes de usuário enquanto o usuário digita. O atributo list no <input> é inútil sem um <datalist> correspondente.

• A validação de "apenas letras" não é garantida: O atributo pattern com a expressão regular [A-Za-z]+ é necessário para validar que o valor contém apenas letras. Se o código não incluir esse atributo, ou se usar uma expressão incorreta, a validação falha. Além disso, o pattern não impede a digitação de caracteres inválidos, apenas invalida o formulário na submissão.

• Possível uso incorreto de atributos: O código pode usar type="text" sem pattern, ou usar type="email" que aceita outros caracteres, ou ainda usar maxlength sem minlength, ou vice-versa.

Portanto, o código não atende aos requisitos do enunciado, tornando o item ERRADO.

• Validação: pattern (regex), minlength, maxlength, required, type (email, url, etc.).

• Sugestões: list + <datalist>.

• Restrição em tempo real: JavaScript (evento input).

Gabarito: letra E (ERRADO).