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'} }) }}
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
So i'm getting this error on my mvc project while working on my form.
The error indicates that I haven't closed the form tag properly.
However, as you'll see below, I have closed it properly.
<form method="post">
//form content below
</form>
I have added taghelpers in my ViewImports.cshtml file as you can see below.
#using ServiceWebsite
#using ServiceWebsite.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
May you have an unclosed quotation.
The same problem happened to me because I haven't closed " in readonly="readonly
<form class="form customized-bg-color" asp-action="Create" method="post">
<div class="col-lg-3 ">
<input type="text" class="form-control " id="Total" readonly="readonly />
</div>
</form>
I was facing the same problem but I have solve it with the following :
Either using pure html form
Or inject Helper tags into the form like so
#using (Html.BeginForm("Login", "Main", FormMethod.Post))
{
<form>
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#if (#ViewBag.Message != null)
{
<div style="border: 1px solid red">
#ViewBag.Message
</div>
}
<div class="mb-3">
<label class="form-label">#Html.LabelFor(UserBindingModel => UserBindingModel.UserName) </label>
</div>
}
Save it and it will disappear.
I used this website as a reference.
Another example of functional form:
#model UserBindingModel
#{
ViewBag.Title = "Login";
}
<form asp-action="Login">
<div class="mb-3">
<label asp-for="UserName" class="form-label"></label>
<input type="text" class="form-control" asp-for="UserName">
</div>
<div class="mb-3">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control">
</div>
</form>
I think you should check the href attribute of Your stylesheets and images.
I also hit this "error", VS 2022 .Net 6 project, also with a well-formed, uh, form :) I removed the form tag & closing tag, rebuilt the project, then added them back in. Built just fine, issue did not reoccur. Depending on what you are trying to to, I'd try that before doing any major code changes...
the Form tag and its closing SHOULD be IN its container if it has one, I had the same problem.
your form tag should Not be Like this
<div>
<form>
</div>
</form>
Correct:
<div>
<form>
</form>
</div>
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
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" />'
I am trying to change a value in db that is controlled via a checkbox, if a review for the item exist already i am populating the fields with it . Currently I have a hidden field and then a jQuery Mobile checkbox controlling this:
models.py:
fave = models.BooleanField()
ModelForms face Class:
'fave': HiddenInput(attrs={'value' : 'False'}),
and my review form:
{% if review.fave == 'True' %}
<div class="ui-block-c">
<input type="checkbox" name="fave" id="checkbox-1" class="custom" checked="checked"/>
<label for="checkbox-1">fave</label>
</div>
{% else %}
<div class="ui-block-c">
<input type="checkbox" name="fave" id="checkbox-1" class="custom" />
<label for="checkbox-1">fave</label>
</div>
{% endif %}
The hidden field is rendered to the browser as such:
<input type="hidden" name="fave" value="True" id="id_fave">
While I could make the checkbox a non-hidden field, the task make it fit the way its supposed to with django and jQuery Mobile looks daunting.
Several posts listed solutions:
Setting the value of a hidden input
, but nothing seems to work the way I want. I cannot seem to override the value = True.
Is there something simple I am missing? Am I going about it all wrong?
Try using
'fave': CheckboxInput(attrs={'style':'display:none'})