কীভাবে একটি রেজিষ্ট্রেশন ফর্ম বানাবেন শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে |

Web Development

আবার আপনাদের নাঝে হাজির হয়েছি আর ও একটা ছোট্ট প্রজেক্ট নিয়ে। কাল আমরা লগিন পেজ কীভাবে বানাতে হয়ে শিখেছি। আজ শিখব রেজিষ্ট্রেশন ফর্ম কীভাবে বানাবেন শুধু মাত্র এইচটিএমএল এবং সিএসএস দিয়ে। এটা কি আসলেই কোন প্রজেক্ট? 🤔🤔 হোয়াটেভার চলেন দেখি কিভাবে বানানো যায়।

আপনি যদি কীভাবে লগিন পেজ বানাতে হয় সেটা না দেখে থাকেন তাহলে এক্ষুনি দেখে নিন এতে করে এই পোস্ট টি আপনার কাছে সোজা মনে হবে। এখান থেকে

তো বেশি কিছু করতে হবেনা শুধু আমার লিখা এইচটিএমএল আর আর সিএসএস গুলা কোন এডিটর বা ভিম দিয়ে সেভ করে নিলেই হবে। অথবা গতকালের মতো কপি করে কোন .html এবং .সিএসএস ফাইলে রাখলেই হবে। আমি বলে দিবো কোনটার কি নাম দিতে হবে।

প্রথমে একটা ফাইল ম্যানেজার এ জান আর একটা ফোলডার বানান Registration নামে অথবা যেকোন নাম দিয়ে যেটা আপনার ভালো লাগে তারপর সেই ফোল্ডার এ যান এবং গতকালের মত নিম্মের নামে দুটো ফোল্ডার বানান।

Example

  • index.html
  • style.css

বানানো শেষ? বানানো শেষ হলে এবার গতকালের মতো প্রথম ফাইল্টি অর্থাৎ index.html ফাইল টি কোন এডিটর দিয়ে ওপেন করুন। এবার নিচের কোডটি কপি করে পেস্ট করে সেভ করুনঃ

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form - Pogamar | The Tech Therapist</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h1>Registration Form</h1>
<form action="">
<input type="text" name="fname" placeholder="First Name">
<br>
<input type="text" name="lname" placeholder="Last Name">
<br>
<input type="text" name="username" placeholder="Username">
<br>
<input type="email" name="email" placeholder="Email">
<br>
<input type="password" name="password" placeholder ="Password">
<br>
<input type="submit" name="submit" value="SIGN UP">
</form>
<p class="more">
<a href="#login">Already have a account? Login here</a> 
| 
<a href="#fpassword">Forget Password?</a>
</p>
</div>
</body>

 

</html>

সেভ করা শেষ? এবার একই ভাবে দ্বিতীয় ফাইল্টি ওপেন করুন একটি এডিটর দিয়ে এবং নিচের কোডটুকু কপি করে পেস্ট করে করে সেভ দিনঃ


Example

/*

*
* A original Content By Pogamar
* The Tech Therapist
* Registration Form
*
*/
html, body, .main, h1, div, input, form {
margin:0;
padding:0;
}
html, body {
height: 100%;
background: linear-gradient(to right, #43c6ac, #f8ffae); 
font-family: 'sans serif';
}
.main {
width: 500px;
margin: 7% auto;
background: linear-gradient(to bottom, #00183b, #002452, #00306b, #003d85, #004a9f);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 520px;
}
.main h1 {
padding-top: 80px;
padding-bottom: 25px;
color: #fff;
text-align: center;
}
.main form {
text-align: center;
}
.main form input {
width: 75%;
height: 35px;
margin-bottom: 10px;
border: 1px solid #ededed;
border-radius: 25px;
text-align: center;
color: grey;
}
.main form input:focus {
outline: none;
}
.main form input:hover {
border: 2px solid #4d4dff;
i}
::-webkit-input-placeholder {
line-spacing: 1px;
color: grey;
}
.main input[type="submit"] {
color: #fff;
background: #FFBF37;
font-weight: bold;
}
.more {
margin:0;
padding:0;
font-size: 12px;
text-align: center;
color: #fff;
}
.more a {
display: inline-block;
padding: 8px;
color: #fff;
text-decoration: none;
}

এবার ব্রাউজার দিয়ে গতকালের মতো ব্রাউজ করে দেখুন। আমার মনে হয় আমার আগের পর্বে আমি দেখিয়েছি কিভাবে সার্ভার সেট আপ দিতে হয় লাইভ টাইম সার্ভার। সেভাবে করবেন এবং রান করে দেখুন আশা করি ভালো লাগবে।

Leave a Reply

Your email address will not be published. Required fields are marked *