Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Comportamento de clique no addon igual ao de label

Olá pessoal,

Como vocês fariam para adicionar ao addon o comportamento de "clicar e redirecionar" para o campo de input (igual ao label, onde basta colocar o for="contato-email")?

<div class="form-group">
    <label for="contato-email">Email:</label>
    <div class="input-group">
        <div class="input-group-addon">@</div>
        <input class="form-control" type="email" id="contato-email" placeholder="Seu email">
    </div>
</div>

Obrigado!

4 respostas

Arthur, clicar com addon e ir para outra página, é isso? Já tentou em vez de usar a tag div, usar a tag a ?

Não, na verdade me refiro ao comportamento de que quando clicamos na label, o foco vai pro input referente a ele, pronto pra ser digitado (clicamos em "Email:" e o cursor vai pro input do email, podendo digitar).

Sei que é um detalhe bem besta, aprendi também como fazer isso no curso de HTML e CSS II (usando um background no label e movendo ele pro lado do input), mas queria saber se era possível fazer isso usando algum recurso do bootstrap mesmo.

solução!

Entendi, então você precisa usar javascript para isso. Eu não lembro se o bootstrap tem algo nessa alinha, na verdade eu acredito que não, o addon é mais um detalhe visual, acho que ele não foi pensado com esse Q de acessibilidade.

Mas, acho sim que você pode usar a tag label em vez div e deve funcionar normalmente. Já testou?

Fiz exatamente o que vc falou e acrescentei o for="contato-email" no addon, funcionou perfeitamente! Ainda me falta um pouco da percepção de que o bootstrap é flexível e podemos mudar algumas tags. Obrigado Wanderson!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software