Поля формы применяют некоторые стили по умолчанию. Если же мы хотим применить к ним какие-то собственные стили и классы, то нам надо использовать ряд механизмов.
Прежде всего мы можем вручную выводить каждое поле и определять правила стилизации для этого поля или окружающих его блоков. Возьмем простейшую форму:
from django import forms class UserForm(forms.Form): name = forms.CharField(min_length=3) age = forms.IntegerField(min_value=1, max_value=100)
В шаблоне пропишем ее использование:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> <style> .alert{color:red} .form-group{margin: 10px 0;} .form-group input{width:250px;height: 25px;border-radius:3px;} </style> </head> <body class="container"> <form method="POST" novalidate> {% csrf_token %} <div> {% for field in form %} <div class="form-group"> {{field.label_tag}} <div>{{field}}</div> {% if field.errors%} {% for error in field.errors %} <div class="alert alert-danger"> {{error}} </div> {% endfor %} {% endif %} </div> {% endfor %} </div> <input type="submit" value="Send" > </form> </body> </html>
Результа при отправке формы с ошибками:
Второй механизм представляют свойства формы required_css_class и error_css_class, который соответственно применяют класс css к метке, создаваемой для поля формы, и к блоку ассоциированных с ним ошибок.
Например, определим следующую форму:
from django import forms class UserForm(forms.Form): name = forms.CharField(min_length=3) age = forms.IntegerField(min_value=1, max_value=100) required_css_class = "field" error_css_class = "error"
В этом случае в шаблоне у нас должны быть определены или подключены классы "field" и "error":
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> <style> .field{font-weight:bold;} .error{color:red;} </style> </head> <body class="container"> <form method="POST" novalidate> {% csrf_token %} <table> {{form}} </table> <input type="submit" value="Send" > </form> </body> </html>
Но также можно было бы комбинировать оба способа:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> <style> .field{font-weight:bold;} .error{color:red;} </style> </head> <body> <form method="POST" novalidate> {% csrf_token %} <div> {% for field in form %} <div class="row"> {{field.label_tag}} <div>{{field}}</div> {% if field.errors%} <div class="error">{{field.errors}}</div> {% endif %} </div> {% endfor %} </div> <input type="submit" value="Send" > </form> </body> </html>
Третий механизм стилизации представляет установка классов и стилей через виджеты:
from django import forms class UserForm(forms.Form): name = forms.CharField(widget=forms.TextInput(attrs={"class":"myfield"})) age = forms.IntegerField(widget=forms.NumberInput(attrs={"class":"myfield"}))
В данном случае через параметр виджетов attrs
устанавливаются атрибуты того элемента html, который будет генерироваться.
В частности, здесь для обоих полей устанавливается атрибут class
, который представляет класс myfield.
И, допустим, в шаблоне будет определен класс myfield:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> <style> .myfield{ border:1px solid #ccc; border-radius:5px; height:25px; width:200px; margin: 10px 10px 10px 0; } </style> </head> <body> <form method="POST"> {% csrf_token %} <div> {% for field in form %} <div> {{field.label_tag}} <div>{{field}}</div> </div> {% endfor %} </div> <input type="submit" value="Send" > </form> </body> </html>