Django Forms Widget | Complete Discussion | Django Tutorials
June 4, 2021 2022-12-19 6:48Django 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
Conclusion
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
