Reputation: 51
I'm try to add form control to a form app I made for Django. I have created the app already and want to add the form into a bootstrap template, however I don't know how to add bootstrap's sleeker text-box for my email field.
I would like to end up with something like the sign-in field found in the corner of this bootstrap template (albeit without the password field): http://getbootstrap.com/examples/jumbotron/
My code in my signup.html file looks like this:
{% extends 'base.html' %}
{% block content %}
<div class="col-sm-12">
<form method='POST' action=''> {% csrf_token %}
{{ form.as_p }}
<input type='submit' class='btn btn-success btn-lg'>
</form>
</div>
{% endblock %}
The code for the bootstrap site above looks like this (I got rid of the password part for clarity): I don't know how to integrate the django app into this code so that the site will post signups to my database.
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
How do I integrate the two? Thanks in advance.
Upvotes: 5
Views: 13966
Reputation: 101
def __init__(self, *args, **kwargs):
super(YourModelForm, self).__init__(*args, **kwargs)
for field_name, field in self.fields.items():
if field.widget.attrs.get('class'):
field.widget.attrs['class'] += ' form-control'
else:
field.widget.attrs['class']='form-control'
will not override the given class attrs
Upvotes: 10
Reputation: 106
Adding the class directly to the Form Field as Attribute, seemed the DRY'est way for me.
name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"}))
message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control"}))
This way you don't need to edit anything anywhere else. You can add as many classes to specific fields this way as you want.
Upvotes: 1
Reputation: 4362
For reference, if you're for example using a ModelForm
you can just override the init
method of your form like this:
def __init__(self, *args, **kwargs):
super(MemberForm, self).__init__(*args, **kwargs)
for field_name, field in self.fields.items():
field.widget.attrs['class'] = 'form-control'
Upvotes: 12
Reputation: 1751
Try using django-bootstrap3 app.
{% load bootstrap3 %}
<form method="post" action="" >
{% csrf_token %}
{% bootstrap_form form layout="inline" %}
{% buttons%}
<button type="submit" class="btn btn-sucess"> Signin </button>
{% endbuttons %}
</form>
Hope this gives you right direction. You can try various parameters provided by the app to suite your layout.
Upvotes: 1