Django / Crispy forms tag (Bootstrap4)

crispy form?

 

부트스트랩 폼과 장고를 통합하는 패키지로 장고 프로젝트에서 부트스트랩 폼을 만드는 데 도움을 준다.

 

 

crispy form 적용 전

 

{% extends "blog/base.html" %}
{% block content %}
<div class="container">
    <form method="POST" class="col-12 col-md-6 pl-3 pr-3 pl-md-0 pr-md-0">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="mb-3 white-important">
                Login
            </legend>
            {{ form }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-primary" type="submit">Login</button>
        </div>
    </form>
    <div class="pt-3">
        <small class="text-muted">
            Do you need an account? <a class="ml-2" href="{% url 'register-users' %}">Sign up</a>
        </small>
    </div>
</div>
{% endblock content %}

 

 

 

 

crispy form 적용 후

 

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
    <form method="POST" class="col-12 col-md-6 pl-3 pr-3 pl-md-0 pr-md-0">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="mb-3 white-important">
                Login
            </legend>
            {{ form | crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-primary" type="submit">Login</button>
        </div>
    </form>
    <div class="pt-3">
        <small class="text-muted">
            Do you need an account? <a class="ml-2" href="{% url 'register-users' %}">Sign up</a>
        </small>
    </div>
</div>
{% endblock content %}

 

 

 

crispy form 사용 방법

 

1. 터미널 창에서 설치 하기

 

pip install django-crispy-forms

 

2. settings.py

INSTALLED_APPS = [ 'crispy_forms', ] #crispy-forms 	아님 주의

CRISPY_TEMPLATE_PACK = 'bootstrap4' 

 

 

3. 폼을 사용할 html 파일

 

- bootstrap 링크 추가

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

 

- html 시작 부분에 아래 태그 추가

{% load crispy_forms_tags %}

 

- 적용하고 싶은 폼에 아래와 같이 '| crispy' 붙이기

 

        {{ form | crispy }}

 

 

 

참고

simpleisbetterthancomplex.com/tutorial/2018/08/13/how-to-use-bootstrap-4-forms-with-django.html