PROBLEMA COM O FIELDSET | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Nathan Oliveira Pagotto

| 22.3k xp | 11 posts

Não sei se é apenas no meu mas reparei que as opções do site entre email, telefone ou whatsapp estão agindo de formas diferentes (e eu não faço ideia o poeque disso... A opção do email fica normal, mas do telefone e whatsapp dá para selecionar mesmo estando fora dai caixinha ou do texto, porém eu não consigui identificar diferença no código entre as opções o que me deixou mais bugado ainda... É apenas um detalhe mas ficarei feliz quando souber o motivo disso :) Segue o código:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contato - Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="caixa">
            <h1><img src="logo.png" alt="Logo da Barbearia Alura"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <form>
            <label for="nomeesobrenome">Nome e sobrenome</label>
            <input type="text" id="nomeesobrenome" class="input-padrao" required placeholder="Insira o seu nome">

            <label for="email">Email</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">Email</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="whatsapp"
                        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">
        </form>
    </main>

    <footer>
        <img src="logo-branco.png" alt="Logo da Barbeairia Alura">
        <p class="Copyright">&copy; Copyright Barbearia Alura - 2021</p>
    </footer>
</body>

</html>

Vou postar o código css logo abaixo pois nao coube em 5000 caracteres.

3 respostas

por Nathan Oliveira Pagotto

| 22.3k xp | 11 posts

25/10/2021

CSS:

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;

}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: chartreuse;
}

.produtos li:hover h2 {
    font-size: 35px;
    font-weight: bold;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricão {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
    color: rgb(255, 255, 255);
}

.copyright {
    color: rgb(255, 255, 255);
    font-size: 13px;
    margin: 20px;
}

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

form {
    margin: 40px 0
}

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

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

.checkbox {
    margin: 20px 0;
}

solução!

por Beatriz Moura

| 770.5k xp | 1156 posts

Alura Scuba Team Instrutora e Desenvolvedora de Software I

26/10/2021

Olá Nathan, tudo bem?

Ótima percepção que você teve, parabéns!

Esse comportamento de conseguir selecionar fora do botão e do texto, é o que estamos esperando que aconteça, visto que essa localização fora é a <label> em sí.

O que está causando a alteração, é que o id do <input> do email está escrito de uma forma e o for da <label> está escrita de uma outra forma. Veja:

Na <label> está for="radio=email" e no <input> está id="radio-email". Dessa forma, com o uso do = em um e o uso do - em outro, ocorreu uma falha na conexão entre a <label> e o <input>, gerando a alteração que você comentou.

Modificando, o código ficará assim:

<label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Nathan Oliveira Pagotto

| 22.3k xp | 11 posts

27/10/2021

Obg Beatriz, eu já suspeitava que era esse tipo de erro, erro de sintaxe que fala né? Vou ficar mias atento!