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.
Related
(only in Django 2 & 2.0.1)
if I use {{form}} it works but if I use {{form.field}} it disappears all
<form method="POST" class="post-form" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" id="salva" class="btn btn-primary" />
</form>
forms.py
class PreventivoForm(forms.ModelForm):
class Meta:
model = Preventivo
fields = ['cliente','prestazione1', 'ripetizione1', 'prestazione2', 'ripetizione2', 'prestazione3', 'ripetizione3', 'prestazione4', 'ripetizione4', 'prestazione5', 'ripetizione5']
When you use {{form}} then it gets all these value:
<tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" autofocus maxlength="254" required id="id_username" /></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" required id="id_password" /></td></tr>
But if you use {{form.username}} and {{form.password}} then:
<input type="text" name="username" autofocus maxlength="254" required id="id_username" />
<input type="password" name="password" required id="id_password" />
So you will only see the input field not label for that input field
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 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
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 am new to web development . I am using python django framework for creating my website.I wanted to take username as form Input and call a URL like reco/username/ . But when I am trying to append in the username in URL .I am getting only "/reco/" and user name is not appended in the URL.
This is the code snippet .
<form action= "/reco/"+username method="post">
<label for="username">Username: </label>
<input id="username" type="text" name="username" value="{{ current_name }}">
<input type="submit" value="OK">
{{
</form>
I am not sure what I am doing wrong.How can append input field into the url.
Use javascript in the HTML, something like this:
<script>
function myOnSubmit(myForm)
{
myForm.action = "/reco/" + myForm.username.value;
return true
}
</script>
<form onSubmit="return myOnSubmit(this)" action="/reco/" method="post">
<label for="username">Username: </label>
<input id="username" type="text" name="username" value="{{ current_name }}">
<input type="submit" value="OK">
</form>