How to Create a Form in Django Using Plain HTML
In this article, we show how to create a form in Django using plain HTML.
We will demonstrate text inputs but they could really be any type of form element, including radio buttons, checkboxes, text areas, etc.
When you are working with forms in Django, there are 2 approaches you can.
You can work with the Django form class in which you normally would create a forms.py file in your app and then pass the form through to a template and have rendered in the template. That's one approach.
The other approach you can take is just to code the form directly in HTML. If you're very familiar with HTML and you've coding for a long time, perhaps years, in HTML, you may feel more comfortable taking this approach. To be honest, this approach actually gives you more freedom, because you're not restricted to Django's form class rules.
Coding directly in HTML gives you more freedom to customize your form to your liking.
So, this is the approach we take when building a form in this article. We will create directly in HTML. In this next article, we will show how to use Python to extract the data from the HTML form, process it in Python, and give the necessary output needed.
So, we will create a very simple form, asking for the user's first name, last name, city, and state.
We'll quickly show how to build this file in an HTML template.
We'll create a template userinformation.html, and this will contain
the above mentioned form.
Template File
So, below is the code to create the HTML form in a template file that
we can use with Django.
So this is the HTML form that we've template file that we've created.
It's an HTML template file.
The first part declaring the document HTML and the title tag, along with some meta data.
We then go to the body, which is our main code.
In this body, we create our form. Since, we want the data sent back to this page, we leave the attribute tag empty. We make the method equal to POST because we are posting the data to the page, instead of attaching the data to a URL which would be done with the GET method.
Django is very strict about form security, so whenever you create a form in Django, always insert the line, {% csrf_token %}. This protects your site against cross site request forgery.
We then the text inputs of our forms. So we have first name, last name, city, and state text inputs.
So it's created perfectly in HTML. The only difference is in the value attribute. Because you normally would want a form to retain whatever a user has typed into it, which is especially the case if you're staying on the same page, you want to set the value of the text input equal to whatever the user has entered in.
First, when the page loads, we want to make sure that the fields aren't displaying any values, which would be None, when the page is first loaded. To prevent this, we check whether the submit button has been clicked. If it hasn't been clicked, we don't display the value. Once it has been clicked, we then display the value. So, that explains all of the if statements in the value attribute.
After we've hardcoded all 4 text inputs, then we create the submit button underneath, a standard submit button.
We then close the form.
I then created custom code so that when the submit button is clicked, then we simply output whatever the user has entered.
So, that's all that needs to be done in the template file.
We'll now show how to retrieve data from the text inputs from the views.py file.
Retrieving Data in the Views.py File
So now that we have the form created in hard-coded HTML, we need to retrieve the data that the user has entered into the form.
We do this retrieval in the views.py file. We should look at the views.py file as the main raw Python coding file. That's where you do all of your major Python coding. Once that's done, then you can templating languages to transfer the Python code over to the template file.
So, in the views.py file we retrieve all of the data, store them in variables, put the variables in the context dictionary, and send them to the template file, so that they can be seen.
So the code we have in our view.py file are shown below.
So in this file, the first thing we do is import render, which is needed in order to render the template file we are working with.
After this, we create a function called index and pass in request.
We then create each variable we need, which represents the extracted value (the value that the user has entered in to the text input fields).
We first create firstname and set it equal to request.POST.get('Firstname'). Because that text input field had the name attribute set to 'Firstname', we set the request.POST.get() function equal to 'Firstname'. This retrieves the data from the first name input text field.
We then create the variable lastname and set it equal to request.POST.get('lastname'), which retrieves the data that the user has entered into the last name text field.
We then create the variable city and set it equal to request.POST.get('City'), which retrieves the city that the user has entered.
We then creat the variable state and set it equal to request.POST.get('State'), which retrieves the state that the user has entered.
Lastly, we retrieve the value of the submit button. We create the variable submitbutton and set it equal to request.POST.get('Submit'). The reason we retrieve the value from the submit button is because we want to know if the user has clicked the submit button. If it hasn't been clicked, we don't want to show any results initially, since the user hasn't entered anything in.
As always, we then pass all the variables into the context dictionary, so that they can get passed into the template file.
We then use the function render to render the template file, htmlform.html.
And this is all that is needed in order to create a form in hard-coded HTML and retrieve data from the form.
Running this code produces the following output, when data is entered in.
So, you can see we get the output right on the same screen.
Overall, it's pretty simple to build a form in plain HTML and process it in Python with Django.
Related Resources
How to Randomly Select From or Shuffle a List in Python