Advertisemen
in this post how can you connect custom HTML form with Django. The form of default Django is not good and it is also ugly so in this post, you going to learn how to make your own form and connect with the Django model.
1. create our project:
Django-admin startproject customform
We created our project, now we need to create our app so that we perform our back end operations2. Create our app:
python manage.py startapp form
3.now run our project:
python manage.py runserver
step 4:
now create a template folder and save as form.html
customform>templates>form.html and paste below code. Now bellow for you need to add create a block and inside this, you need to add the form code.
you also need to include the CSRF token which is very important in the case for form upload. select the form method as POST.
<!DOCTYPE html>
<html lang="en">
<head>
<title>django learn</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>form</h2>
{% block form %}
<form method='post'>
<div class="form-group">
{% csrf_token %}
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endblock %}
</div>
</body>
</html>
step 5:
customform>form>urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
in the above we not giving any custom path. we actually running this http://127.0.0.1:8000/ no custom URL path not using here.
step 6:
now inside the customform>customform>urls.py you need to include form app's URLs
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('', include('form.urls')),
path('admin/', admin.site.urls),
]
Step 7:
in the view file and add this code
folder path customform>form>views.py
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
if request.method == "POST":
email=request.POST.get("email")
psw=request.POST.get("pwd")
print(email)
print(psw)
return render(request, "form.html")
here in the code, we taking the input from the form variables like email password using request post get method and storing it in the variable and printing it in console.
now you can also save this data to database models.
step 8:
output
Add Comments