Forms can be found at the following places daily:<\/p>\n
1. Conduct a Google search<\/p>\n
2. Facebook status updates and stories<\/p>\n
3. Registrations over the internet<\/p>\n
4. Online Quizzes, Tests, and Other Resources<\/p>\n
There are too many examples to list. Forms have evolved into an important component of online applications.<\/p>\n
They help us organise and send user data over HTTP. They give the user a variety of input choices.<\/p>\n
Prerequisites<\/h4>\n
All prior tutorial topics, including Django Installation and Architecture.<\/p>\n
What exactly is HTTP?<\/h3>\n
HyperText Transfer Protocol is an acronym for HTTP. It is a set of rules that all computers on a network must follow to send data to other computers. This protocol is the foundation for all client\/server designs.<\/p>\n
The transmission of data through HTTP can be done in a variety of ways. GET and POST are the two most popular techniques among all of them.<\/p>\n
1. GET<\/h4>\n
This approach is used for user data that does not affect the website’s state. GET is a URL technique for sending form data.<\/p>\n
The best example is Google search. This method is used to send data that does not modify the database.<\/p>\n
When we wish to bookmark pages, the GET technique comes in useful because our search query is included in the URL.<\/p>\n
The size of the URL usually limits the GET technique. It is not possible to send anything larger than the URL size. We can only send text requests as a result of this.<\/p>\n
2. POST<\/h4>\n
This approach alters the state of the webpage and is used for sensitive data. POST is an HTTP method for sending data as a collective structure. It is delivered by the client as a separate request, similar to cookies, alongside URL requests.<\/p>\n
POST data isn’t the same as a cookie; it’s a separate kind of resource. As this data is not in a URL, this approach is more secure than fetching. The POST method also has a larger size limit, making it possible to upload files.<\/p>\n
On all registration forms and quizzes, this procedure is employed.<\/p>\n
HTML Forms<\/h3>\n
Two key attributes are there for the tag:<\/p>\n
- \n
- \n
Action<\/h4>\n<\/li>\n<\/ul>\n
This attribute indicates where the form data should be submitted. It can be left empty, but the data will be delivered to the same URL in that case. This attribute simply instructs the form to send the data to the appropriate location.<\/p>\n
- \n
- \n
Method<\/h4>\n<\/li>\n<\/ul>\n
The procedure for submitting data is specified by this attribute. For the same, there are POST and GET values. This attribute should be written in all caps.<\/p>\n
Form Handling Process in Django<\/h3>\n
Django form handling employs all of the mechanisms we’ve seen in earlier tutorials (to display data about our models.): the view receives a request, do any necessary actions (reading data from the models is included), and then produces and returns an HTML page (We pass a context containing the data to be shown into a template.)<\/p>\n
What complicates things further is that the server must be able to process data provided by the user and redisplay the page if any problems occur.<\/p>\n
This is a flowchart that displays how Django handles the form requests.<\/p>\n
![\"form](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/01\/form-handling-process-in-django.webp\")
<\/a><\/p>\nAccording to this flowchart, form handling in django does the following:<\/p>\n
1. The default form will be displayed the first time the user requests it.<\/p>\n
- \n
- If you’re establishing a new record, the form may include blank fields or be pre-populated with default values. As it is not coupled with any user-entered data at this point, the form is referred to as unbound (though it may have initial values).<\/li>\n<\/ul>\n
2. Data from a submitted request is received and bound to the form.<\/p>\n
- \n
- When we bind data to a form, we ensure that the user-entered data and any mistakes are available when the form is re-displayed.<\/li>\n<\/ul>\n
3. Validate and clean the data.<\/p>\n
- \n
- Cleaning the data (for example, deleting invalid characters that may send harmful stuff to the server) and turning it to Python types that are consistent.<\/li>\n
- Validation ensures that the values are appropriate for the field (e.g., within the correct date range, not too short or lengthy, and so on).<\/li>\n<\/ul>\n
4. Re-display the form with any user populated values and error warnings for the problem fields if any of the input is incorrect.<\/p>\n
5. Perform required steps if all data is valid.<\/p>\n
6. Redirect the user to another page after all actions are completed.<\/p>\n
Django offers a variety of tools and approaches to aid you in completing the tasks listed above. The Form class is the most basic, as it simplifies both form HTML production and data cleaning and validation. We’ll go through how forms function in the next part, using the example of a website that allows librarians to renew books.<\/p>\n
Django Form Class<\/h3>\n
The Django form class is used to implement forms. Django comes with several built-in jobs, including:<\/p>\n
1. Rendering Form
\n2. Form Validation<\/p>\nThere are many others, but we’ll focus on these two in our guide because they’re the most important.<\/p>\n
Django forms and Django models are extremely similar classes. With forms and associated validations, the Django form class offers a lot of capability. There are numerous built-in forms in this class that you may use to render HTML directly.
\nLet\u2019s follow the below steps to create a Registration form.<\/p>\nStep 1: Enable the virtual environment.<\/h4>\n
You first have to activate your virtual environment before beginning an application.<\/p>\n
Open your PowerShell or Command prompt to enter the following code.<\/p>\n
Follow the code to do the same.<\/p>\n
(Virtual Environment name)\\Scripts\\activate.bat<\/pre>\n
The above code will activate the environment. The next step is to go to the directory you are planning to work with.<\/p>\n
Step 2: Create a new application.<\/h4>\n
In our existing Django Project, we will develop a new application for this course.<\/p>\n
Enter the following in the command line:<\/p>\n
python manage.py startapp (Application_name)<\/pre>\n
In our case, the application name is \u201cRegistrationForm\u201d<\/strong>.<\/p>\n
Now install it in the settings.py file.<\/p>\n
![\"create](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/01\/create-new-app-1.webp\")
<\/a><\/p>\nWith this, our application is successfully installed.<\/p>\n
Step 3: Working with Forms.py file.<\/h4>\n
Create a new python file called forms.py within your RegistrationForm app. You are going to define your form in this file.<\/p>\n
Right-click on the application name. Then click on the \u201cNew File\u201d option and name it \u2018forms.py\u2019<\/strong>.<\/p>\n
Enter the following code in the newly created forms.py file:<\/h4>\n
from django import forms\n\nclass SignUp(forms.Form):\n\nemployee_name = forms.CharField(help_text = 'Employee_name', )\nemail = forms.EmailField(help_text = 'Enter your Email Id', )\nEmp_Department = forms.CharField(help_text = 'Enter your Department', )\nEmp_contact = forms.IntegerField()\npassword = forms.CharField(widget = forms.PasswordInput)\nre_password = forms.CharField(help_text = 'Re-enter your password', widget = forms.PasswordInput)<\/pre>\n
Understanding the code:<\/h4>\n
In line 1, we have imported a Django form class here. We then constructed the SignUp class. It is a subcategory of form. We defined several fields just like models. It’s nearly the same as the model class.
\nThe fields will turn into various forms of input when we make them available in the HTML file. Django has several fields for various input elements.<\/p>\n- \n
- BooleanField<\/li>\n
- CharField<\/li>\n
- ChoiceField<\/li>\n
- DateField<\/li>\n
- DecimalFieldSome common properties can be used to manipulate these fields. These qualities are useful for data validation. They offer a more restricted data selection.<\/li>\n<\/ul>\n
Required:<\/h4>\n
It takes true or false values. It is true, by default, and makes fill in the field mandatory. You can declare it false if you wish to change it.<\/p>\n
Initial:<\/h4>\n
The fields have an initial value such as text boxes that are filled with a certain generic text. This is the first argument.<\/p>\n
Help-text:<\/h4>\n
We apply help-text if you want a few instructions to show that field. This attribute shows the string in which you pass.<\/p>\n
Disabled:<\/h4>\n
We do not want the user to modify particular fields many times. We use the disabled parameter in that instance. It takes Boolean python, true or false. This staticizes the field, i.e. the user cannot alter it.<\/p>\n
Widget:<\/h4>\n
Some fields can replicate different types of input. Like CharField for all text inputs, including passwords. With built-in widgets like PasswordInput, we can use a widget attribute.<\/p>\n
Validators:<\/h4>\n
When we use data validations, this attribute is useful. The validators are built-in and we can also construct custom validators.<\/p>\n
Label:<\/h4>\n
You don’t have to specify it if you want to see the name of your field as the form. The label is shown as a string before the related form field.<\/p>\n
There are many more such attributes, but here the most common ones are discussed.<\/p>\n
The table below lists the most commonly used fields and their descriptions.<\/h3>\n
\n\n
\n Name<\/b><\/td>\n Class<\/b><\/td>\n HTML input<\/b><\/td>\n Value<\/b><\/td>\n<\/tr>\n \n BooleanField<\/span><\/td>\n BooleanField(**kwargs)<\/span><\/td>\n CheckboxInput<\/span><\/td>\n False<\/span><\/td>\n<\/tr>\n \n CharField<\/span><\/td>\n CharField(**kwargs)<\/span><\/td>\n TextInput<\/span><\/td>\n Whatever you specified for\u00a0<\/span><\/p>\n ’empty_value.’<\/span><\/td>\n<\/tr>\n
\n DateTimeField<\/span><\/td>\n DateTimeField(**kwargs)<\/span><\/td>\n DateTimeInput<\/span><\/td>\n None\u00a0<\/span><\/td>\n<\/tr>\n \n DateField<\/span><\/td>\n DateField(**kwargs)<\/span><\/td>\n DateInput<\/span><\/td>\n None<\/span><\/td>\n<\/tr>\n \n ChoiceField<\/span><\/td>\n ChoiceField(**kwargs)<\/span><\/td>\n Select<\/span><\/td>\n \u201c \u201c (empty string).<\/span><\/td>\n<\/tr>\n \n EmailField<\/span><\/td>\n EmailField(**kwargs)<\/span><\/td>\n EmailInput<\/span><\/td>\n \u201c \u201c (empty string).<\/span><\/td>\n<\/tr>\n \n ImageField<\/span><\/td>\n ImageField(**kwargs)<\/span><\/td>\n ClearableFileInput<\/span><\/td>\n None<\/span><\/td>\n<\/tr>\n \n DecimalField<\/span><\/td>\n DecimalField(**kwargs)<\/span><\/td>\n NumberInput<\/span><\/td>\n None<\/span><\/td>\n<\/tr>\n \n FileField<\/span><\/td>\n FileField(**kwargs)<\/span><\/td>\n ClearableFileInput<\/span><\/td>\n None<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Step 4: Working with views.py file:<\/h4>\n
We must now deal with views.py. When passed to HTML, the form will be automatically rendered.<\/p>\n
Add this code in your views.py:<\/h4>\n
from django.shortcuts import render\nfrom . import forms\n\n\ndef EmpRegForm(request):\n\nform = forms.SignUp()\n\nif request.method == 'POST':\nform = forms.SignUp(request.POST)\nhtml = 'You have already filled the form'\n\nelse:\nhtml = 'Welcome to the Signup form'\nreturn render(request, 'signup.html', {'html': html, 'form': form})<\/pre>\nThe Code: An Overview:<\/h4>\n
We declared forms in the above view function the same way we declared models. A new instance of the form class is created. Then we examined which method is being used to receive our form, whether it is the POST method or another.<\/p>\n
This is a critical situation. It will determine whether the user is filling out the form for the first time or has previously completed one. We receive a GET request when a user requests a form for the first time, but a POST request is sent after the user submits data in the form. As a result, we will send the appropriate response.<\/p>\n
Step 5: Configuration of the URL<\/h4>\n
Now we must create a new file in the “RegistrationForm” directory with the name urls.py.<\/p>\n
Add the following code to the urls.py file:<\/h4>\n
from django.urls import path\nfrom .views import *\n\nurlpatterns = [\n\npath('', EmpRegForm, name = 'registration form'),\n\n]<\/pre>\nThen, in your main urls-config file, make the necessary changes.<\/p>\n
Add this to your urlpatterns list:<\/h4>\n
from django.contrib import admin\nfrom django.urls import path\nfrom RegistrationForm import views\n\n\nurlpatterns = [\n\npath('admin\/', admin.site.urls),\n\npath('Registration', views.EmpRegForm),\n]<\/pre>\nStep 6: HTML template creation:<\/h4>\n
Now we can start rendering our forms. Make a new folder called templates in your “RegistrationForm” directory. Make a new file called signup.html in that folder.<\/p>\n
In signup.html, paste the following code:<\/h4>\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nbody{\nbackground-color:olivedrab;\n}\n<\/style>\n<title>TechVidvan Employee Portal<\/title>\n<\/head>\n<body>\n<pre><center>\n<h1>Employee Registration Form<\/h1>\n<h3>TechVidvan Employee Portal<\/h3>\n<h2>{{ html }}<\/h2>\n<form action = '' method=\"post\">\n<!-- Very Important csrf Token -->\n{% csrf_token %}\n<table>\n{{ form.as_table }}\n<\/table>\n<input type=\"submit\" name=\"register\">\n<\/form>\n<\/center><\/pre>\n<\/body>\n<\/html><\/pre>\nWhat does the code say?<\/h3>\n
We have a general HTML file here. The primary difference begins with the <form> tags. The form tag has two attributes: the action, which is blank, indicating that the page’s view function will handle all the answers, and the method, which we have set as a post. If an error occurs, use an uppercase POST value.<\/p>\n
Then we used the letter {%csrf_token%}<\/strong>. This is the first time we’ve used any of Django’s security features.<\/p>\n
Cross-site Request Forgery, or CSRF, is a type of security vulnerability to websites that collect data. Django includes built-in support for this by requiring the use of this token.<\/p>\n
Bots can fill out your website forms if you don’t have a CSRF token. Your web data, on the other hand, may end up on other websites.<\/p>\n
Using a CSRF token avoids this. This field contains a value that is created at random by your server and must match that value when the form is submitted. Other servers will reject that value as well. As a result, web data remains where it belongs.<\/p>\n
Following that, we used tags. We declared {{form.as_table}}<\/strong> inside of that. This is how Django handles form templating. More possibilities are available if we declare this as a paragraph.<\/p>\n
After that, we created a submit button. Our form will be sent after you click this button.<\/p>\n
Now enter the following code in the terminal to run the server:<\/p>\n
python manage.py runserver<\/pre>\n
The final output<\/strong> will look like this:<\/p>\n
![\"final](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/01\/final-output.webp\")
<\/a><\/p>\nValidation of Django Forms:<\/h3>\n
Validation of form data is referred to as form validation. When working with model forms, form validation is essential. We’re converting our form data to Python data types when we validate it. After that, we’ll be able to store them in the database.<\/p>\n
This validation is put in use because it adds a layer of security to our database, ensuring that unethical data cannot harm it.<\/p>\n
NOTE:<\/h3>\n
Several JavaScript Validation methods are easier to use, however, they are not recommended because JavaScript is a client-side scripting language. The data will not be validated if the client browser does not support JavaScript. It also causes significant issues for developers.<\/p>\n
As a result, server-side data validation is always required. On the client-side, however, JavaScript validation is possible.<\/p>\n
Form validation follows the below mentioned ways:<\/p>\n
1. Validation for a Particular Field:<\/h4>\n
This method is put in use when we wish to validate specific fields. At this stage, we must abide by Django rules to declare our methods and other items.<\/p>\n
Add the following lines of code to our forms.py file:<\/h4>\n
#Validation\n\ndef clean_It(self):\n\npassword = self.cleaned_data['password']\n\nif len(password) < 6:\nraise forms.ValidationError(\"Increase the length of the password\")\nreturn password<\/pre>\n
Syntax:<\/strong><\/h4>\n
clean_fieldname()<\/pre>\n
There are a few points to remember:<\/p>\n
- \n
- Then we used self.cleaned_data[\u2018field_name\u2019]<\/strong><\/li>\n<\/ul>\n
This is likewise a field-specific term. This list contains the data from the form that has been cleaned. The data that has been cleaned is now in Python data-type format. It enables us to use Python functions on data stored in a variable.<\/p>\n
- \n
- Following that, we applied some constraints. What’s more significant is that we made an error. It is possible to customise the error messages.<\/li>\n<\/ul>\n
ValidationErrors are Django’s built-in methods and subclasses. They’re also employed in models.<\/p>\n
- \n
- This function should always return the data on which it is operated, regardless of whether the data is changing or not. That data may or may not be altered.<\/li>\n<\/ul>\n
The user can use the following code, however, it is not recommended for professional use. This solution necessitates a lot more code, which goes against Django’s principles. Alternatives exist that are far more efficient.<\/p>\n
This will be the result.<\/strong><\/p>\n
![\"validation](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/01\/validation-for-a-particular-field.webp\")
<\/a><\/p>\n2. Using the is_valid() method:<\/h4>\n
When you need to validate whole form data, you can use is_valid(). Python-data types will be checked throughout this validation. The result of this method is True or False (Python Data Types).<\/p>\n
To demonstrate this, let’s modify our view function a little.<\/p>\n
def EmpRegForm(request):\n\nform = forms.SignUp()\n\nif request.method == 'POST':\nform = forms.SignUp(request.POST)\nhtml = 'You have already filled the form'\n\nif form.is_valid():\nhtml = html + \"The Form is Valid\"\n\nelse:\nhtml = 'Welcome to the Signup Form'\nreturn render(request, 'signup.html', {'html': html, 'form': form})<\/pre>\nWhen we merely want our data to be python type, we commonly use this method. It verifies all of the information. In view functions, we use “is valid()” because it returns True and False values directly.<\/p>\n
- This function should always return the data on which it is operated, regardless of whether the data is changing or not. That data may or may not be altered.<\/li>\n<\/ul>\n
- Following that, we applied some constraints. What’s more significant is that we made an error. It is possible to customise the error messages.<\/li>\n<\/ul>\n
- Then we used self.cleaned_data[\u2018field_name\u2019]<\/strong><\/li>\n<\/ul>\n
- When we bind data to a form, we ensure that the user-entered data and any mistakes are available when the form is re-displayed.<\/li>\n<\/ul>\n
- If you’re establishing a new record, the form may include blank fields or be pre-populated with default values. As it is not coupled with any user-entered data at this point, the form is referred to as unbound (though it may have initial values).<\/li>\n<\/ul>\n
- \n