Django Forms Widget | Complete Discussion | Django Tutorials

Django Forms Widget copy
Django Django Tutorials

Django Forms Widget | Complete Discussion | Django Tutorials

Complete Discussion on Django Forms Widget | Django Tutorials

Django is a web framework that has more powerful features to develop a more functional web application. We have learned different topics related to Django in our Django tutorials series, today we have to learn about Django Forms Widget. Widget is the simple and easy-to-use small software that performs a specific function. Its uses with other software to enhance software functionality. In Django, we also have different widget forms that have HTML input fields functionalities to enhance Django form functionalities. So in this tutorial, we will discuss in detail with examples to show you a proper concept.

What is Django Form | Django Forms Widget?

Basically, a Form is the collection of different fields like name, email, password, gender, etc. In which the user enters his/her details and submits to send server for next processing. Django provides a Form API, using that we can develop a good form to collect data from users easily.
You can read complete tutorials on Django Form.

What is Django Forms Widget?

A widget is Django’s representation of an HTML input element. It means it will help the framework, that how HTML input should be display to the user. There are different types of widgets you can use to add input fields with your default input field in Django form fields like textarea, SelectDateWidget, TextInput, PasswordInput, etc.
It renders the HTML input fields as we set and also extracts form data when the user submits the form through GET/POST methods in dictionary type.
class StudentForm(forms.ModelForm):
    class Meta:
        model = Student
        fields = [‘std_name’, ’email’,’pwd’]
        widgets = {
            ‘std_name’: forms.TextInput(),
            ’email’: forms.EmailInput(),
The above lines of code demonstrate the use of widgets. Here, we used two widgets TextInput and EmailInput in which users will enter text-based text, and email type data respectively.  We have overridden the default widget. It is not enough, but we can also enhance HTML attribute using attr attribute in the widget as:
       widgets = {
            ‘std_name’: forms.TextInput(),
            ’email’: forms.EmailInput(attrs={‘class’:’form-control’ ‘id’:’example1′}),
So. here we can give any CSS class to a specific field. It is more beneficial when we want to make any function using Javascript on the Form field. Then we target any field through its class or id value. There are different modifications, we can apply according to our requirements.
When we use any widget in the Django Forms Widget, the Django converts it into HTML attributes in the backend, we don’t know. In the above example, as we used TextInput and EmailInput, in this case, our HTML will be, as I shared below:
For TextInput:     <input type=”text” …/>
For EmailInput:  <input type=”email” …/>

Others Django Forms Widget List

  • CheckboxInput: In which you will select multiple options as you want.
  • NullBooleanSelect: In which you can select one of them boolean base as Yes or No.
  • TextInput: You can enter text-based data.
  • EmailInput: The data type you enter, should be the email type of data including @ symbol.
  • URLinput: You will need to enter URL type data including HTTP, www
  • Select: It also allows to select multiple selections of items
  • ClearableFileInput: it render the HTML code <input type=”file” …> which allow the user to insert file. To clear the fields input, it provides a checkbox input also
  • DateInput: In this widget user able to select the date
  • DateTimeInput: You can select date and time also.
  • NumberInput: It is related to the number field, you can enter numbers 0 to 9.
  • SelectMultiple: Name indicates, this widget accepts multiple selections of items


We have discussed Django Forms Widget, you have understood I sure. It is a very beneficial tutorial for you if you want to work on Django properly because the Forms widget will need you to form designing or development because clients and industries requirements want such.

If you have any questions in your mind while reading out the tutorial, then must share them with us. We will provide you the best solution possible.

If you use Facebook, Twitter, Pinterest, LinkedIn, or other social media platforms, then share this Django tutorial, if you share, more students will take the chance to learn.

Recommended Django tutorial for Beginners

Django Form | Render Form Field Manually | Django Tutorials

Complete Built-in Django Form Fields with Examples | Django Tutorials

Create Django Form with CSRF Token | Django Tutorials

Complete Tutorials on Django ModelForm

Leave your thought here

Your email address will not be published. Required fields are marked *

Recent Comments

  1. Push it to the limit cool Wolf! You are the best and you can do everything! It'll all work out very very very soon! smkmkplobydlmcrjmzgvx 2396134 on Django Create superuser | Django Tutorial
  2. Thank you For your hard work over the years! For this, we give you the opportunity. For more information, see the instructions. skfhjvkjsdjsrbhvbsrfhkis 9357930 on Django Create superuser | Django Tutorial
  3. Thank you For your hard work over the years! For this, we give you the opportunity. For more information, see the instructions. skfhjvkjsdjsrbhvbsrfhkis 5948210 on Django Create superuser | Django Tutorial
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
Click outside to hide the comparison bar

Get your Enrollment


Leave your details below and receive a discount coupon in your inbox