কিভাবে তৈরি করা যায়: যোগাযোগ ফর্ম

কিভাবে যোগাযোগ ফর্ম তৈরি করা যায়

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

ফর্ম ইলিমেন্ট ব্যবহার করে ইনপুটকে হ্যান্ডল করুন। আপনি আমাদের PHP ট্যুটোরিয়ালের মধ্যে আরও বিস্তারিত তথ্য পাবেন।

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

<div class="container">
  <form action="action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* "text"-এর ধরনের ইনপুট বাক্স, ভালোবাসা এবং টেক্সট এরিয়াকে স্টাইল সেট করুন */
input[type=text], select, textarea {
  width: 100%; /* সম্পূর্ণ প্রস্থ */
  padding: 12px; /* কিছু অভ্যন্তরীণ প্যাডিং */ 
  border: 1px solid #ccc; /* গ্রে হাড় */
  border-radius: 4px; /* বৃত্তাকার হাড় */
  box-sizing: border-box; /* প্যাডিং এবং প্রস্থতা স্থায়ী রাখতে নিশ্চিত করুন */
  margin-top: 6px; /* নিচের বাইর্দিক মার্গিন */
  margin-bottom: 16px; /* নিচের মার্গিন */
  resize: vertical /* ব্যবহারকারীকে টেক্সট ফিল্ডের আকার উপরের দিকে সমানভাবে বড় করার অনুমতি দেয় (না হলে পাশের দিকে) */
}
/* সাবমিট বাটনকে বিশেষ পিছনভাগের রঙ এবং অন্যান্য স্টাইল সেট করুন */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* হভার হলে সাবমিট বাটনের গভীরতর গ্রিন পিছনভাগের রঙ যোগ করুন */
input[type=submit]:hover {
  background-color: #45a049;
}
/* ফর্ম কনটেইনারকে পিছনভাগের রঙ এবং কিছু অভ্যন্তরীণ প্যাডিং যোগ করুন */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

亲自试一试

相关页面

教程：এইচটিএমএল ফর্ম

教程：সিএসএস ফর্ম