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

Tem como dividir o formulario em dois blocos?

Gostaria de saber se tem como dividir o formulario, tipo: nome, telefone e email do lado esquerdo e cep, cidade, estado, endereço, numero do lado direito ao inves de deixar um embaixo do outro tentei dividir eles em fildset dentro do form e alterar a posição no css com o { position: absolut } mas não me pareceu a maneira correta.

<body>

    <main>
        <form >
            <fieldset class="dados-pessoal">
                <label for="nomesobrenome">Nome e Sobrenme </label>
                <input type="text" id="nomesobrenome" class="input-padrao" required>

                <label for="email">Email</label>
                <input type="email" id="email" class="input-padrao" required placeholder="exemplo@email.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 class="input-padrao" id="mensagem"></textarea  required>            </textarea>
            </fieldset>

            <fieldset class="dados-enderoco">
                <label for="endereco">Enderoço</label>
                <input type="text" id="endereco" class="input-padrao" required>

                <label for="numero">Numero</label>
                <input type="text" id="numero" class="input-nao-padrao" required>

                <label for="cidade">Cidade</label>
                <input type="text" id="cidade" class="input-padrao" required>

                <label for="estado">Estado</label>
                <input type="text" id="estado" class="input-nao-padrao" required>

                <label for="cep">CEP</label>
                <input type="text" id="cep" class="input-padrao" required>
            </fieldset>

            <fieldset class="estilo">
                <legend>Como entrar em contato?</legend>
                <label class="checkbox" for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

                <label class="checkbox" for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>

                <label class="checkbox" for="zap-radio"><input checked type="radio" name="contato" value="whatsapp" id="zap-radio">WhatsApp</label>
            </fieldset>

            <fieldset class="estilo">
                <legend>Escolha seu tingimento</legend>
                <select>
                    <option>Eucalipto</option>
                    <option>Cebola</option>
                    <option>Goiaba</option>
                </select>
            </fieldset>
            <fieldset>
                <legend class="tamanho">Escolha seu tamanho</legend>
                <select>
                    <option>Kids</option>
                    <option>PP</option>
                    <option>P</option>
                    <option>M</option>
                    <option>G</option>
                    <option>GG</option>
                </select>
            </fieldset>
            <label><input checked class="checkbox" type="checkbox"> Gostaria de resceber novidades por email?</label>

            <input type="submit" value="Enviar formualrio" class="enviar">

        </form>
    </main>        

</body>
</html>
main{
    width: 940px;
    margin: 1em auto;

}    
form{
    margin: 0 0 0 0;

}
form label, form legend{
    display: block;
    font-size: 1.5em;
    margin: 0 0 0.5em;
}
.input-padrao{
    display: block;
    margin: 0 0 2em;
    padding: 1.5em 2em;
    width: 30%;
}

.input-nao-padrao{
    display: block;
    margin: 0 0 2em;
    padding: 1.5em 2em;
    width: 10%;
}

.checkbox{
    margin: 2em 0;
}

.enviar{
    width: 35%;
    padding: 1.5em 0 ;
    background: grey;
    color: white;
    border: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    transition: 3s background all;
}

.enviar:hover{
    background: darkgray;
    transform: scale(1.2);
}
.dados-enderoco{
    display: block;
    position: absolute;
     right: 32em;
     top: 1em;
    width: 16em;

}
3 respostas
solução!

Olá, Guilherme. Como vai?

Separar o form utilizando fieldset está correto sim! :)

Sobre separar os campos utilizando position: absolute, a forma que você fez não está errada, porém se você testar colocar algum item acima do formulário, este ítem ficará sobreposto por ele por causa do absolute. Você pode conferir sobre diferentes tipos de positions nesse vídeo bem legal aqui. Ele foi feito por uma colega de equipe aqui da Alura.

Uma outra maneira é tirar o position: absolute, e atribuir à classe .dados-pessoal a tag float: left;, assim os dois blocos do form ficam lado a lado, e você poderá inserir conteúdo acima e abaixo deles sem impedimento.

Ah uma dica, para ficar com uma estilização legal, você também pode aplicar um box-shadow nos inputs, vê se esse fica legal pra você: box-shadow: 2px 2px 2px rgba(0,0,0,0.2);

Consegui ajudar em sua dúvida? Fico aguardando seu retorno! =D

Muito obrigado Luan, eu pensei em usar o float tb, mas achei q era apenas pra imagens. e brigado pela dica

De nada, Guilherme!

Não, o float pode ser usado para alterar a posição de formulários, imagens, parágrafos, inclusive esta tag serve muito bem para colocar uma imagem e texto lado a lado.

Surgindo mais dúvidas, pode contar com a gente! =D