Entrar Ainda não tem acesso?
2
respostas

form label e margin (duvida)

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

por Douglas Buss Figueiredo
| 99.1k xp | 75 posts

Olá Pessoal.

<label>Nome e Sobrenome<input type="text" name="Nome e Sobrenome" required></label>
label for="nomeesobrenome" >Nome e Sobrenome</label>
                <input type="text" id="nomesobrenome" required>

entao pessoal, a forma de cima, com o input dentro do label, seria uma forma correta de usar tbm? particulamente achei ela mais objetiva e mais facil de gravar, porem quando eu ponho o margin de 10px no css, nao acontece nenhuma alteração na pagina... somente quando eu altero pra outra forma, que da certo, input fora do label

form label  {

    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}
2 respostas
por Douglas Buss Figueiredo
| 99.1k xp | 75 posts

*corrigindo

<label for="nomeesobrenome" >Nome e Sobrenome</label>
                <input type="text" id="nomesobrenome" required>
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Douglas. Como vai?

Interessante sua dúvida, admito que nunca tinha testado o input dentro da label, mas fiz uma pesquisa e achei esse tópico no stackoverflow que trata desse assunto. Vi que é correto também utilizar o input dentro da label, a pessoa que respondeu o tópico lá também passa a documentação do HTML 5, conferi no link e realmente informa que é permitido, além de utilizar exemplos.

Eu testei utilizar margin no input e na label e consegui normalmente. A única coisa que testei e não consegui foi criar um border apenas no label, sem abranger o input juntos. 

    <form class="form__" action="."></form>
    <label class="label__nome">Nome e Sobrenome<input class="form__input" type="text" name="Nome e Sobrenome"
            required></label>
    </form>
.label__nome {
    font-size: 20px;
        margin-left: 20px
}

.form__input {
    border: 4px solid black;
    margin-left: 20px
}

Consegui ajudar em sua dúvida? Fico aguardando seu retorno! :)