১৩.৫ : রেজিস্ট্রেশন টেম্পলেট তৈরী
আজকে আমরা রেজিস্ট্রেশন ফরম কে রেন্ডার করার জন্যে টেমপ্লেট তৈরি করবো। সেজন্যে accounts এর মধ্যে templates নামে একটা ফোল্ডার তৈরি করবো। সেটার মধ্যে accounts নামে একটা ফোল্ডার তৈরি করে সেখানে user_registration.html নামে একটা html তৈরি করবো। এখন এখানে ডিজাইন এর দিকে আমরা ফোকাস দিবো না, মেইন ফোকাস থাকবে আমাদের backend এর দিকে সেজন্যে একটা html এর ডিজাইন নিয়ে এসেছি তোমার জন্যে সেটা এখানে পেস্ট করে দিচ্ছি।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% if form.non_field_errors %} {% for error in form.non_field_errors %}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-2" role="alert">
<p class="font-bold">Error!</p>
<p class="block sm:inline">{{ error }}</p>
</div>
{% endfor %} {% endif %} {% if form.non_field_errors %} {% for error in form.non_field_errors %}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-2" role="alert">
<p class="font-bold">Error!</p>
<p class="block sm:inline">{{ error }}</p>
</div>
{% endfor %} {% endif %}
<div class="bg-white px-3 py-4 rounded-xl my-6">
<h1 class="font-bold text-3xl text-center pb-5">Sign In</h1>
<div class="w-full mt-10">
<form method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{% csrf_token %} {% for hidden_field in form.hidden_fields %} {{ hidden_field.errors }} {{ hidden_field }} {% endfor %}
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-2/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.first_name.id_for_label }}">
{{ form.username.label }}
</label> {{ form.username }} {% if form.username.errors %} {% for error in form.username.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.first_name.id_for_label }}">
{{ form.first_name.label }}
</label> {{ form.first_name }} {% if form.first_name.errors %} {% for error in form.first_name.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.last_name.id_for_label }}">
{{ form.last_name.label }}
</label> {{ form.last_name }} {% if form.last_name.errors %} {% for error in form.last_name.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.email.id_for_label }}">
{{ form.email.label }}
</label> {{ form.email }} {% if form.email.errors %} {% for error in form.email.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.account_type.id_for_label }}">
{{ form.account_type.label }}
</label> {{ form.account_type }} {% if form.account_type.errors %} {% for error in form.account_type.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.gender.id_for_label }}">
{{ form.gender.label }}
</label> {{ form.gender }} {% if form.gender.errors %} {% for error in form.gender.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.birth_date.id_for_label }}">
{{ form.birth_date.label }}
</label> {{ form.birth_date }} {% if form.birth_date.errors %} {% for error in form.birth_date.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.password1.id_for_label }}">
{{ form.password1.label }}
</label> {{ form.password1 }} {% if form.password1.errors %} {% for error in form.password1.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.password2.id_for_label }}">
{{ form.password2.label }}
</label> {{ form.password2 }} {% if form.password2.errors %} {% for error in form.password2.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
{% for hidden_field in form.hidden_fields %} {{ hidden_field.errors }} {{ hidden_field }} {% endfor %}
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.street_address.id_for_label }}">
{{ form.street_address.label }}
</label> {{ form.street_address }} {% if form.street_address.errors %} {% for error in form.street_address.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.city.id_for_label }}">
{{ form.city.label }}
</label> {{ form.city }} {% if form.city.errors %} {% for error in form.city.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.postal_code.id_for_label }}">
{{ form.postal_code.label }}
</label> {{ form.postal_code }} {% if form.postal_code.errors %} {% for error in form.postal_code.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{ form.country.id_for_label }}">
{{ form.country.label }}
</label> {{ form.country }} {% if form.country.errors %} {% for error in form.country.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %} {% endif %}
</div>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
Register
</button>
</div>
</form>
</div>
</div>
</body>
</html>Last updated