I using symfony2.5. I change form field container div class.
generated form fields:
<div>
<label for="ddd" class="required">lname</label>
<input type="text" id="acme_demobundle_default_lname" name="acme_demobundle_default[lname]" required="required">
</div>
<div>
<label for="dddd" class="required">fname</label>
<input type="text" id="acme_demobundle_default_fname" name="acme_demobundle_default[fname]" required="required">
</div>
I add class to there are input`s container div.
any idea thanks
You can set attributes using the form builder inside your controller
$builder->add('lname', 'text', array('attr' => array('class'=>'something')))
If you have this in your form:
$builder->add('name')
In your template you should use the functions:
{{ form_label(form.name) }} {# access the label #}
{{ form_widget(form.name) }} {# access the input field #}
You can wrap that up with your div and style it however you want:
<div class="your-class">
{{ form_label(form.name) }}
{{ form_widget(form.name) }}
</div>
You can check more on How to Customize Form Rendering
Related
Currently I have this form where the inputs are normal textfield (Basic look) and it works. But once i add in form control, it stop working.
In my HTML (One part of the text field): Workable
<div class="col-md-5">
<div class="form-group">
<label for="{{form.hostname.id_for_label}}">Hostname</label>
{{form.hostname}}
</div>
</div>
But if i change it to the following codes: Not workable
<div class="col-md-5">
<div class="form-group">
<label for="{{form.hostname.id_for_label}}">Hostname</label>
<input class="form-control" type="text" id="{{form.hostname.id_for_label}}" name="{{form.hostname}}"
placeholder="" required>
</div>
</div>
Am i doing something wrong? Appreciate if anyone could help
You are not using braces and you are not specifying the name attribute of the field for the name. Something like this:
<input class="form-control" type="text"
id="{{ form.hostname.id_for_label }}"
name="{{ form.hostname.name }}"
{% if value %} value="{{ form.hostname.value }}"{% endif %}
placeholder=""
{% if form.hostname.field.required %}required{% endif %}>
Instead of manually rendering like this you may want to look into django crispy forms or django floppyforms.
If you need to add custom class names, then you can overide your form like this
def __init__(self, *args, **kwargs):
super(form_name, self).__init__(*args, **kwargs)
self.fields['hostname'].widget.attrs.update({'class': 'form-control'})
Add these to your forms.py under the form which your using, this will add the custom class to the respective field
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.
using this for django model form, we cant create beautiful front end.
<form method="POST" action="">
{% csrf_token %}
<div class="esor">
Name: {{form.Name}}<br>
Class: {{form.Class}}<br>
Publisher: {{form.Publisher}}<br>
</div>
<input type="submit" value="submit">
</form>
Isn't there any ways so we can use html code like:
<form method="GET" action="#">
<input type="text" name="name" placeholder="Name of book">
</form>
instead of {{form.Name}} or {{form.as_p}}
Yes, you can get a beautiful interface that way, just pass the name you use in the form.py
Example:
forms.py
class NameForm(forms.ModelForm):
class Meta:
model = MyModel
fields = [
"whatever"
]
Html Template
<form method="POST">{% csrf_token %}
<input type="text" name="whatever" placeholder="Write whatever">
</form>
There are two approach I normally use:
Install widget tweaks, so you can customize your input easily:
{% load widget_tweaks %}
{{ form.Name|add_class:"css_class"|attr:"placeholder:Name of book" }}
Or 2, in your forms.py, set all the attributes you want for the field:
Name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Name of book'}))
You can do this by giving the name of your input element same as the name of your form field. And you can get name of your form field by displaying {{ form }} in html and then inspecting the form field in your browser and then the name attribute of that field will be name of the form field.
In Html forms i can do this as like :
<input type="hidden" name="token" value="{{ $token }}">
I would like to do this in full blade templating like this :
{{ Form::hidden('token', $token, array('class' => 'form-control')) }}
But the second option doesn't pass the $token value. Where do i go wrong ?
-- UPDATE --
I have found the solution for this :
It is quite easy question, but had to be careful while naming the inputs in blade templating.
This is my first form, which is working nice :
<form action="{{ action('RemindersController#postReset') }}" method="POST">
<input type="hidden" name="token" value="{{ $token }}">
Email<input type="email" name="email">
Password<input type="password" name="password">
Password<input type="password" name="password_confirmation">
<input type="submit" value="Reset Password">
</form>
**In blade templating form it was like **
{{ Form::open(array('action' => 'RemindersController#postReset')) }}
{{ Form::hidden('token', $token , array('class' => 'form-control')) }}
{{ Form::email('email', null, array('class'=>'form-control input-sm','placeholder'=>'Mail address')) }}
{{ Form::password('pass', array('class'=>'form-control input-sm','placeholder'=>'New Password')) }}
{{ Form::password('pass_conf', array('class'=>'form-control input-sm','placeholder'=>'Confirm Password')) }}
{{ Form::submit('Submit', array('class'=>'btn btn-info btn-block')) }}
{{ Form::close() }}
--SOLUTION--
So the error is :
In 1st form,
Password<input type="password" name="password">
Password<input type="password" name="password_confirmation">
In 2nd form,
{{ Form::password('pass', array('class'=>'form-control
input-sm','placeholder'=>'New Password')) }}
{{Form::password('pass_conf', array('class'=>'form-control
input-sm','placeholder'=>'Confirm Password')) }}
input names are password and password_confirmation, and in the second form they are named pass and pass_conf.
I changed pass to password and pass_conf to password_confirmation and it's now working fine.
Thank you for your feedbacks and patience.
It's just a guess but you can try to put also static value:
{{ Form::hidden('token', 'some token here', array('class' => 'form-control')) }}
and now check if it is in page source.
If it's not it means that you probably redirect to form using withInput and then Larravel fills the form with the same data as previous even if you set value manually to any HTML form element.
In this case you could make redirection using:
->withInput(Input::except('token'));
If it's the case you can read more about it in this topic: Laravel redirection using withInput doesn't allow to change inputs values
EDIT
You should try to change:
return Redirect::back()->with('error', Lang::get($response));
into:
return Redirect::back()->with(array ('error', 'token'), array(Lang::get($response), Input::get('token'));
I am trying to incorporate tabindex on my form to give users freedom for not using the mouse. The problem is that I am using Twig (http://www.twig-project.org/) to create the form template for the page. How do I set the attribute of a twig-generated form input element?
<div class="LeftSide">
<div class="Wrapper">
{{ form_label(mehForm.amount, "Amount") }}
</div>
</div>
<div class="RightSide">
<div class="Wrapper Tiny">
{{ form_widget(mehForm.amount) }}
<label class="ErrorContainer"></label>
<div class="clear"></div>
</div>
</div>
When rendered, the line of {{ form_widget(mehForm.amount) }} will get changed by Twig into:
<input type="text" id="meh_amount" name="meh[amount]" required="required" value="">
The goal is to command Twig to add one more attribute which is tabindex:
<input type="text" id="meh_amount" name="meh[amount]" required="required" tabindex=1 value="">
Thank you
It's been a while since you asked the question, but since it was the top site on Google when I searched for something similar, figure I'd answer the question so other's have the answer.
Since you're already using the form_widget() function to generate the widget, you can easily just add the tabindex by setting the attr option like so:
{{ form_widget(mehForm.amount, { 'attr': {'tabindex': '1'} }) }}