2
respostas

required

*O textarea não ficou como campo obrigatório. *

Nome e sobrenome
                <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 ="72" rows= "10" id="mensagem" class="input-padrao" required></textarea>
                <fieldset>
                    <legend>Como perfere 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 horario 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 email?</label>

                <input type="submit" value="Envia formulário">

            </form>
        </main>

        <footer >
            <img src="logo-branco.png" alt="Logo da Barbearia Alura">
            <p class="copyright"> © Copyright Barbearia alura - 2019</p>

        </footer>

    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;

} nav a:hover{ color: #C78C19; text-decoration: underline; } .produtos{ width: 940px; margin: auto; padding: 50px 0; }

.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: #088C19; }

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

} .produtos li:hover h2{ font-size: 34px;

}

.produto-descricao{ font-size: 18px;

} .preco-produto{ font-size: 22px; font-weight: bold; margin-top: 10px; } footer{ text-align: center; background: url("bg.jpg"); padding: 40px 0; } .copyright{ color:#FFFFFF; } 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; }

2 respostas

Boa tarde Paulo,

Quanto ao seu código ele está correto, porem alguns navegadores não possuem todas as funcionalidades que utilizamos. Mesmo assim utilizamos estás configurações para tentar alcançar o maximo possivel de navegadores compativeis.

Sobre a função required das TAGs HTML segue um link sobre ela na TAG textarea, para você poder ver melhor ao final do link, ele possui uma tabela mostando quais navegadores e suas versções são compativeis com esta utilização.

https://www.w3schools.com/tags/att_textarea_required.asp

Lembre que mesmo não funcionando em um navegador especifico, o mesmo pode ajudar o usuário em outro navegador.

Boa noite Willian, Muitíssimo obrigado! Pelo feedback.