폼 모양 꾸미기

Posted on 2021-08-25 by GKSRUDTN99
Django로 웹사이트 만들기 장고

django-crispy-forms로 폼 모양을 꾸며봅시다.

django-crispy-forms 적용하기

pip install django-crispy-forms로 설치한다.

INSTALLED_APPS에 crispy_forms를 추가한다.

settings.py에 CRISPY_TEMPLATE_PACK = 'bootstrap4'를 추가한다.

post_form.html 수정하기

맨 위에 {% load crispy_forms_tags %}를 추가한다.

{{ form }}에도 | crispy를 추가한다.

위 과정을 거치면 form이 더이상 테이블 형태로 나타나지 않으므로

태그를 삭제한다.

태그를 입력하는 태그의 클래스도 수정하여 crispy_forms의 기본 양식이 적용될 수 있도록 한다.

<!-- post_form.html -->
{% extends 'blog/base_full_width.html' %}
{% load crispy_forms_tags %}
{% block head_title %}Create Post - Blog{% endblock %}


{% block main_area %}
    <h1>Create New Post</h1>
    <hr/>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
            {{ form | crispy}}
            <div id="div_id_tags_str">
                <label for="id_tags_str">Tags:</label>
                <input type="text" name="tags_str" id="id_tags_str" class="textinput textInput form-control">
            </div>
        <br />
        <button type="submit" class="btn btn-primary float-end">Submit</button>
    </form>
{% endblock %}

post_update_form.html도 같은 방식으로 수정한다.

<!-- post_update_form.html -->
{% extends 'blog/base_full_width.html' %}
{% load crispy_forms_tags %}
{% block head_title %}Edit Post - Blog{% endblock %}


{% block main_area %}
    <h1>Edit Post</h1>
    <hr/>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
            {{ form | crispy}}
            <div id="div_id_tags_str">
                <label for="id_tags_str">Tags:</label>
                <input type="text" name="tags_str" id="id_tags_str" class="textinput textInput form-control" value="{{ tags_str_default }}">
            </div>
        <br />
        <button type="submit" class="btn btn-primary float-end">Submit</button>
    </form>
{% endblock %}

Search

Copyright © CodeCamper