[Python] Why is my django code for POST Method not working?

I am working on a django website and I am trying to receive data from the user through POST Method. The error message is :

MultiValueDictKeyError at /prediction/
'date1'
Request Method: GET


Why is the request Method still GET even though I have POST in my views.py?

Views.py :

from django.shortcuts import render
from apple.models import predictions

# Create your views here.


def home_view(request):

pre = predictions.objects.filter(date='2021-01-15')
return render(request, 'homepage.html', {'prediction': pre})

def read(request):

final_date = str(request.POST["date1"])
price = predictions.objects.filter(date=final_date)

return render(request, 'results.html', {'price'rice})


This is my 2nd HTML page Results.html :

<!DOCTYPE html>
<html>

<head>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<title>Prediction Page</title>
</head>

<body>
<h1>"The Predicted price for this date is:" +
"{{price}}"</h1>
</body>

</html>

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html {
width: 100%;
height: 100%;
overflow: hidden;
}

body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background: #331952;
color: #fff;
font-size: 18px;
text-align: center;
letter-spacing: 1.2px;

}
</style>


This is the main HTML Page - homepage.html ( from where 'date1' is coming from ) :

<!DOCTYPE html>
<html>

<head>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<title>Apple Stock Price Predictor</title>
</head>

<body>
<div class="login">
<h1>Predict Apple Stock Prices for Tomorrow</h1>
<h3>Enter the date for tomorrow to predict the Apple Stock Price for tomorrow</h3>

<form action="read" method="post">
{% csrf_token %}

<input type="text" name="date1" placeholder="Tomorrow's Date" id="form-submit" />

<input type="button" id="button-submit" value="Predict"></input>
</form>

<br>
<br>
<h3 id = "output"></h3>
</div>
</body>

</html>

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

#button-submit {
background-color: #ba0b0b;
border: none;
text-align: center;
border-radius: 8px;
padding: 14px 40px;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}

#button-submit:hover {
background-color: #770e0e;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

html {
width: 100%;
height: 100%;
overflow: hidden;
}

body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background: #331952;
color: #fff;
font-size: 18px;
text-align: center;
letter-spacing: 1.2px;

}

.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width: 450px;
height: 400px;
}

.login h1 {
color: #fff;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
text-align: center;
}

input {
width: 100%;
margin-bottom: 10px;
background: rgba(134, 56, 56, 0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}

input:focus {
box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
}
</style>

Continue reading...