bugfix> python > 投稿

現在、DjangoとBootstrapを使用してWebサイトをコーディングしています。 最初にテンプレートとモデルを作成し、現在、コントローラーを実装しています。すべてはまだ実装されていませんが、これについては多少の助けが必要でした。 BoostrapグリッドシステムでDjango認証フォームをレンダリングする方法を知りたいと思いました。 Boostrap 4とDjango 2.0.4を使用しています。
私の古いフォームは次のようなものでした:

<div class="jumbotron">
    <form class="form-horizontal" method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <div class="form-group">
            <div class="col-lg-4 offset-lg-4">
                <label class="control-label" for="usernameInput">{{ form.username.label_tag }}</label>
                <input id="usernameInput" type="text" name="{{ form.field.html_name }}" value="{{ form.username }}" class="form-control"
                       placeholder="Username">
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-4 offset-lg-4">
                <label class="control-label" for="passwordInput">{{ form.password.label_tag }}</label>
                <input id="passwordInput" type="password" name="{{ form.field.html_name }}" value="{{ form.field.value }}" class="form-control"
                       placeholder="Password">
            </div>
        </div>
        <div class="container" id="btn_login">
            <button type="submit" class="btn btn-primary btn-md" value="login" role="button">Log in</button>
            <input type="hidden" name="next" value="{{ next }}"/>
        </div>
    </form>
    <span class="container" id="forgotten_password">
        <a href="">Forgot your password ?</a>
    </span>
</div>


そして、ここに新しいものがあります:

<div class="jumbotron">
    {% load widget_tweaks %}
    <form class="form-horizontal" method="post" action="{% url 'login' %}">
        {% csrf_token %}
        {% for hidden_field in form.hidden_fields %}
            {{ hidden_field }}
        {% endfor %}
        {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}
        {% for field in form.visible_fields %}
            <div class="form-group">
                {{ field.label_tag }}
                {% if form.is_bound %}
                    {% if field.errors %}
                        {% render_field field class="form-control" %}
                        {% for error in field.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                    {% else %}
                        {% render_field field class="form-control" %}
                    {% endif %}
                {% else %}
                    {% render_field field class="form-control" %}
                {% endif %}
                {% if field.help_text %}
                    <small class="form-text text-muted">{{ field.help_text }}</small>
                {% endif %}
            </div>
        {% endfor %}
        <div class="container" id="btn_login">
            <button type="submit" class="btn btn-primary btn-md" role="button">Log in</button>
        </div>
    </form>
    <span class="container" id="forgotten_password">
        <a href="">Forgot your password ?</a>
    </span>
</div>

しかし、明らかにわかるように、これは同じ方法でレンダリングされていません。 たとえば、入力の幅を取り戻したいです。

残りの部分では、この行をurls.py
re_path(r '^ login/$'、auth_views.login、{'template_name': 'main/login.html'}、name = 'login')、
そしてこれは私のsettings.py 適切なページにリダイレクトするには:
LOGIN_REDIRECT_URL = 'my_pls'

私はたくさんのグーグルで最終的にこのリンクを使用しました(あなたがケースに気付いた場合、私が理解していない何かに気づいた):https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html#understanding-the-rendering-process

回答 2 件
  • ** forms.py **でカスタムHTML属性を使用する必要があります。

    簡単です:

    from django import forms
    class your_form(forms.Form):
        attrs_for_the_field = {
            'class': 'form-control',
            'placeholder': 'Write here!',
        }
        field = forms.CharField(widget=forms.CharField(attrs=attrs_for_the_field))
    
    


    このコードを使用して、次のHTMLをレンダリングします。

    <input type="text" name="field" class="form-control"  placeholder="Write here!" id="id_field">
    
    


    DjangoがHTML入力要素を表す方法を知るには、https://docs.djangoproject.com/en/2.0/ref/forms/widgets/をご覧ください。

    また、https://docs.djangoproject.com/en/2.0/ref/forms/fields/を読んで、どのように機能するかを理解してください。

  • forms.pyのフォームコードのフィールドにすべてのHTML設定を追加できます。フォームは{{form.as_p}}で表示できます。 入力の幅はjQueryまたはJavaScriptで取得できます。

あなたの答え