3
respostas

Para os perfeccionistas (campos senha lado a lado)

Os perfeccionistas de plantão devem ter percebido que o tutor abriu mão da combinação das classes col-12 col-lg-6 que inicialmente havia nas divs que envolvem os campos de senha (senha1 e senha2). Esta combinação faz com que, em resoluções maiores, as divs que envolvem os estes campos (e consequentemente, os próprios campos) não tomem toda a largura de seu container, mas sim, metade. Ficando lado a lado.

Esta maneira de apresentar os campos de senha me pareceu muito mais bonita esteticamente, e fui atrás de um modo de implementá-la, mesmo com a utilização dos forms do Django.

Primeiro, na minha view de cadastro, criei uma lista chamada "passfields" com os campos que desejo que tenham este comportamento (neste caso, apenas "senha1" e "senha2"). Em seguida, passei esta lista no contexto do método render:

def cadastro(request):
    form = CadastroForm()
    passfields = ['senha1', 'senha2']
    return render(request, 'usuarios/cadastro.html', {"form": form, "passfields": passfields})

Pra finalizar, no meu template da página de cadastro (cadastro.html), dentro do atributo de classes da div que envolve o campo, fiz um condicional para saber se o field.name (nome do campo) que está sendo iterado está em (in) "passfields". Caso esteja (ou seja, caso senham os campos senha1 ou senha2), imprimo "col-lg-6", do contrário, imprimo "col-lg-12". Tudo isso na sequencia do "col-12" que está presente em todas as divs do form.

Assim ficou meu form de cadastro, no final das contas:

<form action="" method="">
    {% csrf_token %}
    <div class="row">
        {% for field in form.visible_fields %}
        <div class="col-12 {% if field.name in passfields %}col-lg-6{% else %}col-lg-12{% endif %}" style="margin-bottom: 10px;">
            <label for="{{field.id_for_label}}" style="color:#D9D9D9; margin-bottom: 5px;"><strong>{{field.label}}</strong></label>
            {{field}}
        </div>
        {% endfor %}
    </div>
    <div>
        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Criar sua conta</button>
    </div>
</form>

E obtive o resultado esperado :)

Caso algum dos colegas ou tutores saibam de uma abordagem mais simples que eu poderia ter utilizado, agradeço se puderem compartilhar!

3 respostas

Olá, José! Tudo bem?

Primeiramente, parabéns pela sua iniciativa! Sua solução para apresentar os campos de senha lado a lado é muito inteligente e eficaz. Você conseguiu entender bem a lógica das classes do Bootstrap e aplicá-las de forma criativa no seu código.

A abordagem que você utilizou é bastante válida e não vejo problemas nela. No entanto, se você quiser simplificar um pouco mais, poderia criar uma lista diretamente no template, sem a necessidade de passá-la no contexto da view. Assim, você poderia fazer algo como:

<form action="" method="">
    {% csrf_token %}
    <div class="row">
        {% for field in form.visible_fields %}
        <div class="col-12 {% if field.name in ['senha1', 'senha2'] %}col-lg-6{% else %}col-lg-12{% endif %}" style="margin-bottom: 10px;">
            <label for="{{field.id_for_label}}" style="color:#D9D9D9; margin-bottom: 5px;"><strong>{{field.label}}</strong></label>
            {{field}}
        </div>
        {% endfor %}
    </div>
    <div>
        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Criar sua conta</button>
    </div>
</form>

Dessa forma, você está criando a lista ['senha1', 'senha2'] diretamente no template, sem a necessidade de passá-la através do contexto da view.

Mas, novamente, a maneira como você fez também é perfeitamente válida e talvez até mais flexível, pois permite que você defina quais campos devem ter esse comportamento diretamente na view, o que pode ser útil em situações mais complexas.

Espero ter ajudado e bons estudos!

Bom dia, Matheus! Muito obrigado pela interação e contribuição. Um excelente dia pra você, amigo!

Oi, José e Matheus!

Quando eu passo a lista ['password1', 'password2'] no html, recebo

"TemplateSyntaxError at /cadastro Could not parse the remainder: '['password1',' from '['password1','."

Dando uma pesquisada, encontrei que não precisa fazer tag de lista num template. Dessa forma, temos:

{% for field in form.visible_fields %}
{% if field.name not in 'password1, password2' %}
<div class="col-12 col-lg-12" style="margin-bottom: 10px;">
    <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">
        {{ field.label }}
    </label>
    {{ field }}
</div>
{% else %}
<div class="col-12 col-lg-6" style="margin-bottom: 10px;">
    <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">
        {{ field.label }}
    </label>
    {{ field }}
</div>
{% endif %}
{% endfor %}

Abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software