Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida de uso do atributo "title" para mensagem de erro com Regex

Referente ao curso JavaScript na Web: validação de Formulários e HTML5, no capítulo Validação com HTML e atividade Regex para senhas

por Clayton De Souza Klein
| 197.5k xp | 12 posts
Vendedor

Na aula "Regex para senhas" por volta dos 8:25min o instrutor comentou sobre utilizar o atributo title para complementar a mensagem padrão de erro que é apresentada caso a senha não atenda o padrão exigido...

Minha dúvida é se este procedimento serve apenas para input do tipo password, pq utilizo Chrome e estou tentando fazer a mesma coisa em inputs do tipo text e email e não aparecem as informações do atributo title que coloquei no HTML.

1 resposta
solução!
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Clayton, tudo bem?

O atributo "title" é comumente utilizado para fornecer informações adicionais sobre elementos HTML quando o usuário passa o mouse sobre eles. Essas informações podem ser úteis para fornecer dicas, descrições ou, como mencionado no contexto do curso, mensagens de erro personalizadas. No entanto, o atributo "title" é mais frequentemente associado a campos de entrada do tipo "text" e "password".

É importante destacar que a exibição do texto do atributo "title" ao passar o mouse sobre um elemento HTML pode depender das configurações e do comportamento do navegador. Alguns navegadores mostram o texto do atributo "title" em um pequeno balão de dica, enquanto outros podem optar por não exibir esse texto.

No seu caso, você mencionou que está tentando utilizar o atributo "title" em campos de entrada do tipo "text" e "email" no Google Chrome, mas as informações do atributo "title" não estão aparecendo. Isso pode ocorrer por várias razões:

  1. Compatibilidade do navegador: A exibição do atributo "title" pode variar de navegador para navegador. Alguns navegadores podem não exibir o texto do atributo "title" da mesma forma que outros. Portanto, é importante ter em mente que o comportamento do Chrome pode ser diferente em relação a outros navegadores.

  2. Configurações do navegador: Os usuários podem personalizar as configurações de exibição das dicas de ferramentas (tooltips) nos navegadores. Eles podem optar por desativar a exibição de dicas de ferramentas, o que fará com que o texto do atributo "title" não seja exibido.

  3. Estrutura do código HTML: Verifique se o atributo "title" está definido corretamente no código HTML dos campos de entrada "text" e "email". Certifique-se de que ele esteja associado aos elementos apropriados. Aqui está um exemplo de como você pode definir o atributo "title" em um campo de entrada:

<input type="text" title="Mensagem de erro personalizada">
  1. JavaScript personalizado: Se você estiver usando JavaScript personalizado para manipular a exibição das mensagens de erro, pode ser que o código JavaScript esteja interferindo na exibição das mensagens do atributo "title". Verifique se não há conflitos ou sobreposições com o código JavaScript.

Para garantir que o atributo "title" funcione como esperado, você pode realizar as seguintes ações:

  • Certifique-se de que o atributo "title" está definido corretamente nos elementos HTML.
  • Verifique as configurações do navegador para garantir que a exibição das dicas de ferramentas (tooltips) esteja habilitada.
  • Considere testar em diferentes navegadores para verificar se o comportamento é consistente em todos eles.

O uso do atributo "title" é uma abordagem simples para fornecer informações adicionais aos usuários. No entanto, se você deseja exibir mensagens de erro personalizadas de forma mais robusta e consistente, pode ser uma boa ideia explorar outras opções, como a manipulação de mensagens de erro por meio de JavaScript e CSS.

Esse curso recebeu uma atualização, você pode acessar o curso atualizado aqui.

Um abraço e bons estudos.