Entnommen aus meiner Antwort auf:
So markieren Sie Formularfelder mit <div class = 'field_type'> in Django
class MyForm(forms.Form):
myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))
oder
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})
oder
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}
--- BEARBEITEN ---
Das Obige ist die einfachste Änderung am Code der ursprünglichen Frage, die das erfüllt, was gefragt wurde. Es hält Sie auch davon ab, sich zu wiederholen, wenn Sie das Formular an anderen Stellen wiederverwenden. Ihre Klassen oder andere Attribute funktionieren nur, wenn Sie die Formularmethoden as_table / as_ul / as_p des Django verwenden. Wenn Sie die vollständige Kontrolle für ein vollständig benutzerdefiniertes Rendering benötigen, ist dies klar dokumentiert
- EDIT 2 --- Es wurde
eine neuere Methode zum Angeben von Widgets und Attributen für eine ModelForm hinzugefügt.
id
. Zweitens ist es normalerweise die Verantwortung der Vorlagenseite, dies genau zu tun, insbesondere, wenn Sie über Frontend-Methoden (js, css) auf diese Klasse zugreifen. Ich habe nicht gesagt, dass deine Antwort falsch ist. Meiner Meinung nach ist es nur eine schlechte Praxis (insbesondere wenn Sie in einem Team mit Frontend- und Backend-Entwicklern arbeiten).Dies kann mithilfe eines benutzerdefinierten Vorlagenfilters erfolgen. Rendern Sie Ihr Formular folgendermaßen:
form.subject
ist eine Instanz, vonBoundField
der dieas_widget()
Methode hat.Sie können einen benutzerdefinierten Filter
addclass
in my_app / templatetags / myfilters.py erstellen :Und dann wenden Sie Ihren Filter an:
form.subjects
wird dann mit derMyClass
CSS-Klasse gerendert .quelle
{{ form.subject|addclass:'myclass1 myclass2' }}
Wenn Sie dem Formular keinen Code hinzufügen möchten (wie in den Kommentaren zu @ shadfcs Antwort erwähnt), ist dies sicherlich möglich. Hier sind zwei Optionen.
Erstens verweisen Sie nur die Felder einzeln im HTML, anstatt das gesamte Formular auf einmal:
(Beachten Sie, dass ich es auch in eine unsortierte Liste geändert habe .)
Zweitens beachten Sie in den Dokumenten zur Ausgabe von Formularen als HTML , Django:
Alle Ihre Formularfelder haben bereits eine eindeutige ID . So würden Sie verweisen id_subject in Ihrem CSS - Datei Stil das Thema Feld. Ich sollte beachten, dass sich das Formular so verhält, wenn Sie den Standard- HTML-Code verwenden, für den nur das Formular gedruckt werden muss, nicht die einzelnen Felder:
Weitere Optionen für die Ausgabe von Formularen finden Sie im vorherigen Link (Sie können Tabellen usw. erstellen).
Hinweis - Mir ist klar, dass dies nicht mit dem Hinzufügen einer Klasse zu jedem Element identisch ist (wenn Sie dem Formular ein Feld hinzugefügt haben, müssen Sie auch das CSS aktualisieren). Es ist jedoch einfach genug, alle Felder anhand der ID zu referenzieren in Ihrem CSS wie folgt:
quelle
Gemäß diesem Blog-Beitrag können Sie Ihren Feldern mithilfe eines benutzerdefinierten Vorlagenfilters CSS-Klassen hinzufügen.
quelle
Sie können dies tun:
Hoffe das funktioniert.
Ignas
quelle
Sie können diese Bibliothek verwenden: https://pypi.python.org/pypi/django-widget-tweaks
Damit können Sie Folgendes tun:
quelle
render_field
.Du kannst tun:
Dann können Sie beispielsweise dem
<td>
Tag Klassen / IDs hinzufügen . Sie können natürlich auch beliebige andere Tags verwenden. Aktivieren Sie als Beispiel die Option Mit Django-Formularen arbeiten, was für jedesfield
Formular verfügbar ist ({{field}}
z. B. wird nur das Eingabe-Tag ausgegeben, nicht das Etikett usw.).quelle
Eine Lösung besteht darin, JavaScript zu verwenden, um die erforderlichen CSS-Klassen hinzuzufügen, nachdem die Seite fertig ist. Beispiel: Stylen der Ausgabe von Django-Formularen mit Bootstrap-Klassen (der Kürze halber wird jQuery verwendet):
Dies vermeidet die Hässlichkeit, Styling-Details mit Ihrer Geschäftslogik zu mischen.
quelle
Schreiben Sie Ihr Formular wie folgt:
Führen Sie in Ihrem HTML-Feld Folgendes aus:
Dann schreiben Sie in Ihr CSS etwas wie:
Hoffe, diese Antwort ist einen Versuch wert! Beachten Sie, dass Sie Ihre Ansichten geschrieben haben müssen, um die HTML-Datei zu rendern, die das Formular enthält.
quelle
Möglicherweise müssen Sie Ihre Formularklasse nicht überschreiben
__init__
, da Django Sätzename
undid
Attribute in den HTML- Codes festlegtinput
. Sie können CSS wie folgt haben:quelle
id
von Django für Formsets erstellte Feld ziemlich haarig wird…Ich habe diesen nicht wirklich gesehen ...
https://docs.djangoproject.com/de/1.8/ref/forms/api/#more-granular-output
Granularere Ausgabe
Die Methoden as_p (), as_ul () und as_table () sind lediglich Verknüpfungen für faule Entwickler - sie sind nicht die einzige Möglichkeit, ein Formularobjekt anzuzeigen.
Klasse BoundField Wird verwendet, um HTML- oder Zugriffsattribute für ein einzelnes Feld einer Formularinstanz anzuzeigen.
Die Methode str () ( Unicode in Python 2) dieses Objekts zeigt den HTML-Code für dieses Feld an.
Verwenden Sie zum Abrufen eines einzelnen BoundField die Syntax für die Wörterbuchsuche in Ihrem Formular, wobei Sie den Feldnamen als Schlüssel verwenden:
Um alle BoundField-Objekte abzurufen, wiederholen Sie das Formular:
Die feldspezifische Ausgabe berücksichtigt die auto_id-Einstellung des Formularobjekts:
quelle
Es gibt ein sehr einfach zu installierendes und großartiges Tool für Django, das ich für das Styling verwende. Es kann für jedes Frontend-Framework wie Bootstrap, Materialise, Foundation usw. verwendet werden. Es heißt Widget-Tweaks. Dokumentation: Widget-Tweaks
aus Django-Importformularen
Anstatt Standard zu verwenden:
Sie können es auf Ihre eigene Weise bearbeiten, indem Sie das Attribut render_field verwenden, mit dem Sie es wie in diesem Beispiel HTML-ähnlicher gestalten können:
template.html
Diese Bibliothek bietet Ihnen die Möglichkeit, Ihr Frontend gut von Ihrem Backend zu trennen
quelle
In Django 1.10 (möglicherweise auch früher) können Sie dies wie folgt tun.
Modell:
Bilden:
Vorlage:
quelle
Bearbeiten: Eine andere (etwas bessere) Möglichkeit, das zu tun, was ich vorschlage, wird hier beantwortet: Django-Formular-Eingabefeld-Styling
Alle oben genannten Optionen sind fantastisch, ich dachte nur, ich würde diese einwerfen, weil sie anders ist.
Wenn Sie benutzerdefinierte Stile, Klassen usw. für Ihre Formulare wünschen, können Sie in Ihrer Vorlage eine HTML-Eingabe vornehmen, die Ihrem Formularfeld entspricht. Angenommen,
TextInput
Sie möchten für ein CharField (Standard-Widget ist ) eine Texteingabe mit Bootstrap-Aussehen. Sie würden so etwas tun:<input type="text" class="form-control" name="form_field_name_here">
Solange der Name des Formularfelds mit dem HTML-
name
Attribut übereinstimmt (und das Widget wahrscheinlich auch mit dem Eingabetyp übereinstimmen muss), führt Django beim Ausführen vonvalidate
oderform.is_valid()
und dieselben Validatoren für dieses Feld ausDas Stylen anderer Dinge wie Beschriftungen, Fehlermeldungen und Hilfetexte erfordert nicht viel Problemumgehung, da Sie so etwas tun
form.field.error.as_text
und stylen können, wie Sie möchten. Die eigentlichen Felder erfordern ein wenig Fummeln.Ich weiß nicht, ob dies der beste Weg ist oder der Weg, den ich empfehlen würde, aber es ist ein Weg, und es könnte für jemanden richtig sein.
Hier finden Sie eine nützliche Anleitung zum Stylen von Formularen. Sie enthält die meisten Antworten, die in SO aufgeführt sind (z. B. die Verwendung des Attributs für Widgets und Widget-Optimierungen). https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html
quelle
Styling von Widget-Instanzen
Wenn Sie möchten, dass eine Widget-Instanz anders aussieht als eine andere, müssen Sie zusätzliche Attribute angeben, wenn das Widget-Objekt instanziiert und einem Formularfeld zugewiesen wird (und möglicherweise Ihren CSS-Dateien einige Regeln hinzufügen).
https://docs.djangoproject.com/de/2.2/ref/forms/widgets/
Dazu verwenden Sie beim Erstellen des Widgets das Argument Widget.attrs:
Sie können auch ein Widget in der Formulardefinition ändern:
Wenn das Feld nicht direkt im Formular deklariert ist (z. B. Modellformularfelder), können Sie das Attribut Form.fields verwenden:
Django wird dann die zusätzlichen Attribute in die gerenderte Ausgabe aufnehmen:
quelle