How To Design Registration Form HTML And CSS

হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজ আপনাদের মাঝে শেয়ার করবো; কিভাবে Registration  ফরম HTML এবং CSS এর...

হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজ আপনাদের মাঝে শেয়ার করবো; কিভাবে Registration ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । (How To Design Registration Form HTML And 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;
}


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

COMMENTS

Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content