Django表單輸入欄樣式

Question

我已經重新定義了“與我們聯系”頁面的表單，這是標准的django-form ，但是我很難理解如何在<inpout>字段中編寫描述。

准確地說，我想在<input>字段中寫入Name ，所以我該怎么做。 我定義了{{ form.name }}類的<input>字段，因此如何更像<input type="name" class="form-control" id="id_name" placeholder="Your Name">那樣定義它。

   <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-4">
       {% if form.errors %}
           <p style="color: red">
               Please correct the error{{ form.errors|pluralize }} below.
           </p>
       {% endif %}

            <form class="form-horizontal" action="." method="POST">
                {% csrf_token %}
                <div class="field form-group">
                    {{ form.name.errors }}                        
                    <label for="id_name" class="control-label"></label>
                    <div class="col-sm-10">    
                        {{form.name}}
                    </div>
                </div>
                <div class="field form-group">
                    {{ form.email.errors }}                        
                    <label for="id_email" class="control-label"></label>
                    <div class="col-sm-10">
                        {{ form.email }}
                    </div>
                </div>
                <div class="field form-group">
                    {{ form.phone_number.errors }}                        
                    <label for="id_phone_number" class="control-label"></label>
                    <div class="col-sm-10">
                        {{ form.phone_number }}
                    </div>
                </div>
                <div class="field form-group">
                    {{ form.message.errors }}                        
                    <label for="id_message" class="control-label"></label>
                    <div class="col-sm-10">
                        {{ form.message }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="submit" class="btn btn-primary btn-block" value="Submit"></button>
                    </div>
                </div>
            </form>
          </div><!--/end form colon -->

Answer 1

如果要修改占位符文本或Django創建的字段的其他值，則可以使用小部件的attrs在表單代碼中完成：

class MyForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(
            attrs={
                'class': 'my-class',
                'placeholder': 'Name goes here',
            }))

如果您打算將所有代碼保留在模板中，則必須手動創建每個輸入字段，而不是使用Django渲染的字段。 不過，您仍然可以訪問模板中生成的字段的值，以幫助您完成此操作。

<input name="{{ form.name.name }}" type="text" placeholder="Name field">