장고 입력 양식에 부트 스트랩을 적용 할 때 똑똑한 최적 솔루션

줄거리

Bootstrap을 적용하는데 「태그의 지정이 깨끗해지는 방법」을 찾고 있어 도착한 최종형입니다.
Django의 공식 자습서를 읽으면서 입력 양식을 구현하고 Bootstrap을 적용해 보았습니다.
그런데 아무래도 중복하고 번잡한 코드가 되어 버리는 것입니다.
시행착오한 결과, 깔끔하게 쓰는 방법을 찾았으므로 소개합니다.

뭔가 생각했던 것과 다른 방법

「 장고 템플릿에 Bootstrap form-group 또는 form-control을 설정할 수 없을 때 」
를 참고로 로그인 폼에서도 시도해 보았습니다.
이것이라면 label에 Bootstrap이 적용되지 않습니다.

능숙한 방법

{{ form }} 그냥 끝나는 부분 안에 Bootstrap을 위한 class 지정하고 싶어서 {% for item in form %} ~ {% endfor %} 와 같이 분해하고 있습니다. 여기까지는 위의 생각했던 것과 다른 방법과 같습니다.
중요한 것은, for item in form 의 item 에는, **「충분하게 너무 많은 정보가 담겨 있다」**라고 하는 것입니다.
DjangoAdmin 페이지 내에서 설정할 수 있는 모든 항목이 포함되어 있습니다.
데이터의 ID와 표시 이름, 데이터 형식까지 모두입니다.
이것을 인텔리센스를 구사해, 체인에서 프로퍼티를 지정한다.
그것을 곳곳에 흩어 둡시다. 그러면 Django의 Admin 페이지에서 편집한 후 코드를 변경하지 않고 화면에 깨끗하게 반영됩니다.
Admin 페이지에서 항목을 늘리거나 줄이거나 필수 항목을 선택하거나 해제해도 코드를 다시 작성할 필요가 없습니다.
얼마나 스마트한 기술일까요.
라고 하지만, Django 이용자로서는, 아직도 아마추어입니다.
더 좋은 방법이 있으면 코멘트란등에서 가르쳐 주시면 기쁩니다.

{% comment %} 以上略 {% endcomment %}
<form method="post" action="{% url 'login' %}" class="form-group">
    {% csrf_token %}
    {% for item in form %}
        <div class="form-group">
            <label for="{{item.id_for_label}}">{{item.label}}</label>
            <input
                type="{{item.field.widget.input_type}}"
                class="form-control"
                {% if item.field.required %}required{% endif %}
                name="{{item.name}}"
                id="{{item.id_for_label}}">
        </div>
    {% endfor %}
    <button type="submit" class="submit btn btn-primary">Login</button>
    <input type="hidden" name="next" value="{{ next }}"/>
</form>
{% comment %} 以下略 {% endcomment %}

표시 결과

궁리한 곳

required 붙이지 않는 곳

label 태그의 연관에 name 대신 id_for_label

input type에도 동적 지정이 가능했다

결과적으로 모두 동적 설명이 생겼다

매직 넘버적인 하드 코딩이 없어졌다

둘 다 참조 글꼴이 더럽고 읽고 싶지 않았기 때문에 찾기가 어렵 기 때문에,
Vscode의 디버거에서 객체의 내용을 조사했습니다. 그 결과 찾은 프로퍼티로부터 캐릭터 라인을 꺼내 이용하도록 했습니다.
본래는 라이브러리의 공식 문서를 잘 읽고 구현해야 합니다만,
이번은 반대로, 디버거로 기능을 발견해, 기능 마다의 레퍼런스를 읽으러 간다고 하는 흐름으로 했습니다.