Django - отображать пользовательские поля формы в шаблоне HTML

Question

Я немного новичок в Django, и у меня возникают некоторые проблемы с использованием некоторых пользовательских форм.

Я использую приобретенную тему Bootstrap, которая отличается от стандартных классов, поставляемых с Bootstrap имеет свои собственные классы и, конечно, некоторые пользовательские CSS. Мне очень трудно, как Django имеет дело с пользовательскими формами, и все источники / информация / примеры, найденные в Интернете, не имеют смысла для меня.

Итак, мои элементы из моего HTML шаблона используют следующие классы:

<form action="#" method="post" class="card shadow-soft border p-4 mb-4">
    <div class="form-group">
        <label for="video">Video url</label>
        <input type="text" value="https://video.com/" class="form-control shadow-soft" id="video"
            placeholder="Video url" required>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
                type="submit">Update</button>
        </div>
    </div>
</form>

В forms.py Я добавил следующее:

class UpdateURLForm(forms.Form):
    VideoURL = forms.CharField(
        widget=forms.TextInput(
            attrs={
                'class': 'form-group'
            }
        )
    )

    class Meta:
        model = Listing
        fields = ('VideoURL')

В views.py Я импортировал форму и добавлено в представление:

from .forms import UpdateURLForm

def updateInfo(request):
    if request.method == 'POST':
        form = UpdateURLForm(request.POST)
        if form.is_valid():
            pass
        else:
            form = UpdateURLForm()
    return render(request, 'myapp/editinfo.html', {'form': form})

Теперь в моем шаблоне HTML я хочу отобразить поле формы, которое должно наследовать пользовательские стили CSS, но почему-то я что-то упустил, потому что поле отображается так, как я использовал Crispy forms.

<form action="#" method='post' class="card shadow-soft border p-4 mb-4">{% csrf_token %}
    <div class="form-group">
        <label for="video">Video URL</label>
        <input type="text" value="{{form}}" class="form-control shadow-soft" id="video"
            placeholder="{{object.VideoURL}}" required> # the placeholder comes from my class based view
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
                type="submit">Update</button>
        </div>
    </div>
</form>

Что мне делать, если мне нужно, чтобы дополнительные поля из пользовательской формы отображались с использованием моих пользовательских CSS классов?

Любое предложение будет высоко оценено. Спасибо!

Answer 1

Вы можете использовать Настройки виджетов для достижения того, что вы хотите. Это позволит вам использовать ваши собственные стили:

Вы можете получить Django Настройки виджетов, используя pip:

$ pip install django-widget-tweaks

Чтобы включить widget_tweaks в вашем проекте, вам необходимо добавить его в INSTALLED_APPS в файле вашего проекта settings.py:

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

Учитывая пример кода, когда вы визуализируете поле формы в шаблоне HTML, сделайте что-то вроде:

1. сначала вам нужно загрузить в начало HTML файл (аналогично тому, как вы загружаете static):

   {% load widget_tweaks %}

2. Затем вы можете добавить ваш пользовательский класс, как это:

                   <div class="form-group">
                       <label for="video">Video URL</label>
                       {{form.VideoURL|add_class:"form-control shadow-soft"}}
                   </div>