Django form input field styling

Question

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.

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 -->

[This question](http://stackoverflow.com/questions/401025/define-css-class-in-django-forms) should help. — Alasdair, Mar 10 '16 at 20:38
You can also use the styling in a script: $('#id_form.message').addClass() — Aquiles, Mar 10 '16 at 21:24

quaspas · Accepted Answer · 2016-03-10T21:22:47.303

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',
            }))

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">

This is a nice example, I have missed this in docs, but I would like that `placeholder` live inside `django-templates` not `django-forms`. — copser, Mar 10 '16 at 20:44

Django form input field styling

1 Answers1

Linked