कैसे बनाएं: रिस्पांसिव फॉर्म

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>

दूसरा - एसीएसी जोड़ें:

/* इनपुट बॉक्स, चयन तत्व और टेक्सट एरा के लिए शैली सेट करना */
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 फॉर्म