How To Responsive Register Form Design HTML and CSS

0 0 AHSHAN HABIB Tuesday, July 18, 2023 Edit this post

Hello Coders! আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Register ফরম HTML এবং CSS এর মাধ...

Hello Coders! আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Register ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।

How to Design Responsive Register Form in HTML and CSS

How To Responsive Register Form Design HTML and CSS

প্রোজেক্ট ধারণাঃ

নামঃ Design Responsive Register Form in HTML and CSS
ভাষাঃ HTML & CSS
লাইসেন্সঃ ফ্রি
রেস্পনসিভঃ হ্যাঁ
অথরঃ Notesaid24

প্রোজেক্ট করতে যা জানা প্রয়োজনঃ

বেসিক HTML
বেসিক CSS
Margin & Padding ( মার্জিন & প্যাডিং )
Position ( পজিশন )

Absolute
Relative

Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
Font Awesome Icon (এই প্রজেক্টে Font Awesome এর ৪.৭ ভার্সন ব্যবহার করা হয়েছে।)
Display Flex

আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………

Register ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) ।নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।

Source Code

প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।

HTML কোড ব্লকঃ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register Form Design By Notesaid24</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div class="container">
      <div class="input_area">
        <form action="">
          <h1>Create Your Account</h1>
          <div class="input_items">
            <label>Company Name</label> <input type="text" required />
          </div>
          <div class="input_items">
            <label>Your Name</label> <input type="text" required />
          </div>
          <div class="input_items">
            <label>Email Address</label> <input type="email" required />
          </div>
          <div class="input_items">
            <label>Password</label> <input type="password" />
          </div>
          <div class="input_info">
            <input type="checkbox" />
            <span
              >To register with us to agree our
              <a href="#">Terms & Conditions</a></span
            >
          </div>
          <div class="input_items">
            <input type="submit" value="Register" />
          </div>
        </form>
      </div>
      <div class="input_footer">
        <span>Already have an account <a href="#">Login</a></span>
      </div>
    </div>
  </body>
</html>

দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন (.css) এক্সটেনশন যেন ঠিক থাকে।

CSS কোড ব্লকঃ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  background: #026c9c;
  padding: 20px;
}
.input_area {
  width: 350px;
  background: #fff;
  padding: 15px 30px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.input_area form {
  width: 100%;
  position: relative;
}
.input_area form h1 {
  font-size: 28px;
  color: #363636;
  font-weight: normal;
}
.input_items {
  width: 100%;
  height: 100%;
  margin-top: 12px;
}
.input_items input {
  position: relative;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: #026c9c;
  padding-left: 10px;
}
.input_items label {
  font-size: 16px;
  color: #363636;
}
.input_info {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  color: #363636;
}
.input_info a {
  text-decoration: none;
  color: #026c9c;
}
.input_items input[type="submit"] {
  background-color: #026c9c;
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
  transition: 0.5s;
  cursor: pointer;
}
.input_items input[type="submit"]:hover {
  background-color: #363636;
}
.input_footer {
  margin-top: 10px;
  font-size: 18px;
  color: #ade5ff;
}
.input_footer a {
  text-decoration: none;
  color: #fff;
}

আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে
অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।