Django-crispy-forms, Django’da formlar için kolay ve basit bir şekilde stil eklemek için kullanılan bir üçüncü taraf paketidir. Bu paket sayesinde, Django’nun varsayılan form düzenini kullanarak veya kendiniz bir düzen tasarlayarak form elemanlarını şekillendirebilirsiniz.
Django-crispy-forms’ü kullanmak için aşağıdaki adımları takip edebilirsiniz:
Kurulum: Django-crispy-forms’ü yüklemek için, pip paket yöneticisini kullanabilirsiniz:
pip install django-crispy-forms
Ayarlar: Django projesindeki settings.py dosyasına aşağıdaki kodu ekleyin:
python
INSTALLED_APPS = [
# …
‘crispy_forms’,
# …
]
CRISPY_TEMPLATE_PACK = ‘bootstrap4’
İlk satırda, crispy_forms uygulamasını projeye dahil ediyoruz. İkinci satırda, form düzenini belirliyoruz. Bu örnekte, bootstrap4 kullanıyoruz, ancak bootstrap3, uni-form gibi diğer düzenler de mevcuttur.
Formlarda kullanım: Artık Django-crispy-forms’ü projenize dahil ettiğinize göre, formlarınızda kullanabilirsiniz. Bunun için, form sınıfınızın __init__ metodunda crispy metodunu çağırarak, form elemanlarını şekillendirebilirsiniz. Örneğin:
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class ContactForm(forms.Form):
name = forms.CharField(max_length=100)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
def __init__(self, *args, **kwargs):
super(ContactForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = 'post'
self.helper.add_input(Submit(‘submit’, ‘Gönder’))
Bu örnekte, ContactForm adında bir form sınıfı tanımladık. __init__ metodunda, form elemanlarının nasıl şekilleneceğini belirliyoruz. İlk olarak, super fonksiyonu ile temel sınıfın __init__ metodunu çağırıyoruz. Daha sonra, FormHelper sınıfı ile bir yardımcı nesne oluşturuyoruz. form_method özelliği ile formun HTTP metodunu belirliyoruz ve add_input metodu ile de “Gönder” düğmesini ekliyoruz.
Şablonlarda kullanım: Formu, şablon dosyanızda {{ form|crispy }} şablon etiketi ile gösterebilirsiniz. Örneğin:
Aşağıdaki örnekte, crispy_forms etiketlerini kullanarak iki alana sahip bir form örneği oluşturduk. İlk alan metin girişi için “Ad” etiketli bir “CharField” iken ikinci alan “E-posta” etiketli bir “EmailField” alanıdır.
html
{% extends ‘base.html’ %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
{% endblock %}
Burada, form değişkenini crispy etiketlerine vererek formu stilize ettik. {{ form | crispy }} ifadesi, crispy etiketleri tarafından sağlanan form şablonunu kullanarak formu göstermek için form değişkenini işler. Form alanlarının nasıl görüneceğini, crispy_forms app’inin ayar dosyasında tanımlanmış olan varsayılan şablonları kullanarak kontrol edebilirsiniz. Varsayılan şablonlar yeterli değilse, kendi şablonlarınızı tanımlayabilirsiniz.