হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজ আপনাদের মাঝে শেয়ার করবো; কিভাবে Registration ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । (How To Design Registration Form HTML And CSS)
প্রোজেক্ট ধারণাঃ
- নামঃ Design Registration Form HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding (মার্জিন & প্যাডিং)
- Position (পজিশন)
- Absolute
- Relative
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Flex
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা হবে না, চলুন শুরু করা যাক……………
Registration ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css (নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) ।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<div class="bgContainer">
<div class="centerContainer">
<div class="whContainer">
<h1>Registration Form</h1>
<div class="outerForm">
<form action="">
<div class="innerform">
<div class="inputItem">
<div class="item">
<label for="">First Name:</label>
<input type="text" required />
</div>
<div class="item">
<label for="">Last Name:</label>
<input type="text" required />
</div>
</div>
<div class="item">
<label for="">Email:</label> <input type="email" required />
</div>
<div class="item">
<label for="">Phone Number:</label>
<input type="tel" required />
</div>
<div class="item">
<label for="">Birth Date:</label> <input type="date" required />
</div>
<div class="item">
<label for="">Gender</label>
<select>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="inputItem">
<div class="item">
<label for="">Password</label>
<input type="password" required />
</div>
<div class="item">
<label for="">Confirm Password</label>
<input type="password" required />
</div>
</div>
<div class="item"><input type="submit" value="Send Now" /></div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন (.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
/* Use Any Font Family */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap");
body {
margin: 0;
padding: 0;
font-family: "Playfair Display", serif;
}
.bgContainer {
background: #654ea3;
background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);
background: linear-gradient(to right, #eaafc8, #654ea3);
height: 100vh;
}
.centerContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.whContainer {
width: 620px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px #140e11;
}
.whContainer h1 {
margin-top: 0;
color: #363636;
}
.innerform {
width: 100%;
height: 100%;
}
.inputItem {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.item input:not([type="radio"]),
select {
box-sizing: border-box;
width: 100%;
height: 35px;
margin-bottom: 15px;
border: 1px solid #dbdbdb;
outline: none;
padding-left: 8px;
border-radius: 3px;
transition: 0.5s ease-in-out;
}
.item input[type="submit"] {
border: none;
background: #654ea3;
background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);
background: linear-gradient(to right, #eaafc8, #654ea3);
height: 40px;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 400;
cursor: pointer;
}
.item input[type="text"]:focus,
.item input[type="text"]:valid,
.item input[type="email"]:focus,
.item input[type="email"]:valid,
.item input[type="tel"]:focus,
.item input[type="tel"]:valid,
.item input[type="date"]:focus,
.item input[type="date"]:valid,
.item input[type="password"]:focus,
.item input[type="password"]:valid,
.item select:focus {
border: 1px solid #654ea3;
color: #363636;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
