Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Acrescentar <form> sem perder a formatação do css

por AnonymousJFO
| 136.1k xp | 2 posts
Mecânico de Manutenção

Olá, estou tentando acrescentar a tag form a uma div, porém sempre resulta na quebra dos estilos do css. Gostaria de saber como criar o formulário sem perder a formatação.

<body>
    <div class="main-login">
        <div class="left-login">
            <h1>Faça login<br>E entre para o nosso time</h1>
            <img src="foguete.svg" class="left-login-image" alt="foguete">
        </div>
        <div class="right-login">
            <div action class="card-login">
                <h1 strong>LOGIN</h1>
                <form>
                <div class="textField">
                    <label for="usuario">Usuário</label>
                    <input type="text" name="usuario" placeholder="Usuário">
                </div>
                <div class="textField">
                    <label for="senha">Senha</label>
                    <input type="password" name="senha" placeholder="Senha">
                </div>
                <button type="submit" class="btn-login">Login</button>
                <a name="recovery-btn" href="site.com/">Esqueci minha senha</a>
            </div>
        </div>
    </div>
</body>

styles.css:

body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
}

body * {
    box-sizing: border-box;
}

.main-login{
    width: 100vw;
    height: 100vh;
    background: #201b2c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-login{
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.left-login > h1 {
    font-size: 3vw;
    color: #A866D4;
}

.left-login-image{
    width: 35vw;
}
.right-login{
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-login{
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 35px;
    background: #2f2841;
    border-radius: 20px;
    box-shadow: 0px 10px 40px #00000091;
}

.card-login > h1{
    color: #9847CE;
    font-weight: 800;
    margin: 0;
}

Site Após acrescentar a tag form na div

1 resposta
solução!
por Pedro Moreira Camaforte
| 45.8k xp | 2 posts
Desenvolvedor Web

Fala Leonardo!

Notei que no exemplo que você passou, você não está fechando a tag "form". Então, a primeira coisa a se fazer é fechar ela. Você pode fechá-la, por exemplo, após o botão de Login, ou após o link de recuperação de senha.

Notei também que você deixou o atributo action dentro da div card-login. Lembre-se que apenas forms podem receber esse atributo.

Agora, sobre seu problema com alinhamento, é bem simples. Quando você adiciona a tag form entre a div card-login e os campos e botões, você está retirando os efeitos de alinhamentos que são aplicados pela classe card-login, uma vez que os alinhamentos usando o display flex são aplicados apenas para os primeiros filhos diretos de uma div. Para solucionar isso, você pode tentar adicionar uma nova classe ao form, e então alinhar os campos a partir dela.

Exemplo:

HTML:

<div class="card-login">
    <h1 strong>LOGIN</h1>
    <form class="login-form">
        <div class="textField">
            <label for="usuario">Usuário</label>
            <input type="text" name="usuario" placeholder="Usuário">
        </div>
        <div class="textField">
            <label for="senha">Senha</label>
            <input type="password" name="senha" placeholder="Senha">
        </div>
        <button type="submit" class="btn-login">Login</button>
        <a name="recovery-btn" class="forgot-password" href="site.com/">Esqueci minha senha</a>
    </form>
</div>

CSS:

.login-form {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.btn-login {
    align-self: stretch;
}

.forgot-password {
    text-align: center;
}

.textField {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

O que estamos fazendo, é dizendo para nosso form que queremos esticá-lo para ocupar todo o espaço disponível na div card-login. De igual modo, vamos esticar também nossas divs textField, nosso btn-login, e vamos alinhar o link de "esqueci mina senha" ao centro.

Espero ter ajudado :)