কিভাবে তৈরি করা যায়: নিবন্ধন ফর্ম

নিবন্ধন ফর্ম কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন:

ইনপুট প্রক্রিয়াকরণ করার জন্য <form> ইলিমেন্ট ব্যবহার করুন। আপনারা আমাদের PHP ট্যুটোরিয়ালে আরও বিস্তারিত তথ্য পাবেন。

প্রত্যেক ফিল্ডের জন্য ইনপুট কন্ট্রোল যোগ করুন (এবং ম্যাচ করা লেবেল):

<form action="action_page.php">
  <div class="container">
    <h1>নিবন্ধন</h1>
    <p>এই ফর্মটি পূরণ করে অ্যাকাউন্ট তৈরি করুন。</p>
    <hr>
    <label for="email"><b>ইমেইল</b></label>
    <input type="text" placeholder="ইমেইল লিখুন" name="email" id="email" required>
    <label for="psw"><b>পাসওয়ার্ড</b></label>
    <input type="password" placeholder="পাসওয়ার্ড লিখুন" name="psw" id="psw" required>
    <label for="psw-repeat"><b>পুনরায় পাসওয়ার্ড</b></label>
    <input type="password" placeholder="পুনরায় পাসওয়ার্ড লিখুন" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>অ্যাকাউন্ট তৈরি করে আপনি আমাদের <a href="#">শর্তসূত্র & গোপনীয়তা</a> সম্মত হচ্ছেন</p>
    <button type="submit" class="registerbtn">Register</button>
  </div>
  <div class="container signin">
    <p>ইতিমধ্যেই অ্যাকাউন্ট আছে? <a href="#">সাইন ইন</a>.</p>
  </div>
</form>

দ্বিতীয় পদক্ষেপ - CSS যোগ করা:

* {box-sizing: border-box}
/* কনটেনারে আইন্দ্রিয় মাঝারি সেট করা */
.container {
  padding: 16px;
}
/* পূর্ণ প্রস্থ ইনপুট ফিল্ড */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* hr-এর ডিফল্ট শৈলীকে অবরূপ করা */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* সমর্থন/রেজিস্ট্রেশন বাটনের শৈলী সেট করা */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* লিঙ্ককে ব্লু কালার টেক্সট সেট করা */
a {
  color: dodgerblue;
}
/* লগইন অংশকে গ্রেয়ার ব্যাকগ্রাউন্ড কালার সেট করা এবং টেক্সটকে মধ্যস্থানে রাখা */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

亲自试一试

相关页面

教程：HTML ফর্ম

教程：CSS ফর্ম