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

Consolidando Conhecimentos

HTML

    <main>
        <form>

            <label for="nomeesobrenome">Nome e sobrenome</label>
            <input type="text" id="nomeesobrenome">

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

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 20px;
      width: 50%;
}

teste

3 respostas
solução!

Olá Mariana, você teve algum erro ou problema com o código? caso tenha tido, poderia descrever para que possamos lhe ajudar? Se foi para mostrar o que foi feito, ficou legal, continue assim e bons estudos.

Lembre de encerrar esse tópico!

Boa noite @Mariana, primeiramente parabéns pelo trabalho e continue sempre melhorando, pois o céu é o limite.

Vou compartilhar algumas coisas que acho que poderia ser um maior diferencial para essa sua consolidação, claro se quiser abstrair isso que vou te passar.

Primeiro seu html está bom para inicio, porém eu proponho que você melhore na questão do tipo do seu input, vi que você colocou todos os inputs como "text", como disse para primeiros passos é perfeito, mas te proponho a sempre identificar seus inputs, com o tipo que deseja receber, segue o link da w3schools onde tem uma variedade de inputs que podemos trabalhar dentro do html (a página está em inglês).

Outra coisa, vi que você deu o nome do label e id do seu input no form de "nomeesobrenome", uma boa convenção é sempre usar o camelCase, que consiste em escreve a primeira para começando em minúsculo e quando iniciar outra palavra a primeira letra ficaria com maiúsculo, exemplo: "nomeSobrenome", isso ajuda muito quando você iniciar os estudos em JavaScript ou outra linguagem de programação.

No seu atributo telefone eu dei uma incrementada com o tipo "tel" e um pattern para receber os dados mais próximo da realidade, isso é o uso de regEx (regular expressions), em um futuro breve se optar pelas linguagens de programação vai ver muito isso, não se assuste que o monstro nem é assim tão grande.

Só para complementar o ddd é obrigatório com o inicio de 0, é tambem permitido receber um espaço para separar o primeiro 9 que é obrigatório, assim como depois do 9 e para dividir os 4 primeiros números e os 4 últimos pode ser usado um espaço ou hífen.

E por último eu troquei o input submit por um button, pois como está usando a identificação submit no css, o mesmo está sendo aplicado para o botão de enviar o que pode fazer ele herdar o estilo que deveria ser somente para os inputs de entrada.

Segue abaixo o código modificado.

html

    <main>
        <form>
            <label for="nomeSobrenome">Nome e sobrenome</label>
            <input type="text" id="nomeSobrenome" placeholder = "Fulado da Silva">

            <label for="email">Email</label>
            <input type="email" placeholder = "email@email.com" id="email">

            <label for="telefone">Telefone</label>
            <input type="tel" 
                    id="telefone" 
                    placeholder = "(011)9 1234 1234"
                    pattern = "\(?[0]{1}[1-9]{2}\)?\s?[9]{1}\s?[0-9]{4}\s-?[0-9]{4}">

            <button type="submit">Enviar formulário</button>

        </form>
    </main>

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 20px;
      width: 50%;
}     
form button {
    padding: 10px 20px;
}

OBSERVAÇÃO

Leve esse meu post como uma orientação positiva, não como uma crítica, Ok? Espero que continue seus estudos e como diria o Buzz "Ao infinito e além"

Caramba, muito obrigada David! amei suas dicas, deixou o código bem melhor assim, vou anotar tudo! :D