Zaczerpnięte z mojej odpowiedzi do:
Jak oznaczyć pola formularza za pomocą <div class = 'field_type'> w Django
class MyForm(forms.Form):
myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))
lub
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'})
lub
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}
--- EDYTUJ ---
Powyższa zmiana jest najłatwiejszą do wprowadzenia w kodzie oryginalnego pytania, która spełnia to, co zostało zadane. Uniemożliwia to również powtórzenie się w przypadku ponownego użycia formularza w innych miejscach; Twoje klasy lub inne atrybuty działają po prostu, jeśli używasz metod formularza as_table / as_ul / as_p Django. Jeśli potrzebujesz pełnej kontroli nad całkowicie niestandardowym renderowaniem, jest to wyraźnie udokumentowane
- EDYCJA 2 ---
Dodano nowszy sposób określania widżetu i atrybutów dla ModelForm.
id
. Po drugie, zwykle jest to odpowiedzialne za zrobienie tego po stronie szablonu, zwłaszcza jeśli masz zamiar uzyskać dostęp do tej klasy za pomocą metod frontendu (js, css). Nie powiedziałem, że twoja odpowiedź jest błędna. Moim zdaniem to po prostu zła praktyka (szczególnie gdy pracujesz w zespole z programistami frontend i backend).Można to zrobić za pomocą niestandardowego filtru szablonu. Rozważ renderowanie swojego formularza w ten sposób:
form.subject
jest instancją,BoundField
która maas_widget()
metodę.Możesz utworzyć niestandardowy filtr
addclass
w my_app / templatetags / myfilters.py :Następnie zastosuj swój filtr:
form.subjects
zostanie wyrenderowany zMyClass
klasą CSS.źródło
{{ form.subject|addclass:'myclass1 myclass2' }}
Jeśli nie chcesz dodawać żadnego kodu do formularza (jak wspomniano w komentarzach do odpowiedzi @ shadfc), z pewnością jest to możliwe, oto dwie opcje.
Po pierwsze, odwołujesz się do poszczególnych pól w kodzie HTML, a nie do całego formularza na raz:
(Zwróć uwagę, że zmieniłem ją również na listę niesortowaną ).
Po drugie, zwróć uwagę w dokumentach na tworzenie formularzy jako HTML , Django:
Wszystkie pola formularza mają już unikalny identyfikator . Więc możesz odwołać się do id_subject w pliku CSS, aby nadać styl polu tematu . Powinienem zauważyć, że tak zachowuje się formularz, gdy bierzesz domyślny HTML, który wymaga tylko wydrukowania formularza, a nie poszczególnych pól:
Zobacz poprzedni link, aby uzyskać inne opcje podczas tworzenia formularzy (możesz tworzyć tabele itp.).
Uwaga - zdaję sobie sprawę, że to nie to samo, co dodanie klasy do każdego elementu (jeśli dodałeś pole do formularza, musisz również zaktualizować CSS) - ale łatwo jest odwołać się do wszystkich pól według identyfikatora w swoim CSS w ten sposób:
źródło
W tym poście na blogu możesz dodać klasy css do swoich pól, używając niestandardowego filtru szablonu.
źródło
Możesz zrobić tak:
Mam nadzieję, że to zadziała.
Ignas
źródło
Możesz użyć tej biblioteki: https://pypi.python.org/pypi/django-widget-tweaks
Umożliwia wykonanie następujących czynności:
źródło
render_field
.Możesz to zrobić:
Następnie możesz dodać klasy / id na przykład do
<td>
tagu. Możesz oczywiście użyć dowolnych innych tagów. Sprawdź jako przykład Praca z formularzami Django, co jest dostępne dla każdegofield
w formularzu ({{field}}
na przykład wyprowadza tylko znacznik wejściowy, a nie etykietę i tak dalej).źródło
Jednym z rozwiązań jest użycie JavaScript do dodania wymaganych klas CSS po przygotowaniu strony. Na przykład stylizowanie wyjścia formularza django za pomocą klas ładowania początkowego (jQuery używane do zwięzłości):
Pozwala to uniknąć brzydoty mieszania specyfiki stylizacji z logiką biznesową.
źródło
Napisz swój formularz jak:
W swoim polu HTML zrób coś takiego:
Następnie w swoim CSS napisz coś takiego:
Mam nadzieję, że warto spróbować tej odpowiedzi! Zauważ, że musisz napisać swoje widoki, aby renderować plik HTML zawierający formularz.
źródło
Być może nie będziesz musiał nadpisywać swojej klasy formularza
__init__
, ponieważ Django ustawianame
&id
atrybuty w plikach HTMLinput
. Możesz mieć CSS w ten sposób:źródło
id
pole utworzone przez Django dla zestawów formularzy robi się dość owłosione…Tak naprawdę nie widziałem tego ...
https://docs.djangoproject.com/en/1.8/ref/forms/api/#more-granular-output
Bardziej szczegółowe wyniki
Metody as_p (), as_ul () i as_table () to po prostu skróty dla leniwych programistów - nie są one jedynym sposobem wyświetlania obiektu formularza.
class BoundField Służy do wyświetlania HTML lub dostępu do atrybutów dla pojedynczego pola instancji Form.
Metoda str () ( unicode w Pythonie 2) tego obiektu wyświetla kod HTML dla tego pola.
Aby pobrać pojedyncze BoundField, użyj składni wyszukiwania w słowniku w swoim formularzu, używając nazwy pola jako klucza:
Aby pobrać wszystkie obiekty BoundField, przeprowadź iterację formularza:
Dane wyjściowe specyficzne dla pola uwzględniają ustawienie auto_id obiektu formularza:
źródło
Istnieje bardzo łatwe w instalacji i świetne narzędzie stworzone dla Django, którego używam do stylizacji i może być używane w każdym frameworku frontendowym, takim jak Bootstrap, Materialize, Foundation, itp. Nazywa się ono poprawkami do widgetów Dokumentacja: Widget Tweaks
z formularzy importu django
Zamiast używać domyślnych:
Możesz edytować go na swój własny sposób, korzystając z atrybutu render_field, który zapewnia stylizację bardziej zbliżoną do HTML, jak w tym przykładzie:
template.html
Ta biblioteka daje Ci możliwość dobrego oddzielenia interfejsu użytkownika od zaplecza
źródło
W Django 1.10 (prawdopodobnie również wcześniej) możesz to zrobić w następujący sposób.
Model:
Formularz:
Szablon:
źródło
Edycja: Odpowiedź na inny (nieco lepszy) sposób robienia tego, co sugeruję, znajduje się tutaj: Stylizacja pól wejściowych formularza w Django
Wszystkie powyższe opcje są niesamowite, pomyślałem, że dorzucę tę, ponieważ jest inna.
Jeśli chcesz mieć niestandardowe style, klasy itp. W swoich formularzach, możesz wprowadzić dane wejściowe HTML w swoim szablonie, które pasują do pola formularza. Na przykład dla CharField (domyślnym widżetem jest
TextInput
), powiedzmy, że chcesz wprowadzić tekst w stylu bootstrap. Zrobiłbyś coś takiego:<input type="text" class="form-control" name="form_field_name_here">
Dopóki nazwa pola formularza będzie zgodna z
name
atrybutem html (i widżet prawdopodobnie będzie również musiał pasować do typu danych wejściowych), Django uruchomi wszystkie te same walidatory w tym polu po uruchomieniuvalidate
lubform.is_valid()
iStylizowanie innych rzeczy, takich jak etykiety, komunikaty o błędach i tekst pomocy, nie wymaga dużego obejścia, ponieważ możesz zrobić coś takiego
form.field.error.as_text
i nadać im styl, jak chcesz. Rzeczywiste pola to te, które wymagają trochę zabawy.Nie wiem, czy to najlepszy sposób, czy polecam, ale to jest sposób i może być odpowiedni dla kogoś.
Oto przydatny przewodnik po stylach formularzy i zawiera większość odpowiedzi wymienionych w SO (np. Użycie atr w widżetach i poprawkach widżetów). https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html
źródło
Stylizowanie instancji widżetów
Jeśli chcesz, aby jedna instancja widżetu wyglądała inaczej niż druga, musisz określić dodatkowe atrybuty w momencie tworzenia instancji obiektu widżetu i przypisywania go do pola formularza (i być może dodać kilka reguł do plików CSS).
https://docs.djangoproject.com/en/2.2/ref/forms/widgets/
Aby to zrobić, podczas tworzenia widgetu użyj argumentu Widget.attrs:
Możesz także zmodyfikować widget w definicji formularza:
Lub jeśli pole nie jest zadeklarowane bezpośrednio w formularzu (na przykład pola formularza modelu), możesz użyć atrybutu Form.fields:
Django umieści wtedy dodatkowe atrybuty w wyrenderowanym wyniku:
źródło