कैसे बनाया जाता है: संपर्क फॉर्म

संपर्क फॉर्म कैसे बनाया जाता है

पहला कदम - HTML जोड़ें:

इनपुट को संभालने के लिए <form> एलीमेंट का उपयोग करें। आपको हमारे 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">विषय</label>
    <textarea id="subject" name="subject" placeholder="अभी कुछ लिखें.." style="height:200पिक्सेल"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

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

/* टाइप "text" के इनपुट, चयन एलेमेंट और टैक्सट-एरा को स्टाइल्स सेट करें */
input[type=text], select, textarea {
  चौड़ाई: 100%; /* पूर्ण चौड़ाई */
  पैडिंग: 12पिक्सेल; /* कुछ आंतरिक पैडिंग */ 
  बॉर्डर: 1पिक्सेल सिलिकन #ccc; /* ग्रे बॉर्डर */
  बॉर्डर-रेडियस: 4पिक्सेल; /* गोलाकार बॉर्डर */
  बॉक्स-साइजिंग: बॉर्डर-बॉक्स; /* आंतरिक पैडिंग और चौड़ाई को अच्छे तरीके से नियंत्रित करता है */
  मार्ग-टॉप: 6पिक्सेल; /* नीचे का बाहरी पैडिंग */
  मार्ग-बोटम: 16पिक्सेल; /* बोटम मार्ग */
  रीजाइज: वर्टिकल /* उपयोगकर्ता को टैक्सट-फील्ड के आकार को वर्टिकल रूप से समायोजित करने की अनुमति देता है (नहीं कि होरिज़ोंटल) */
}
/* सबमिट बटन को विशेष बैकग्राउंड-कलर और अन्य स्टाइल्स सेट करें */
input[type=submit] {
  बैकग्राउंड-कलर: #04AA6D;
  कलर: श्वेत;
  पैडिंग: 12पिक्सेल 20पिक्सेल;
  बॉर्डर: नहीं;
  बॉर्डर-रेडियस: 4पिक्सेल;
  कर्सर: पॉइंटर;
}
/* माउस को हवा करने पर सबमिट बटन पर गहरा हरा बैकग्राउंड-कलर जोड़ें */
input[type=submit]:hover {
  बैकग्राउंड-कलर: #45a049;
}
/* फॉर्म कंटेनर को बैकग्राउंड-कलर और कुछ आंतरिक पैडिंग जोड़ें */
.container {
  बॉर्डर-रेडियस: 5पिक्सेल;
  बैकग्राउंड-कलर: #f2f2f2;
  पैडिंग: 20पिक्सेल;
}

स्वयं का प्रयोग करें

संबंधित पृष्ठ

तूतीकरण:HTML फॉर्म

तूतीकरण:CSS फॉर्म