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

You can also use the styling in a script: $('#id_form.message').addClass() — Aquiles
– Aquiles, Commented Mar 10, 2016 at 21:24

quaspas · Accepted Answer · 2016-03-10 21:22:47Z

7

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

edited Mar 10, 2016 at 21:22

answered Mar 10, 2016 at 20:37

quaspas

1,3519 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

copser Over a year ago

This is a nice example, I have missed this in docs, but I would like that placeholder live inside django-templates not django-forms.

Collectives™ on Stack Overflow

Django form input field styling

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related