Как применить стиль к форме Django? - PullRequest
Новая
       8

Как применить стиль к форме Django?

0 голосов
/ 30 апреля 2018

Можно ли изменить стиль формы в представлении?

Я нашел в документации этот код: 

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
    <div class="fieldWrapper">
        {{ form.message.errors }}
        <label for="id_message">Your message:</label>
        {{ form.message }}
    </div>
    <div class="fieldWrapper">
        {{ form.sender.errors }}
        <label for="id_sender">Your email address:</label>
        {{ form.sender }}
    </div>
    <div class="fieldWrapper">
        {{ form.cc_myself.errors }}
        <label for="id_cc_myself">CC yourself?</label>
       {{ form.cc_myself }}
    </div>
    <p><input type="submit" value="Send message" /></p>
</form>

Но это просто уродливый ввод. Я хочу применить класс или CSS в этом входе. Возможно ли это?

Это моя форма: 

class LoginView(NextUrlMixin, RequestFormAttachMixin, FormView):
    form_class = LoginForm
    success_url = '/'
    template_name = 'accounts/login.html'
    default_next = '/'


class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

Ответы [ 4 ]

0 голосов
/ 30 апреля 2018

Используйте Django widget_tweaks. Это действительно удобно. И вы можете легко изменить любой атрибут, который вы хотите. 

{% load widget_tweaks %}

{% render_field form.field class=“your-class” %}
0 голосов
/ 30 апреля 2018

Если вы используете пользовательский CSS, установите класс CSS на примере форм: 

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'customClass', 'required':'required'})

в этом случае установите customClass, если вы используете Bootstrap, возможно, вы можете использовать кого-то вроде этого: 

email    = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'form-control', 'required':'required'})

этот код на вашем forms.pyp .. удачи не забудьте загрузить свой CSS-файл в шаблон

0 голосов
/ 30 апреля 2018

Да. Вы можете прикрепить файл css к вашей форме (поместите {{ form.media }} в ваш шаблон) с помощью этого: 

class LoginForm(forms.Form):
    email    = forms.EmailField(label='Email')
    password = forms.CharField(widget=forms.PasswordInput)

    class Media:
        css = {
            'all': ('login-form-layout.css',)
        }
        js = (
            'https://some-cdn.com/some-framework.js'
            'login-form-script.js', 
        )

Входы имеют идентификатор типа id_fiedname, поэтому login-form-layout.css может быть примерно таким: 

#id_email, #id_password {
    width: 200px;
}

Вы можете многое сделать с помощью CSS, а с javascript существуют безграничные возможности.

Возможно, вы захотите проверить «Настройка экземпляров виджетов» в официальной документации Django. Например, вы можете прикрепить произвольные атрибуты к входному тегу, используя аргумент attrs: 

email = forms.EmailField(
    label='Email',  
    widget=forms.TextInput(attrs{
        'class': 'my-super-special-input', 
        'placeholder': "mailbox@example.com"
    }),
)

Есть и другие возможности, так что проверьте это.

0 голосов
/ 30 апреля 2018

Вы можете сделать это, применив некоторые атрибуты к используемому виджету: Более подробную информацию можно найти здесь Официальная документация Django

например: 

email    = forms.EmailField(label='Email',
    widget=forms.TextInput(attrs={'class':'class_value','placeholder':"Email here"}))

Если вы хотите иметь полный контроль над form html, сохраняя то же поведение, что и сгенерированный django, будет работать следующее 

<input type="email" name="email" id="id_email" value="{{form.email.value}}" class='class_name' attrs='attrs' >

{{ form.email.errors}}  <!-- track errors for this field -->
...