How to create an HTML form and insert data into the database using Django?

In an earlier tutorial, we have learned to create your first Django application. In this tutorial, we are going to learn about creating Django form and storing data into the database.

The form is a graphical entity on the website where the user can submit their information. Later, this information can be saved in the database and can be used to perform some other logical operation.

As a part of this tutorial, we are going to create one HTML form where the user can enter their data. We will save this data into Django’s default SQLite database.

Create an HTML form and Insert Data into the Database using Django

There are multiple steps involved. Let’s start one-by-one.

Step 1. Creating a Model Class

Model is nothing but the source of information about the data where we can define the type of data, behavior.

Usually, one model class maps to one database table.

You can find all the defined models in models.py file.

Open models.py and write a model class in it.

from django.db import models

class MyModel(models.Model):
    fullname = models.CharField(max_length=200)
    mobile_number = models.IntegerField()

Explanation:

• In the first line of the code, we are importing models.
• Create a new form (says MyForm) that is inherited from the models.Model class.
• One-by-on you can define the form data/field with their data types.

In the above example, we have created two model data fields – CharField() and IntegerField().

Step 2. Understanding Different Model Field Types

There are different model field types you can use in the Django models. Most of these field types are self-descriptive.

Let’s check them one-by-one.

Relationship Fields:

Django also defines a set of fields that represent relations between two data fields.

If you know the database, it has various keys used to map the relation. Similarly, we can define those relations using relationship fields in Django.

Step 3. Making Migrations and Setting Database

After writing the Django model, you need to create the migrations. Run the following command to create the migrations.

python manage.py makemigrations

After running the command, you can see the migrations file created under the migrations folder. Something like this 0001_initial.py.

You are done with creating migrations. To reflect thing migrations into the database, you have to run the below command.

python manage.py migrate

You have applied migrations to the database successfully.

With this, you have created a backend.

Let’s create the front-end (form) to take the data from the user.

Step 4. Create Form to Take the User Input

Instead of creating HTML form manually, Django has an easy way of doing it.

First of all, create a new file as forms.py and write below Python code.

We are defining the form and attributes to display in the form.

from django import forms
from .models import MyModel

class MyForm(forms.ModelForm):
  class Meta:
    model = MyModel
    fields = ["fullname", "mobile_number",]
    labels = {'fullname': "Name", "mobile_number": "Mobile Number",}

Here are the things we are doing.

• Inheriting forms.ModelForm class to create our own form.
• In Meta class, we are defining the form attributes.
• With the labels, we can customize form field labels to display.

Now create an HTML page template to display the Django form.

<div class="container">
    <form method="POST">
      <fieldset>
        <legend>Form</legend>
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>
</div>

Let’s save the file as cv-form.html in the templates directory.

Even if you know the basic HTML, you can understand the above HTML code.

You can also use bootstrap to customize the form and to make it look nice. I will show you that in the next tutorial. Now stick with this and continue with our tutorial to create an HTML form and insert data into the database using Django.

Let’s create a new function in views.py Python file.

from django.shortcuts import render
from .models import MyModel
from .forms import MyForm

def my_form(request):
  if request.method == "POST":
    form = MyForm(request.POST)
    if form.is_valid():
      form.save()
  else:
      form = MyForm()
  return render(request, 'cv-form.html', {'form': form})

This function will be called when the user hits the form URL in the web browser.

Step 5. Set URL and Run Django Application

Let’s call this form function by mapping it to the URL. Go to the urls.py and add the below line of code to urlpatterns the list.

url(r'form', views.my_form, name='form')

Now run and start the local server to test using the below command.

python manage.py runserver

It will start the local server. Now open localhost in a web browser.

Whenever a request comes to http://localhost:8000/form, it will call to the my_form() function defined in views.

Wow! You have created your first form. Submit the sample data in the form. The data will be saved in the database.

You can also see all the data submitted by the user in the Django admin dashboard. You have to register the model into the Django admin site.

In this tutorial, you have learned to create an HTML form and insert data into the database using Django.

Keep Learning!