I have used django allauth for user registration and login system. I could show the form by simplifying the lines of code using for loop. I got the right field type(TextInput and PasswordInput) for each field too. However the password field which has PasswordInput shows password in plain text. How can i resolve this?
my signup page(account/signup.html)
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="form-group">
<label for="{{ field.id_for_label}}">{{field.label}}</label>
{{ field.errors.0 }}
<input type="{{field|input_type}}" name="{{ field.name }}" class="form-control" id="{{ field.id_for_label}}">
</div>
{% endfor %}
</form>
filters.py
from django import template
register = template.Library()
#register.filter('input_type')
def input_type(field):
print('field',field.field.widget.__class__)
return field.field.widget.__class__.__name__
How can i show password in dot?
You can add class by overriding __init__ method in form class
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['password'].widget.attrs['class'] = 'form-control'
The password is showing in plain text because you're assigning <input> types incorrectly, therefore not hiding passwords as <input type="password"> does.
From reading the comments, it looks like you're trying to add custom bootstrap classes to the form fields. As Anna Vracheva was saying, you can add the class to the fields using the form's __init__ method.
from django import forms
class CustomForm("""Whichever class you're inheriting from, probably ModelForm"""):
# If you're using AllAuth, this is already defined on the form
password = fields.CharField(widget=forms.PasswordInput)
# Or whatever field, for that matter
def __init__(self, *args, **kwargs):
super(CustomFieldForm, self).__init__(*args, **kwargs)
# Option 1 - Assign to only password
self.fields['password'].widget['class'] = 'form-control'
# Option 2 - Loop over all fields and assign to all
for field in self.fields:
field.widget['class'] = 'form-control'
Then, instead of manually rendering HTML, let Django's Templates do that:
<!-- This -->
{{ field }}
<-- -->
<!-- Instead of this -->
<input type="{{field|input_type}}" name="{{ field.name }}"
class="form-control" id="{{ field.id_for_label}}">
That should fix any field rendering problems you're having while preserving your form classes.
You can also try this:
<input class="form-control" type="{{ field.field.widget.input_type }}"
name="{{ field.name }}"
id="id_{{ field.name }}" >
Related
I have a Django form that I have created manually in order to keep the format of the styling, but I realized that the form is compromised of several inputs and manually is taking too long to change each.
I am also able to generate the form automatically using {{ form.as_p }} but I lose the HTML style format that I have below. Is there an easy way to make it instead of manually changing each input?
This is the original HTML template that I am trying to keep
</button>
<div class="form-outline mb-4">
<input
type="text"
id="businessName"
class="form-control"
name="businessName"
/>
<label class="form-label" for="typeText"
>Legal Business Name</label>
</div>
Here is the working Django form:
{% if submitted %}
Your forms has been submitted
{% else %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<!-- Submit button -->
<button
type="submit"
class="btn btn-primary btn-block mb-4"
id="btn"
>
Submit
</button>
</form>
Here is the views.py
def add_form(request):
submitted=False
if request.method == 'POST':
form = infoForm(request.POST)
if form.is_valid():
form.save()
return HttpResponseRedirect('/?submitted=True')
else:
form = infoForm()
if 'submitted' in request.GET:
submitted=True
return render(request, 'template/template.html',{'form':form, 'submitted':submitted})
Here is the form
class infoForm(ModelForm):
class Meta:
model = Info
fields = ['businessName']
Here is what I have tried:
<div class="form-outline mb-4">
<input type="text" class="form-control" name="businessName" {% if form.is_bound %}value="{{ form.businessName.value }}"{% endif %}>
<label class="form-label">Legal Business Name</label>
</div>
{% for err in form.businessName.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
My Question:
How to keep the same HTML styling while making it easy by using {{ form.as_p }}?
What is the required input for attributes in this case?
This will be the quickest way to apply custom styling to the django forms so that you let the django take care of processing the form while still using your preferred css styling...
Taken from my answer to: How to markup form fields with in Django
class MyForm(forms.Form):
myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'}))
or
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['myfield'].widget.attrs.update({'class': 'myfieldclass'})
or
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}
originally answered
EDIT 1 : Adding Label styling
1 set the class by the above mentioned method
eg:
self.fields['some_field'].widget.attrs.update({'class': 'some_class'})`
2 Select the label of that class and style them
.that_some_class label{
font-size: large;
}
It is possible to change the style of form in the view?
I found in documentation this code:
<form action="/contact/" method="post">
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.subject.errors }}
<label for="id_subject">Email subject:</label>
{{ form.subject }}
</div>
<div class="fieldWrapper">
{{ form.message.errors }}
<label for="id_message">Your message:</label>
{{ form.message }}
</div>
<div class="fieldWrapper">
{{ form.sender.errors }}
<label for="id_sender">Your email address:</label>
{{ form.sender }}
</div>
<div class="fieldWrapper">
{{ form.cc_myself.errors }}
<label for="id_cc_myself">CC yourself?</label>
{{ form.cc_myself }}
</div>
<p><input type="submit" value="Send message" /></p>
</form>
But it just put a ugly input. I want to apply a class, or a css in this input. Is it possible?
This is my form:
class LoginView(NextUrlMixin, RequestFormAttachMixin, FormView):
form_class = LoginForm
success_url = '/'
template_name = 'accounts/login.html'
default_next = '/'
class LoginForm(forms.Form):
email = forms.EmailField(label='Email')
password = forms.CharField(widget=forms.PasswordInput)
If you are use a custom css set the class CSS on the forms example:
email = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'customClass', 'required':'required'})
in this case set a customClass if you are using Bootstrap maybe you can use someone like this:
email = forms.EmailField(label='Email')
email.widget.attrs.update({'class':'form-control', 'required':'required'})
this code is on your forms.pyp .. good luck
don't forget load your css file on your template
You can do so by applying some attributes to the widget that you use:
more info can be found here Official Django Documentation
for instance:
email = forms.EmailField(label='Email',
widget=forms.TextInput(attrs={'class':'class_value','placeholder':"Email here"}))
If you want to have the full control of the form html by keeping the same behavior as the one generated by django, the following will work
<input type="email" name="email" id="id_email" value="{{form.email.value}}" class='class_name' attrs='attrs' >
{{ form.email.errors}} <!-- track errors for this field -->
Yes. You can attach a css file to your form (place a {{ form.media }} in your template) with this:
class LoginForm(forms.Form):
email = forms.EmailField(label='Email')
password = forms.CharField(widget=forms.PasswordInput)
class Media:
css = {
'all': ('login-form-layout.css',)
}
js = (
'https://some-cdn.com/some-framework.js'
'login-form-script.js',
)
Inputs have an ID like id_fiedname so login-form-layout.css can be something like:
#id_email, #id_password {
width: 200px;
}
You can do a lot with CSS and with javascript there are endless possibilities.
You may want to check "Customizing widget instances" at the official Django documentation. For example, you can attach arbitrary attributes to the input tag using the attrs argument:
email = forms.EmailField(
label='Email',
widget=forms.TextInput(attrs{
'class': 'my-super-special-input',
'placeholder': "mailbox#example.com"
}),
)
There are other possibilities there, so check it out.
Use Django widget_tweaks. It’s real convenient. And you can easily change any attribute you want.
{% load widget_tweaks %}
{% render_field form.field class=“your-class” %}
I've been trying to follow tutorials and other SO questions and have a modelformset_factory that's displaying a list of what looks like forms in the html, but it turns out they're not actual forms.
html that gets displayed:
<div ='container'>
<div class='row'><tr><th><label for="id_form-0-config_key">Config key:</label></th><td><input id="id_form-0-config_key" maxlength="63" name="form-0-config_key" type="text" value="ClientMustVerify" /></td></tr>
<tr><th><label for="id_form-0-config_value">Config value:</label></th><td><input id="id_form-0-config_value" maxlength="63" name="form-0-config_value" type="text" value="TRUE" /><input id="id_form-0-id" name="form-0-id" type="hidden" value="3" /></td></tr> <input type="submit" value="Update" /></div>
<div class='row'><tr><th><label for="id_form-1-config_key">Config key:</label></th><td><input id="id_form-1-config_key" maxlength="63" name="form-1-config_key" type="text" value="Auditing" /></td></tr>
<tr><th><label for="id_form-1-config_value">Config value:</label></th><td><input id="id_form-1-config_value" maxlength="63" name="form-1-config_value" type="text" value="FALSE" /><input id="id_form-1-id" name="form-1-id" type="hidden" value="4" /></td></tr> <input type="submit" value="Update" /></div>
<div>
notice there is no form tag anywhere. working backwards, here's the excerpt from the template:
<div ='container'>
{% for form in formset %}
<div class='row'>{{form}} <input type="submit" value="Update" /></div>
{% endfor %}
<div>
yes, I added the submit button manually hoping to get these to work, but of course if there isn't a form tag, then the submit button won't do anything.
views.py:
from limbo.models import serverConfig
from django.forms import modelformset_factory
from django.forms import formset_factory
def editServer(request):
result = serverConfig.objects.values()
myConfigs = [entry for entry in result]
finalFormSet = modelformset_factory(serverConfig, exclude=('id',), extra=0)
#other lines
return render(request, 'limboHtml/ServerConfiguration.html', {'formset': finalFormSet, 'SubmitMessage': '', 'CurrentConfigs': myConfigs})
forms.py:
class serverForm(ModelForm):
class Meta:
model = serverConfig
fields = ['config_key', 'config_value']
def __init__(self, *args, **kwargs):
super(serverForm, self).__init__(*args, **kwargs)
instance = getattr(self, 'instance', None)
if instance and instance.pk:
self.fields['config_key'].widget.attrs['readonly'] = True
self.fields['config_key'].widget.attrs['disabled'] = True
and models.py:
class serverConfig(models.Model):
config_key = models.CharField(max_length=63)
config_value = models.CharField(max_length=63)
I tried using finalFormSet = formset_factory(serverForm, extra=0) at one point, but then I just got no content in the html...
As described in the formset documention you must add the form tag manually. This is not very different from what you do when displaying a single form.
It appears that you are iterating through the formset and displayig them one by one. That means you must also add the management form
<form method="post" action="">
{{ formset.management_form }}
<div ='container'>
{% for form in formset %}
<div class='row'>{{form}} <input type="submit" value="Update" /></div>
{% endfor %}
<div>
</form>
Or you will get errors about a missing or misconfigured management form.
Note that it does not include the tags, or a submit button. We’ll have to provide those ourselves in the template.
Read more: Working with Forms: Building a form in Django
The reason you are not getting the <form> tag is because from a logical point of view a form validation can be handled anywhere in your application. That's why you need to specify the form tag explicitly with the target url (good to use reverse(view_name)), method and other parameters.
I'm dealing creating a template on Django to show a list of items with 2 buttons that make actions.
My form class it's:
class AppsForm(forms.Form):
def __init__(self, *args, **kwargs):
policiesList = kwargs.pop('policiesList', None)
applicationList = kwargs.pop('applicationList', None)
EC2nodesList = kwargs.pop('amazonNodesList', None)
super(AppsForm, self).__init__(*args, **kwargs)
self.fields['appsPolicyId'] = forms.ChoiceField(label='Application Policy', choices=policiesList)
self.fields['appsId'] = forms.ChoiceField(label='Application', choices=applicationList)
self.fields['ec2Nodes'] = forms.ChoiceField(label='Amazon EC2 Nodes', choices=EC2nodesList)
Now, I do the form with:
<form method="post" action="" class="form-inline" role="form">
<div class="form-group">
{% for field in form %}
{ field.label }}: {{ field}}
{% endfor %}
</div>
{% csrf_token %}
<input type="submit" class="btn btn-default btn-success" name="deployButton" value="Deploy"/>
<input type="submit" class="btn btn-default btn-danger" name="undeployButton" value="Undeploy"/>
And the result it's:
Application Policy - Choicefield ; Application - Choicefield ; Amazon EC2 Nodes - Choicefield [Button Deploy] [Button Undeploy]
And what I'm looking for it's a way to render the form and show the list like this:
Application Policy - Choicefield ; Application - Choicefield [Button Deploy] [Button Undeploy]
Amazon EC2 Nodes - Choicefield [Button Deploy] [Button Undeploy]
<more items if I add them in forms.py...>
How I can get the proper way to render like that?
Thanks and regards.
You just need to change the code a bit is all:
{% for field in form %}
{ field.label }}: {{ field}}
<input type="submit" class="btn btn-default btn-success" name="deployButton" value="Deploy"/>
<input type="submit" class="btn btn-default btn-danger" name="undeployButton" value="Undeploy"/>
<br />
{% endfor %}
So this will create a new line for each of the field.label and field variables with their own button. One thing to caution against though, if you try and assign ID's to the buttons they will have to be different or you'll get errors. Also, submission may be a bit weird with code such as this but it depends on the rest of your application. Either way, this will give you the desired format.
I'm working on a model formset for a Membership model (models auth.User membership to app.Project). Here's app/forms.py, after I trimming things I have confirmed to be irrelevant after commenting them out:
class EditMembership(forms.ModelForm):
delete = forms.BooleanField(required=False, initial=False)
class Meta:
model = models.Membership
fields = ('is_owner',)
def clean_delete(self):
return self.cleaned_data['delete']
class BaseEditMemberships(forms.models.BaseModelFormSet):
# Some custom methods not dealing with validation.
pass
EditMembershipSet = forms.models.modelformset_factory(models.Membership,
form=EditMembership, extra=0, formset=BaseEditMemberships)
Here is my template:
<form method="{{ method|default:"post" }}" action="{{ action }}">
{% csrf_token %}
<ul>
{% for form in formset %}
<li>{{ form.instance.user}}</li>
{{ form.as_ul }}
{% endfor %}
</ul>
<input type="submit" value="{{ submit_value|default:"Submit" }}" />
</form>
And my view:
#ownership_required(message="You must be an owner to edit memberships.")
def edit_memberships(request, pk):
project = get_object_or_404(models.Project, pk=pk)
if request.method == "GET":
formset = forms.EditMembershipSet(
queryset=project.membership_set.all()
)
return render_formset_fullpage(request, formset, "Edit Memberships",
template=forms.EDITMEMBERSHIPS_PATH)
elif request.method == "POST":
formset = forms.EditMembershipSet(request.POST)
return HttpResponse("Hooray!")
And the model in question:
class Membership(models.Model):
class Meta:
unique_together = ('project', 'user')
project = models.ForeignKey('common.Project', editable=False)
user = models.ForeignKey('auth.User')
is_owner = models.BooleanField(default=False, blank=False,
help_text="Indicates ownership of the project")
project_alias = models.CharField(max_length=CHARFIELD_SHORT,
help_text="User-given name", blank=True)
The problem is I keep getting a ValidationError back after doing the POST:
ValidationError at /project/4/memberships
[u'ManagementForm data is missing or has been tampered with']
From what I can tell, forms.EditMembership is doing OK. I can render that form and recreate it from the POST with no validation error, so I guess it is something wrong with the way I am using BaseEditMemberships/EditMembershipSet.
EDIT:
Just to give you even more information, here are an example form which is generated and the POST vars for one of my test requests. The form:
<form method="post" action="">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='d6d535efd35e83076e1ac14a82ef4cdc' /></div>
<ul>
<li>someuser</li>
<li><label for="id_form-0-is_owner">Is owner:</label>
<input checked="checked" type="checkbox" name="form-0-is_owner" id="id_form-0-is_owner" />
</li>
<li><label for="id_form-0-delete">Delete:</label>
<input type="checkbox" name="form-0-delete" id="id_form-0-delete" />
<input type="hidden" name="form-0-id" value="8" id="id_form-0-id" />
</li>
</ul>
<input type="submit" value="Submit" />
</form>
Corresponding POST vars if I check the delete box:
form-0-id: u'8'
csrfmiddlewaretoken: u'd6d535efd35e83076e1ac14a82ef4cdc'
form-0-delete: u'on'
form-0-is_owner: u'on'
You need to include {{ formset.management_form }} in your template. See Django's formset documentation on rendering templates for formsets.