Стилизация полей форм

Последнее обновление: 20.08.2022

Поля формы применяют некоторые стили по умолчанию. Если же мы хотим применить к ним какие-то собственные стили и классы, то нам надо использовать ряд механизмов.

Прежде всего мы можем вручную выводить каждое поле и определять правила стилизации для этого поля или окружающих его блоков. Возьмем простейшую форму:

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>

Результа при отправке формы с ошибками:

Стилизация форм Django

Второй механизм представляют свойства формы 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>
Стилизация полей формы в Django

Но также можно было бы комбинировать оба способа:

<!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>
Стилизация в Django Forms

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850