Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Estilização do Forms

Referente ao curso Django: autenticação de formulários e alerta

por JOÃO VICTOR AMANCIO
| 34.9k xp | 4 posts

Como adicionar mais de uma classe no forms, exemplo: class: form-control e col-md-2 (Bootstrap)

class CadastroForms(forms.Form):
    nome_cadastro=forms.CharField(
        label='Nome de Cadastro', 
        required=True, 
        max_length=100,
        widget=forms.TextInput(
            attrs={
                'class': 'form-control',
                'placeholder': 'Ex.: João Silva',
            }
        )
    )

Para que cada elemento do meu forms ter um estilo diferente, assim otimizar a página html do formulário. Poderiam me ajudar com essa questão?

2 respostas
por Renan Lima
| 3653.4k xp | 7699 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, João!

Para adicionar mais de uma classe no seu formulário Django, você pode tentar separar as classes por um espaço dentro da string. No seu caso, você gostaria de adicionar a classe 'col-md-2' do Bootstrap, além da 'form-control'. Você pode fazer isso da seguinte maneira:

class CadastroForms(forms.Form):
    nome_cadastro=forms.CharField(
        label='Nome de Cadastro', 
        required=True, 
        max_length=100,
        widget=forms.TextInput(
            attrs={
                'class': 'form-control col-md-2',
                'placeholder': 'Ex.: João Silva',
            }
        )
    )

Nesse exemplo, 'form-control' e 'col-md-2' são ambas classes aplicadas ao seu campo de formulário. Você pode adicionar quantas classes quiser, apenas separe-as por um espaço.

Espero ter entendido e conseguido ajudar, qualquer coisa manda aqui de novo. Bons estudos!

por JOÃO VICTOR AMANCIO
| 34.9k xp | 4 posts

Coloquei dessa forma, com o intúito de gerar uma largura para o campo do forms, porém não alterou. Supondo que eu tenho diferentes tamanhos de campos do forms, de qual maneira mais eficiênte eu posso passar esses parâmetros de largura para cada campo sem ter que colocar, por exemplo, nas div's que separam cada elemento?