چگونه ایجاد می‌کنیم: فرم‌های پاسخگو

آموزش چگونگی استفاده از CSS برای ایجاد فرم‌های پاسخگو.

چگونه فرم‌های پاسخگو ایجاد می‌کنیم

قدم اول - اضافه کردن HTML:

از عناصر <form> برای پردازش ورودی‌ها استفاده کنید. می‌توانید اطلاعات بیشتری در آموزش‌های PHP ما پیدا کنید.

برای هر فیلد ورودی (با برچسب هماهنگ) اضافه کنید و از عناصر <div> برای بسته‌بندی هر برچسب و ورودی استفاده کنید تا بتوانید با استفاده از CSS عرض مشخصی تنظیم کنید:

<div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">نام اول</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="نام شما...">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">نام خانوادگی</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="نام خانوادگی شما...">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">کشور</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">استرالیا</option>
          <option value="canada">کانادا</option>
          <option value="usa">ایالات متحده</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">موضوع</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="نوشتن چیزی..." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

مرحله دوم - اضافه کردن CSS:

/* تنظیم استایل فیلدهای ورودی، عناصر انتخاب و فیلدهای متن */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
/* تنظیم استایل برچسب تا در کنار فیلد ورودی نمایش داده شود */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* تنظیم استایل دکمه ارسال */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
/* تنظیم استایل کانتینر */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* ستون شناور برچسب: عرض 25% */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
/* ستون شناور ورودی: عرض 75% */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* پاک کردن شناور شدن ستون‌ها پس از آن */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* ردپای طراحی واکنشگرا - وقتی عرض صفحه کمتر از 600px باشد، دو ستون را در کنار هم قرار می‌دهد، نه به صورت چسبیده */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

آزمایش کنید

صفحات مرتبط

آموزش:فرم HTML

آموزش:فرم CSS