کیسے بنائیں: ریسپانسیو فرم

کیسے ریسپانسیو فرم بنائیں: ریسپانسیو فرم

کیسے ایک ریسپانسیو فرم بنائیں

پہلا قدم - 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;
}
/* منجمدار رپونزوو - جب سکرین ویدت کم از 600 پی.ایکس بپاشد، دو ستون را بجای همپایه بپاشد */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

آموزش خود را امتحان کنید

صفحات مرتبط

آموزش‌ها:فرم HTML

آموزش‌ها:فرم CSS