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

Example

  • index.html
  • style.css

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

Example


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Login - Pogamar | The Tech Therapist</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="login">
		<h1>Login Form</h1>
		<p><i>To Your Account</i></p>
		<form action="">
			<input type="text" placeholder="Username">
			<input type="password" placeholder="Password">
			<input type="submit" value="LOG IN">
		</form>
		<p class="more">
			<a href="#signup">Register</a> 
			| 
			<a href="#fpassword">Forgot Password?</a>
		</p>
	</div>
</body>
</html>

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

Example


/*
 *
 * A Pure Content By Pogamar
 * The Tech Therapist
 * Login Form
 *
 */
body {
	width: 100%;
	height: 100vh;
	font-family: "Times New Roman";
	background: #607991;
}
.login {
	width: 500px;
	height: 450px;
	margin: 7% auto;
	background-color: #fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.login div {
	display: inline-block;
	border: none;
}
.login h1 {
	text-align: center;
	padding-top: 110px;
	padding-bottom: 0;
	margin:0;
}
.login p {
	text-align: center;
	padding-bottom:10px;
	margin:0;
	color: grey;
}
.login form {
	text-align: center;
}
.login form input {
	width: 70%;
	height: 35px;
	margin-bottom: 10px;
	border: 1px solid #ededed;
border-radius: 25px; text-align: center; color: #000; } .login form input:focus { outline: none; } ::-webkit-input-placeholder { line-spacing: 1px; color: grey; } .login input[type="submit"] { color: #fff; background: #FFBF37; font-weight: bold; } .login .more { margin:0; padding:0; font-size: 12px; } .login .more a { display: inline-block; text-align: center; }

এবার ব্রাউজার দিয়ে ন্রাউজ করে দেখুন। আমার মিনে হয় আমার আগের পর্বে আমি দেখিয়েছি কিভাবে সার্ভার সেট আপ দিতে হয় লাইভ টাইম সার্ভার। সেভাবে করবেন এবং রান করে দেখুন আশা করি ভালো লাগবে।
আর যেই ভাইদের মনে হবে যে না আমি এতো কপি পেস্ট করতে পারবোনা তারা আমার গিটহাব থেকে গিট ডাউনলোডকরেও ইউজ করতে পারেন। কিন্তু আমি বলবো আপনি কপি না করে একটা এক্টা লাইন দেখে দেখে লিখুন এতে করে আপনি কিছু শিখতে পারবেন।
আমার গিটহাব লিংকঃ Github
আর যদি এরকম আরও সুন্দর ডিজাইন চান তবে আমার ইউটউব চ্যানেল এ ঘুরে আসবেন। আর সকল ধরনের ওয়েব ডেভলপিং ভিডিও পাবেন। আর ওয়েব ডেভলপিং যারা শিখতে চান তারা একটা গ্রুপ বানিয়ে আমাকে এড করে দিবেন ইনশাল্লাহ না পারি সাহায্য করতে পারবো। এবং এই কমেন্টে জানান যে আপনাদের আর কেমন পোস্ট চাই সেটা যেকোন কিছু নিয়ে হতে পারে এবং কেমন ভিডিও চাই সেটা এই পোস্ট এর ভিডিও তে জানান। আর যেকোন প্রব্লেম নিয়ে আসতে পারেন আমার কাছে।
কিছু বুঝে না থাকলে ভিডিও টি দেখার অনুরোধ রইলোঃ Login Form Making Video
আর ভিডিও কমেন্টে জানান আপনাদের চাহিদা। অথবা এখানেও জানাতে পারেন
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন

ফেসবুকে আমি:-Inad Islam
আমার ইউটিউব চ্যানেলঃ- POGAMAR

17 thoughts on "কীভাবে একটি লগিন ফর্ম বানাবেন শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে |"

  1. mjr-shahed Contributor says:
    Vai,,,,,amr onk kisu janar ase apnar theke,,,, plz help me.
    Accept fb req,,,,,,,,,,, mjr shahed
    1. Pogamar - The Tech Therapist Author Post Creator says:
      Okay ashen vai
  2. bappi banik Author says:
    evabe cope korle ki hobe
    .. notpad e file ta dile khub valo hoto.. video tutrol sara buja muskil…
    1. Pogamar - The Tech Therapist Author Post Creator says:
      Vai video diyei dilam nice dekhun ar apnader jonne github link to diyei dilam code download korar jonne
    2. Pogamar - The Tech Therapist Author Post Creator says:
      Ei nin vai video: https://youtu.be/Q6X4gWVI6gs
      ar ei nen code download korar link: https://github.com/inadislam/login_YT.git
  3. Khairul Islam Contributor says:
    vai action e ki dibo?
    1. Pogamar - The Tech Therapist Author Post Creator says:
      apni ki login page create korben backend shoho? Apni php othoba javascript paren?
  4. Khairul Islam Contributor says:
    Ami sudu HTML CSS pari
    1. Pogamar - The Tech Therapist Author Post Creator says:
      কোন প্রবলেম নেই। পারলে আপনার জন্যে ভালো। খুব তারাতারি সব কোড বুঝতে পারবেন। এবং একবার দেখে তারপর বাকিটা নিজেই করতে পারবেন। আর মডিফাই ও করতে পারবেন।
    2. Khairul Islam Contributor says:
      HTML from e amr sudu action niye problem.so possible hoile action ta niye Post korben..
    3. Pogamar - The Tech Therapist Author Post Creator says:
      inashallah bro. Sathe thakun
  5. Jibon Roy Author says:
    kivabe ekta mobile theme k pc theme kora jay
    mane mobile theme oitai thakbe r desktop mod korle oi theme tai desktop version hbe
    parle video koren….
    1. Pogamar - The Tech Therapist Author Post Creator says:
      আমি যতটুকু বুঝতে পেরেছি আপনার প্রশ্ন থেকে সেটা হলো একটা থিম কে কীভাবে রিস্পোন্সিভ বানানো যায় এটা বুঝাইসেন। ইনশাল্লাহ ভিডিও এবং পোস্ট পেয়ে যাবেন। আগে একটা থিম বানানোর টিউটোরিয়াল বানাবো তারপর আপনার রিস্পোন্সিভ থিম টা নিয়ে ভিডিও পাবেন ইনশাল্লাহ। সাথেই থাকুন
  6. sparkingRobin Contributor says:
    Ei form ta ami kno hosting kine ba free hosting ei set korlam & ekta domain nilam,
    Tarpor visitor ra oi form ta fill up korle data gulo amar kache ashbe Google Form er moto. Eta kivabe korbo? Eta korte bodhoy PHP lagbe, ami pari na. Can you help? Ei shomporke kno post ba video tutorial link dite parben?
  7. sparkingRobin Contributor says:
    Tarpor visitor ra oi form ta fill up korle data gulo amar kache ashbe Google Form er moto. Eta kivabe korbo? Eta korte bodhoy PHP lagbe, ami pari na. Can you help? Ei shomporke kno post ba video tutorial link dite parben?
  8. sparkingRobin Contributor says:
    visitor ra oi form ta fill up korle data gulo amar kache ashbe Google Form er moto. Eta kivabe korbo?Can you help? Ei shomporke tutorial link dite parben?
  9. Levi Author says:
    সুন্দর।

Leave a Reply