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.
Related
I want to add styling to the below form (main objective is to change the text color of placeholder as my form is of dark color and the placeholder is not visible due to its default gray color) I am sure there must be some way to achieve this in the template only.
Snippet from CSS
::placeholder {
color: aquamarine;
opacity: 1;
}
Snippet from Template
<form action="{% url 'register' %}" class="box" method="POST">
<input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
<input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
<input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
<input type="text" name="email"placeholder="{{form.email.label}}"id="" />
<input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
<input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
<input type="submit" value="Submit" />
</form>
This is my form that I have created to add a new user (django.contrib.auth.models User). I am not sure how do I use {{form.username}} in the existing form. If I simply put {{form.username}} to the form it is creating a new field without any styling applied to it.
Maybe I misunderstood what you want to achieve, but you can simply set custom CSS via <style></style> tag. If you would like to a more sophisticated solution, you can define CSS class in form widget attributes or append custom styles to form.
<style>
::placeholder {
color: aquamarine;
opacity: 1;
}
</style>
<form action="{% url 'register' %}" class="box" method="POST">
<input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
<input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
<input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
<input type="text" name="email"placeholder="{{form.email.label}}"id="" />
<input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
<input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
<input type="submit" value="Submit" />
</form>
I found a dirty fix for the problem. I first entered made the form like below -
<form action="{% url 'register' %}" class="box" method="POST">
{{form.username}}
{{form.first_name}}
...
</form>
Then I inspected the rendered template and stole the HTML equivalent of the above code. I have added the all the required attributes in the input tags. It looks like below snippet -
{% csrf_token%}
<input
type="text"
name="username"
maxlength="150"
**placeholder="Username"**
autofocus=""
required=""
id="id_username"
/>
<input
type="text"
name="first_name"
maxlength="30"
**placeholder="First Name"**
id="id_first_name"
/>
...
I know this probably is not a perfect solution and there must be a more elegant way of handling this scenario. However, I am going ahead with this approach for time being as it is serving the purpose.
I am posting a sequence of image files and the corresponding description for each image. So the skeleton html form part:
<div class="form-group">
<input type="file" name="image">
<input type="file" name="description">
</div>
<div class="form-group">
<input type="file" name="image">
<input type="file" name="description">
</div>
<div class="form-group">
<input type="file" name="image">
<input type="file" name="description">
</div>
My server is Django 1.6.11 and I want to use django's getlist for image param and description param. So I want to make sure that the two lists I got--image_list and description_list do match, meaning that image_list[0] indeed matches with description_list[0], image_list[1] indeed matches with description_list[1] and image_list[2] indeed matches with description_list[2].
Based on what I see when tests with Chrome and Django 1.6.11, it seems that the corresponding relationship is guaranteed. However, I am not sure if this applies all the time.
I don't think you should rely on the sequence of getlist. Instead you should give different names to each <input>:
<div class="form-group">
<input type="file" name="image0">
<input type="file" name="description0">
</div>
<div class="form-group">
<input type="file" name="image1">
<input type="file" name="description1">
</div>
<div class="form-group">
<input type="file" name="image2">
<input type="file" name="description2">
</div>
Then in your views you could do:
for i in range(0, 3):
file = request.POST['image%s' % i]
description = request.POST['description%s' % i]
# other operations
I want to post the data to the server via form. How can I do this?
<div class="panel-body">
<form role="form" action="{% url 'login' %}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="sender-email" class="control-label">Username:</label>
<div class="input-icon"> <i class="icon-user fa"></i>
<input id="sender-email" type="text" placeholder="Username" class="form-control email">
</div>
</div>
<div class="form-group">
<label for="user-pass" class="control-label">Password:</label>
<div class="input-icon"> <i class="icon-lock fa"></i>
<input type="password" class="form-control" placeholder="Password" id="user-pass">
</div>
</div>
<div class="form-group">
<input class="btn btn-primary btn-block" id="authenticate_user" type="submit" value="Submit">
</div>
</form>
</div>
My views.py
#csrf_exempt
def signin(request):
if request.method == 'POST':
print request.POST.get('sender-email') #prints None
username = request.POST['username'] # throws error, username not available.
password = request.POST['password']
How do I post the data without using jquery? I know of a way of posting through AJAX jquery, but dont wanna do that.
The 'name' attribute of input tags is set as keys of request.GET and request.POST.
Add name attribute to all your input tags.
<input name="username" id="sender-email" type="text" placeholder="Username" class="form-control email">
<input name="password" type="password" class="form-control" placeholder="Password" id="user-pass" >
POST data are populated using the name attribute of your input elements. Change your id attributes or add a name one accordingly. E.g:
<input type="password" class="form-control" placeholder="Password" name="user-pass">
You should also consider using a form to handle your data more easily.
The relevant part of my flask code is:
#app.route("/process", methods = ["GET", "POST"] )
def process_form():
#checked = request.form.getlist('option')
checked=request.form('option')
with open('checked.txt','w') as file:
file.write("%s"%checked)
# do something with checked array
return checked
and my html looks like:
<div class="container" id='tog'>
<div class="half">
<form action="/process" method="POST">
<input type="radio" name="option" value="original" />
<h3>originak value<h3>
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
<h3>Term Freq<h3>
</div>
</form>
</div>
The idea is that I want to find out which radio button was selected and store the information is a text file. But that does not seem to be working.
I changed the html to:
<form action="/process" method="POST">
<div class="half">
<input type="radio" name="option" value="original" />
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
</div>
<input type="submit" value="Submit">
</form>
and now I get a 400 Bad Request error
You don't have a submit button inside of your form. Add one.
<input type="submit" value="Submit!" />
Also, you probably want to change request.form('option') to request.form['option']
I'm using the requests module with python 3.3 and am trying to post data. This is the data I'm trying to post. I've already parsed the values from the html:
<form action="/checkoutnow/2" autocomplete="off" class="proceed" id="loginForm" method="post" name="login_form" novalidate="novalidate">
<input id="loginForm" name="execution" type="hidden" value="e21s1"> <input name="token" type="hidden" value="EC-2MJ027776Y1687721"> <input id="incontext" name="incontext" type="hidden" value="0"> <input id="eventID" name="_eventId_submit" type="hidden">
<div class="" id="loginFields">
<div class="inputField emailField confidential">
<label for="email">Email</label> <input autocomplete="off" data-validate-email="true" id="email" name="email" type="email" value="">
<div class="tip tipHint">
<div class="tipArrow tipArrowFront tipHintArrowFront"></div>
<div class="tipArrow tipArrowBack tipHintArrowBack"></div>
<ul class="tipText tipHintText">
<li>Did you mean <a class="emailLink" href=""></a>?
</li>
</ul>
</div>
</div>
<div class="inputField passwordField confidential">
<label for="password">Password</label> <input autocomplete="off" id="password" maxlength="22" name="password" type="password" value="">
<div class="toolTip tip guestTooltip">
<div class="tipArrow tipArrowFront tipErrorArrowFront"></div>
<div class="tipArrow tipArrowBack tipErrorArrowBack"></div>
<div class="tipText tipErrorText">
Trouble logging in? You can try again, or <a class='submit' href='/checkoutnow/2?execution=e21s1&_eventId_guest' id='guestTooltipLink'>check out as a guest</a>
</div>
</div>
</div>
</div>
<div class="buttons varA">
<input class="btn full continue" name="_eventId_submit" type="submit" value="Log in to PayPal">
<div class="forgotPassword secondary" id="forgotPasswordSection">
<a href='/us/merchantpaymentweb?cmd=_account-recovery&from=PayPal' id='forgotPassword' target='_blank'>Forgot your password?</a>
</div>
<hr class="sep">
<a class="btn btn-secondary submit" href="/checkoutnow/2?execution=e21s1&_eventId_guest&token=EC-2MJ027776Y1687721" id="checkoutAsAGuestBtn">Pay with Debit or Credit Card</a>
</div>
</form>
And here is my code to get past this. I am using a session btw.
payload6 = {'loginFields': {'password': paypalpass, 'email': useremail}, 'token': token, 'execution': execution, 'incontext': incontext, '_eventId_submit': ''}
r = session.post(urlnow, data=payload6)
I believe my problem is with the 'loginFields' as after I post, the values are still empty.
Your POST data shouldn't have any nested dicts. password and email should be top-level keys like token and execution are, and not nested under loginFields like they are now. (I assume loginFields is in your payload now because of that <div id="loginFields">, but wrappers like that shouldn't have any effect on how the POST data is structured.)
It turns out javascript was generating more variables. Thanks for the help though.