I have a HTML and CSS template done already, and now I have to use Python and Django to give life to the system. But I stuck into something: how to use my css with django forms ?
For example, this is what I have use in Django:
<label for="id_username">Username:</label>
{{ form.username }}
And this is what django generates:
<input id="id_username" maxlength="100" name="username" type="text" />
As the fields in the form are automatically generated by django, how can I apply style for the input field and the others fields too ?
This is my login form for example and I would like to use django with the css done so far, but how ?
<form class="form-signin" action="" method="post">
<h2 class="form-signin-heading">Pydorado</h2>
<div class="login-wrap">
<div class="user-login-info">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
</div>
//..
</div>
</form>
I read the django documentation related to this but I couldn't find any solution so far. Any idea or suggestions ?
You can apply your styles in the formfield by adding extra attributes like this:
myfield = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
I also saw a neat solution where someone created a custom template tag where you could add classes in the template itself.
Related
I have custom forms in the page suprated across the page
here is my first form
<form name="profile_image" class="edit-phto" method="POST" enctype="multipart/form-data">
<i class="fa fa-camera-retro"></i>
<label class="fileContainer">
Edit Display Photo
<input name="profile_image" value="" type="file" />
</label>
</form>
for profile picture
and i have another form for cover picture
<form name="cover_image" class="edit-phto" enctype="multipart/form-data">
<i class="fa fa-camera-retro"></i>
<label class="fileContainer">
Edit Cover Photo
<input name="cover_image" type="file" />
</label>
</form>
and another form for data :)
<form method="post" id="infoform" enctype="multipart/form-data">
{% csrf_token %}
.
.
.
.
<div class="submit-btns">
<button type="button" class="mtr-btn"><span>Cancel</span></button>
<button type="submit" class="mtr-btn" name="update"><span> Update</span></button>
</div>
and i have a form for search
<div class="searched">
<form method="post" class="form-search">
<input type="text" placeholder="Search Friend">
<button data-ripple><i class="ti-search"></i></button>
</form>
</div>
i just want to submit the 2 images forms and info forms when i click update button
is there a way to do sachthing in django without using form.as_p and stuff like that
Yes you can, you can just pass request.POST to each of your forms in the view and process each one as normal. However, you should be aware of conflicting names - the best way of managing this is to use form prefixes so that Django knows which bit of data relates to which form:
https://docs.djangoproject.com/en/4.0/ref/forms/api/#prefixes-for-forms
My question here is without using Model or forms.Form can we get form values on submit using Django request object.
Here is small example to explain problem.
HTML Code :
<form action="/login/" method="post">
{% csrf_token %}
<input type="text" id="USERNAME" class="text" value="USERNAME" >
<input type="password" id="Password" value="Password" >
<div class="submit">
<input type="submit" onclick="myFunction()" value="LOGIN">
</div>
<p>Forgot Password ?</p>
</form>
views.py Code :
def dologin(request):
print('i am in do login')
print(request.method)
print(request.POST)
for key, value in request.POST.iteritems():
print(key , value)
return render(request,'webapp/login.html')
So here my key values are empty always. I have learned and capable enough to create html forms using Model and forms:Form. But to add more style changes I need to map this forms:Form object to html defined form.
Thanks in advance.
Assign a name to each input
<form action="/login/" method="post">
{% csrf_token %}
<input type="text" id="USERNAME" class="text" name="USERNAME" value="USERNAME" >
<input type="password" id="Password" value="Password" name="Password" >
<div class="submit">
<input type="submit" onclick="myFunction()" value="LOGIN">
</div>
<p>Forgot Password ?</p>
</form>
HTML form elements always need a name attribute, otherwise the browser won't have any way of sending them to the backend. It's that attribute that is the key in the POST dict.
Note that any formatting you can do with HTML on its own you can also do with Django forms; you really should use them in most circumstances.
Please add the HTML attribute using name for every form component.
Why do Django forms display as table? I did define any table as display.
from django import forms
class FieldForm(forms.Form):
field = forms.CharField(label='Field:', max_length=32)
<form action="" method="get">
{{ form }}
<input type="submit" value="Submit" />
</form>
output:
<tr><th><label for="id_field">Field:</label></th><td><input id="id_field" maxlength="32" name="field" type="text" required /></td></tr>
When rendering a form via
{{ form }}
the form's as_table method is called by default (docs, source). Use
{{ form.as_p }}
# or
{{ form.as_ul }}
if you want to render it as paragraphs or an unordered list. If you don't like either of those, you can still manually render fields.
I know how to set up Django forms to have Django render them. Unfortunately styling forms then becomes a little less straight forward. I am interested in finding a way to have the HTML form pass its entered values to Django. The HTML form is completely programmed in HTML and CSS. Just for context, please find below a list of solutions I dismissed for several reasons:
Set up custom template filter (CSS styling in Django forms)
Use a for loop in order to loop through each form and render each field in turn (How to style a django form - bootstrap)
Reference the form fields directly y using list items https://stackoverflow.com/posts/5930179/revisions
My problem with the first two solutions is that my s inside my form rely on class attributes which sees them assigned into a left or right column (col_half and col_half col_last).
The third doesn't quite work for me since my form is not using list items. If I happen to convert my form into list items, a strange border is added into the form field (see screenshot below).
As such I am wondering whether there is a way to just keep my HTML template and assign its valued to the forms.py one-by-one without getting this strange border (ideally I would like to stick to my input tag)? Any ad advice would be highly appreciated.
Please see the HTML form below:
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/>
</div>
<div class="col_half col_last">
<label for="register-form-name">Last Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" />
</div>
<!-- <div class="clear"></div> -->
<div class="col_half col_last">
<label for="register-form-username">Choose a Username:</label>
<input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-phone">Phone:</label>
<input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
</div>
<!--<div class="clear"></div> -->
<div class="col_half col_last">
<label for="register-form-phone">Country</label>
<input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" />
</div>
<div class="col_half col_last">
<label for="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" />
</div>
<div class="clear"></div>
<div class="col_full nobottommargin">
<button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
Ok, I figured it out.
The trick was to realize that Django will already render its form tags (i.e. {{form.firstName}}) to an input tag. We can then add class attributes to this tag in in forms.py where we define this form:
HTML:
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
{{ form.firstName }}
</div>
</form>
FORMS.PY:
class newUserRegistration(forms.Form):
firstName = forms.CharField(widget=forms.TextInput(attrs={'type': 'text', 'id':'register-form-name', 'name':'register-form-name', 'value':"", 'class':'form-control'}))
class Meta:
# specify model to be used
model = model_name
exclude = ()
THIS RENDERS THE HTML AS FOLLOWS
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
</div>
</form>
By adding the attributes to forms.py we are essentially rendering the input tag into the HTML.
I have a django project with a front end created using bootstrap which has about 20 fields :
<form id="form" class="form-vertical" action="/contact/" method="post">
{% csrf_token %}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label requiredField" for="subject">
Your Name (Primary Contact)
<span class="asteriskField">
*
</span>
</label>
<input class="form-control" id="subject" name="contact_name" type="text"/>
</div>
<div class="form-group ">
<label class="control-label requiredField" for="name">
Your Address (Primary Contact)
<span class="asteriskField">
*
</span>
In my app/views.py I have:
def contact(request):
django_query_dict = request.POST
message = django_query_dict.dict()
In retrospect, I probably should have used a model form (https://docs.djangoproject.com/en/dev/topics/forms/modelforms/#django.forms.ModelForm) . But given that I have not, what would be the simplest approach to sanitize the data and load in into a db table?
The simplest approach is probably to switch it to a ModelForm - and it's definitely the best approach to take.
Using a ModelForm with bootstrap can be a little tricky at first, but take a look at django crispy forms, it makes it a lot easier. Once you do this once you'll never do it another way, it's great and will change your perspective on django forms.