What are the ways to styling a Django Form? - django

I was working with Django forms, and to beautify the Django forms I came across widgets, and after learning it got to know that we can customize widgets in two ways:
Using widget instance or
Using widget class.
Later came across django-crispy and django-bootstrap that allow same beautification of the forms along with various other advantages over other.
But I was wondering, how many more such library / packages / apps are there, and is there any short of description for each, which might help me and others too.
Thanks

For simple design or not any extra validation in frontend bootstrap or crispy form is okay.
But if you want to take advantages of custom css js then widget is better option obviously.
I generally do:
create a form using css, js even if in bootstrap
Then pass the classes or id of the particular field in widget

Related

Is there an alternative to Django crispy form for rendering Django form?

Since I started to develop Django apps one year ago, I've use Django crispy form for rendering my forms.
For my new project, I want to change form rendering to look more like a 'desktop application'. This project will be a electronic data capture tool, with many forms with lots of fields.
I have found this design on Codepen by Rijdzuan Sampoerna I found very elegant and professionnal. It similar to Gitlab interfaces, I think.
So I would like a form rendering closed to this design.
I want to be able to have multiple fields in a same line (not only one column), with fields smaller,...
Before defining all css by myself, I wonder if there is a django form rendering I could use as crispy?
any suggestions?

How to make editable fields in frontend for Django objects

I need to make objects editable in frontend by clicking on it and enable a form field to edit the text. i.e. in a ToDo-list which tasks can be edited by clicking on the task like shown in the following graphics:
I am working with Django 2.x and unfortunately, I'm a little inexperienced.
Is it a good practice to realize this with REST API and/or Angular/React?
I would be glad about a few experiences, how something is feasible.
I have found a good solution to implement the desired functionality with Jeditable
https://github.com/NicolasCARPi/jquery_jeditable

Twitter bootstrap and crispy forms confusion

I decided that I wanted to use twitter bootstrap for a potential website I want to make. However, I am still learning web development. I was wondering if someone could give me and explanation of what Crispy forms has to offer. I've been reading and I believe that it has twitter bootstrap embedded in it? I was wondering which would be a better choice to pick. This might be a bad question to ask but I'm quite confused. Are there pros and cons to picking either?
Twitter bootstrap is something completely different than crispy-forms:
Twitter bootstrap is a CSS and Javascript presentation framework. You can use it to generate your html pages from any framework, not just Django! You can use it to define how your html will be layout in a grid and also it has styles for a number of html components.
Crispy-forms is a Django application that can be used to create better layouts for forms. What it does is that you can define programatically how you want your form to be rendered (instead of doing it in the template with html). You should use it if you want to have really nice looking forms without too much hassle.
The only relation between the two is that crispy-forms actually can render your form using bootstrap layout, meaning that the styles and classes etc of your rendered html form will be following the concepts of the bootstrap framework. I am copying from here http://django-crispy-forms.readthedocs.org/en/latest/install.html#template-packs:
Since version 1.1.0 of django-crispy-forms has built-in support for different CSS frameworks, known as template packs within django-crispy-forms:
* bootstrap Bootstrap is crispy-forms’s default template pack, version 2 of the popular simple and flexible HTML, CSS, and Javascript for user interfaces from Twitter.
* bootstrap3 Twitter Bootstrap version 3.
* uni-form Uni-form is a nice looking, well structured, highly customizable, accessible and usable forms.
* foundation Foundation In creators words “The most advanced responsive front-end framework in the world”. This template pack is externally available through crispy-forms-foundation
So crispy-forms can use a bootstrap mode to render your forms -- but you have to be already using bootstrap in your django templates for this to appear properly!

How to render Django forms.ChoiceField as Twitter Bootstrap dropdown

What is the most efficient way (in terms of programming/maintenance effort, elegance) to render a Django forms.ChoiceField as a Twitter Bootstrap dropdown using one of the django-bootstrap, django-bootstrap-form, django-bootstrap-toolkit, django-crispy-forms, etc apps? Is there explicit support for this use case in any of these apps?
Disclaimer I'm the lead developer of <a href="https://github.com/maraujop/django-crispy-forms/"django-crispy-forms (one of the apps mentioned).
I will try to explain how you do this with django-crispy-forms. You simply do in your template:
{% load crispy_forms_tags %}
{{ form|crispy }}
You can see this and more in django-crispy-forms docs. Your ChoiceField will be rendered as Bootstrap dropdown as you want.
Compared to django-bootstrap
First, a little bit of history. django-bootstrap was born after django-uni-form (the parent project from which django-crispy-forms evolved). At that time, django-uni-form was already doing Boostrap forms, but probably not in the best possible way (Bootstrap was supported by using an aditional contrib application). Thus, the author of django-bootstrap probably decided to go on its own.
Now, regarding Bootstrap support. django-bootstrap can also render forms but, instead of using a Django filter, it changes the base class of your form. So django-crispy-forms affects your templates while django-bootstrap affects your Python code.
Also, both django-crispy-forms and django-bootstrap let you do layouts. In django-bootstrap, layouts are in a Meta class within the form while in django-crispy-forms the layouts live in a subclass of FormHelper, which gives you decoupling.
django-bootstrap uses a tuple for defining a layout, while crispy-forms uses a subclass of Layout. This adds the possibility to reuse layouts, compose layouts easily, etc. Note that although crispy's encapsulation still has a list of fields inside, it adds a helpful and human-friendly API to programmatically manipulate the layout and I think enforces a good decoupling pattern.
From what I can see, layouts in crispy-forms are more powerful. It has a larger layout object collection, for example, prepended text, appended text, daterange and others are already supported while in django-boostrap these are in the TODO list.
crispy-forms has also an API for modifying layouts on the go and doing some hardcore programmatic layout building which is very nice.
crispy-forms also supports formsets of all kinds. It supports different CSS template packs, which means that if in the future the new kicking CSS pack is named 'chocolate', it will be very easy to create a new template pack for it and all your forms will be able to be rendered with 'chocolate' without code changes, just a simple setting variable.
crispy-forms also has attributes you can set in FormHelper that define nice extra functionaly you can easily turn on and off. You can also create your own custom attributes if you want.
Finally, django-crispy-forms (together with django-uni-form) has more than 67.000 downloads, which is quite good for a Django application. The project has almost 500 followers in Github, several big users, good testing coverage and several years of history and it's still actively maintained.
Compared to django-bootstrap-form
From what I can see django-bootstrap-form is only a filter for rendering a form with Bootstrap. That is something django-crispy-form covers while offering much, much more. The project was released on 21st August 2012 and looks to me like it's reinventing the wheel because several other apps cover already this use case.
Compared to django-bootstrap-toolkit
It's inspired by django-boostrap-form. From what I see in the docs, it also gives you a filter for rendering a form with Bootstrap. It apparently covers more Bootstrap stuff than forms, but I can't find more info in its docs. Last commit was 2 months ago.
I will insist that I'm obviously not the right person for a comparison that is not biased. That's why I've never written about this before. I could have published a blog post about this several times but I always dismissed the idea. However, as the fragmentation of form apps (and bootstrap-support apps) is growing, I thought this might be a good time to write down what I think.

Django - When to use Forms and Best Practices

Please share your thoughts abouts the following
When to use Django Forms to produce the HTML fields
When to avoid it and use the plain HTML
Any other tips and best practices
I use django forms or maybe another forms helper if I need something specific in every case, no matter what. I never compose forms using plain-old html.
Many aspects of form processing are not related to presentation. What kind of information needs to be collected and how to validate that certainly falls outside of the domain of presentation. Using a forms helper can help to unify all of this work in a pretty convenient way.
The fact that a forms helper can also render html is sort of coincidental to it's use. Certainly, if that's all they did, they wouldn't be worth much, but since they do all of that and stay in sync with the needs of the business logic, it somewhat requires using the html rendering from the form helper to reap the maximum benefit from the assistance it offers the rest of the app.
When to use Django Forms to produce the HTML fields
Django forms provide HTML forms for models, user-built as well as combination of both. One should be using Django forms most of the times since it considerably reduces the redundant templating effort. The tightly controlled security provided by Django forms along with the strong validation support is worth the effort to use Django forms.
When to avoid it and use the plain HTML
A good use-case to avoid Django forms is when you need to fire javascript events or there is a lot of style deviation from your main stylesheet.
Any other tips and best practices
Derive maximum advantages of the framework by using maximum features of the framework as possible.