How do you assign a value to an input field in HTML? - html

How do you assign a value to an input field in HTML, this is a python and jinja, the {{ fullname }} contain the complete name two or more words and the value is there, but my code only display the first word.
this is the code:
<div class="form-group">
<input type="text" name="Fullname" class="form-control" placeholder="Company Name" value={{ fullname }} required />
</div>
Let say that the value returned by Database is: juan Perez
it will only display juan, not the complete name.

Related

How to render multiple times to same template in a single function block

I want to render multiple times in each if statement to same template. But in the HTML template it's only taking the last rendered statement.
I passed the context in the form of dictionary in the return render statement.
views.py
if not match :
#messages.info(requests,'Invalid')
return render(requests, 'validate/home1.html', {'title' : 'Invalid mail'})
if not country_code:
return render(requests, 'validate/home1.html', {'title3' : 'Enter correct country code'})
if not pwd_match :
return render(requests, 'validate/home1.html', {'title1' : 'Enter password again'})
if not phone :
return render(requests, 'validate/home1.html', {'title2' : 'Enter 10 digit number'})
home1.html
<form id="waterform" method="post" autocomplete="off">
{% csrf_token %}
<div class="formgroup" id="name-form">
<label for="name">Country Code*</label>
<input type="text" id="name" name="name" required />
</div>
<div>
<p style="color: red; margin-left: 10px">{{ title3 }}</p>
</div>
<div class="formgroup" id="email-form">
<label for="email">Your e-mail*</label>
<input type="text" id="email" name="email" required />
</div>
<div>
<p style="color: red; margin-left: 10px">{{ title }}</p>
</div>
<div class="formgroup" id="email-form">
<label for="password">Your password*</label>
<input type="text" id="pwd" name="pwd" required />
</div>
I want to display each condition (title, title1, title2) which satisfies the if blocks.
Something like this. It will put all the errors in one dictionary and when rendering, if the error doesn't exist, will just display an empty ''.
a=''
b=''
c=''
d=''
if not match :
a = 'invalid mail'
if not country_code:
b = 'Enter correct country code'
if not pwd_match :
c = 'Enter password again'
if not phone :
d = 'entire ten digit number'
errors = {'title':a, 'title1': b, 'title2': c, 'title3':d}
return render(requests, 'validate/home1.html', errors)
The execution will stop in the first match.
You should make all the validations before rendering and send the errors to the view, then write all those conditions on the template side.

placeholder attribute is invalid when check it in browser

I assign values to placeholder within every tag like:
<div class="form-group">
<label for="firstname" class="col-sm-1 control-label">FirstName</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="firstname" value= {{ form.first_name.value }} name="first_name" placeholder="first_name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-1 control-label">Lastname</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="lastname" name="last_name" value= {{ form.first_name.value }} placeholder="last_name">
</div>
</div>
However, when I check it on browser, it displays None.
How to solve such a problem?
Pass the value in string format as shown below:
value="{% if form.first_name.value %}{{ form.first_name.value }}{%else%}{%endif%}"
This will fix the issue because if value attribute's value is empty then only placeholder attribute's value comes into picture!
What you're seeing is actually exactly what you wrote. form.first_name.value is None if not set on the form, so it sets value="None" and lo, that is what the form dutifully displays in preference to the placeholder.
You need to get a '' for your default value if a field.value is None. One way would be an explicit check using {% if form.first_name.value %} {{ form.first_name.value }} {% endif %}. More concisely, {{ form.first_name.value|default_if_none:"" }} using a template filter.

Bad Input type email, creating a text input

I am getting the error "Bad input type email,creating a text input".Here below are the question specifications and my code. I am not getting exactly what constraints I am missing out or going wrong.
Question Description:
When creating the code for your form, you must use the HTML5 tags that are appropriate to replicate the form and fulfill all the specifications listed.
Code the form with autocomplete active.
The Name field you create should have autofocus, placeholder text, and be required. Don't forget to select the appropriate type for this field as well as all the fields that follow.
The Telephone field should have placeholder text, a pattern to restrict entry, and be required. Pattern should be of the type [ Pattern: 1-234-567-8910 ]
The Email address field should have placeholder text and allow multiple entries. This field should also be required.
The Books field should have a data list. You can select the content you would like to list.The Quantity (Maximum 5) field should have a minimum value of 1 and a maximum value of 5.
Code:
<html>
<head>
<style>
h2{
color:blue;
}
h4{
color:light blue;
font-style:italic;
}
</style>
</head>
<body>
<h2>A Simple Form</h2>
<h4>Form Fundamentals</h4>
<form method="get" action="" autocomplete="on">
<fieldset>
<legend>Customer Info</legend>
Name: <input type="text" autofocus="on" required placeholder="Enter your name"><br>
Telephone: <input type="text" pattern="[0-9]{1}[0-9]{3}[0-9]{3}[0-9]{4}" placeholder="Pattern: 1-234-567-8910" required><br>
Email address: <input type="email" placeholder="Enter your email address" multiple="multiple" required/>
</fieldset>
<fieldset>
<legend>Books</legend>
<input list="books">
<datalist id="books">
<option>abc</option>
</datalist>
Quantity(Maximum 5):<input type="number" min="1" max="5">
</fieldset>
<input type="submit">
</form>
</body>
Maybe you get the error because of the forward slash (/) after the required in input tag of Gmail.

Column of text type returned but not displayed in laravel 5.4 edit form

Working on an edit form, i'm able to display all data from my query except the one for addresses. Looked up my code and it looks good but still the old data from database isn't showing in that field. Could this be the way am calling it since its of text type?
Controller
public function edit($id)
{
$customer= Customer::findOrFail($id);
dd($customer->contact_address);
//return view('customers.edit', compact('customer'));
}
dd($customer->contact_address) returns
"18B Harvey Street, Crosstour Estate. Ikeja, Lagos."
edit form field
<div class="form-group">
<label for="contact_address" class="col-md-4 control-label">Contact Address</label>
<div class="col-md-6">
<textarea id="contact_address" type="text" class="form-control" name="contact_address" value="{{ $customer->contact_address }}" row="3" required autofocus></textarea>
</div>
</div>
How do make it display like the other field are?
value is not a textarea attribute, output the address between the textarea tags:
<textarea>{{ $customer->contact_address }}</textarea>
Alternatively, I believe textarea elements support the placeholder attribute, so:
<textarea placeholder="{{ $customer->contact_address }}"></textarea>

django - how can i edit the html displayed in a form field?

I'm using bootstrap, and i'd like to set the span of some of the elements i have in a form.
so pretty much, instead of:
<input id="id_display_name" type="text" name="display_name">
i'd like to show
<input id="id_display_name" type="text" name="display_name" class="span4">
where the initial line was generated by:
{{ form.display_name }}
how do i stick the new html in?
https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs
display_name = forms.TextInput(attrs={'class': 'span4'})
will result in:
<input id="id_display_name" type="text" name="display_name" class="span4" />'