Clicar no texto do label nome e sobrenome não abre o campo para digitar | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

9
respostas

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Começando um formulário e atividade Consolidando o seu conhecimento

por Débora Evelinne de Medeiros Souza

| 27.3k xp | 7 posts

Advogada

Quando clico no texto do label "Nome e sobrenome" não acontece nada, diferente de quando clico no texto do label do "Telefone" e "E-mail" que abre o campo pra digitar no input. O que está errado?

    <main>
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome">

                <label for="email">E-mail</label>
                <input type="text" id="email">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone">

                <input type="submit" value="Enviar Formulário">
            </form>
        </main>

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

9 respostas

por Sirlan Da Silva Lobato

| 46.4k xp | 26 posts

07/10/2022

Bom dia Débora

Testei o seu código e estar funcionando na primeira label.

por Débora Evelinne de Medeiros Souza

| 27.3k xp | 7 posts

Advogada

10/10/2022

Que estranho, aqui ainda tá apresentando o mesmo problema, mesmo eu tendo fechado o navegador e abrindo-o, e até reiniciado o computador.

por Sirlan Da Silva Lobato

| 46.4k xp | 26 posts

10/10/2022

Bom dia Débora

Só pra verificar se eu entendi a pergunta, você quer dizer que quando clica na primeira label ela não abre o campo do input para digitar, ou seja, após o click na label, o input não fica piscando, quere dizer aparecendo aquela barrinnha "|". Seria isso ?

por Débora Evelinne de Medeiros Souza

| 27.3k xp | 7 posts

Advogada

11/10/2022

Exatamente isso. O campo de digitação não se torna "digitável" quando eu clico na label nome e sobrenome, diferente das outras labels que quando clicado na palavra começa a piscar a barra de digitação tudo certinho.

por Sirlan Da Silva Lobato

| 46.4k xp | 26 posts

11/10/2022

Caranba, então ta estranho mesmo, testei novamente seu código aqui e ta pegando de boa, pode ser algum bug, mas eu só copie e colei o seu código e pego então não sei o que pode ser.

Vo tentar fazer uma animação no seu código, só pra mostrar que ta pegando aqui aí eu envio o código.

por Sirlan Da Silva Lobato

| 46.4k xp | 26 posts

11/10/2022

<!--HTML-->
<body>

    <main>
        <form>
            <label for="nomesobrenome">Nome e sobrenome</label>
            <input type="text" id="nomesobrenome">

            <label for="email">E-mail</label>
            <input type="text" id="email">

            <label for="telefone">Telefone</label>
            <input type="text" id="telefone">

            <input type="submit" value="Enviar Formulário">
        </form>
    </main>

<script src="function.js"></script>
</body>

/*CSS*/


main {
  width: 940px;
  margin: 0 auto;
}

form {
  margin: 40px 0;
}

form label {
  display: block;
  font-size: 20px;
  margin: 0 0 10px;
}

form input {
  display: block;
  margin: 0 0 20px;
  padding: 10px 25px;
  width: 50%;
  font-size: 50px;
}

// JAVASCRIPT

var label = document.querySelector("label");
var input = document.getElementById("nomesobrenome");
label.addEventListener("click", ()=>{
    input.style.backgroundColor = "aqua";
    input.style.color = "red";
    alert("Débora está funcionando")

});

por Sirlan Da Silva Lobato

| 46.4k xp | 26 posts

11/10/2022

Ta aí Débora usei o seu código mesmo pode comparar que ta igual, a única diferença vai ser na font-size que botei no input pra que vc note a diferença, então o input só vai aumentar de tamanho por causa da fonte, a outra diferença é a animação quando vc clicar na label vai aparecer uma mensagem vc da ok, depois disso a cor do input vai mudar para azual e a barra "|" vai ficar piscando só que agora ela vai ser vermelha assim fica mais perceptível.

Você tem que criar o último arquivo chamado function.js pra que o código pegue, se não conseguir é só mandar mensagem que u te ensino.

Se vc falar que não ta funcionado agora aí não mas, KKK.

por Leticia de Souza Cardoso

| 43.1k xp | 19 posts

11/10/2022

por acaso tem espaço após a aspas em algum dos dois e outro não ?

por Débora Evelinne de Medeiros Souza

| 27.3k xp | 7 posts

Advogada

13/10/2022

Pois é, Sirlan eu não consigo entender pq não está funcionando a função label se tá tudo certinho kkkk Eu testei em outros navegadores (mozilla e edge) mas acontece o mesmo bug. Conferi aqui e não tem espaço após as aspas em canto nenhum, Letícia. O jeito é o usuário do meu código clicar na barra pra digitar mesmo e não na label kkkk

<form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome" class="input-padrao" required>

                <label for="email">E-mail</label>
                <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

                <label for="telefone">Telefone</label>
                <input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">

                <label for="mensagem">Mensagem</label>    
                <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required placeholder="Escreva sua mensagem..."></textarea>

                <fieldset>
                    <legend>Como prefere o nosso contato?</legend>
                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">E-mail</label>    
                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>
                    <label for="radio-whatsapp"><input type="radio" name="contato" value="whastapp" id="radio-whatsapp" checked>WhatsApp</label>
                </fieldset>

                <fieldset>
                    <legend>Qual horário prefere ser atendido?</legend>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

                <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades por e-mail?</label>

                <input type="submit" value="Enviar Formulário" class="enviar">
            </form>