Django表单输入栏样式 [英] Django form input field styling

问题描述

我已经重新定义了与我们联系页面的表单，这是标准的 django表单东西，但是我很难理解如何在< inpout> 字段。

I have redefined form for contact us page, It's standard django-form stuff, but I'm struggling to understand how can I write description inside <inpout> field.

准确地说，我想写 Name 在< input> 字段中，那么我该怎么做。我定义< input> 字段，例如 {{form.name}} ，所以我如何定义它呢？ <输入类型=名称 class = form-control id = id_name占位符=您的名字> 。

To be precise I want to write Name inside <input> field, so how can I do this. I define <input> field like {{ form.name }}, so how can I define it more like <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 -->

推荐答案

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

If you want to modify the placeholder text, or other values of the field Django creates, it can be done in the form code using the widget's attrs:

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

如果您打算将所有代码保留在模板中，则必须手动创建每个输入字段，而不是使用Django渲染的字段。 您仍可以在以下位置访问生成的字段的值：模板来帮助您做到这一点。

If your intention is to keep all of the code in the template you will have to manually create each input field instead of using the ones Django renders. You can still access the values of the generated field in the template to help you do that though.

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

这篇关于Django表单输入栏样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！