Django Web form handling to display welcome message with input data

We will learn how to take user input by using a web form and then collect the data and process the same by using Python. To keep it simple, we will ask the user to enter his name, after collecting the user name we will display one welcome message using the user input data.
Let us start by creating one simple html page form.html with the basic form input.

{% extends 'temp_basic.html' %}

{% block content %}

<form  action='form_output'>
<input type=text name=t1>
<input type=submit value=Submit>
</form>


 {% endblock %}

temp_basic.html

<html>
<head>
<title>This is basic template file </title>
</head>
<body>
{% block content %}

{% endblock %}
<br><br>
<center>Displayed by using template file temp_basic.html</center>
</body>
</html>

We will change urls.py page by adding path to handle form submitted data.

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
	path('student/add',views.add_data,name='add_data'),
	path('student/form_output',views.form_output,name='form_output')
]

We can display the form by using this URL

http://127.0.0.1:8000/student/add

As we submit the form by clicking the submit button, the last line of code inside urls.py will set the path by using the action attribute of the form to form_output function.
You can understand the basics of HTML form and its attributes here.

We will add the function form_output inside views.py file.

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

def index(request):
    return render(request,'form.html')
	
def form_output(request) :
    return render(request,'form_output.html')

Above code will display form_output.html page when form is submitted. Now we will not get any form input data here. We need to change our views.py page to accept html form data and then store it in a variable and display. This we will do in our next step.

To display the content of form_output.html we will use the temp_basic.html. Here is the code for form_ouput.html

{% extends 'temp_basic.html' %}

{% block content %}

from form_output

{% endblock %}

Above code will display the string saying from form_output. However we want to display dynamic content that is the input data with welcome message. For this we have to modify our form_output function inside views.py.

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

def index(request):
    return render(request,'form.html')
	
def form_output(request) :
	str=request.GET['t1']
	str=" Welcome " + str
	return render(request,'form_output.html',{'msg':str})

We need to change form_ouput.html file to use the template temp_basic.html and to display welcome message.

{% extends 'temp_basic.html' %}

{% block content %}

{{msg}}

{% endblock %}

Here we have displayed the welcome message by using the template and by taking the value of variable msg
Output is here ( We used plus2net as input )

Welcome plus2net

Displayed by using template file temp_basic.html

Using method=POST

To know more about POST method you can read this.

We will use middle were available to add csrf_token , updated form.html is here.

{% extends 'temp_basic.html' %}

{% block content %}

<form  action='form_output' method='POST'>
{% csrf_token %}
<input type=text name=t1>
<input type=submit value=Submit>
</form>

 {% endblock %}

We will change form_output function to accept POST Method inside views.py

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

def index(request):
    return render(request,'form.html')
	
def form_output(request) :
	str=request.POST['t1']
	str=" Welcome " + str
	return render(request,'form_output.html',{'msg':str})

Django Form class

Django Admin MySQL Python- Tutorials

Subscribe to our YouTube Channel here

Django Form for user input

Using method=POST

Subscribe