Tailwind CSS Academy · पाठ

फ़ॉर्म लेआउट प्रतिरूप

समान gap और संरेखण यूटिलिटी के साथ flex और grid का उपयोग करके लेबल और इनपुट को क्रमबद्ध या इनलाइन लेआउट में व्यवस्थित करें।

पाठ 3, कुल 4 में से13 चरण

फ़ॉर्म लेआउट प्रतिरूप, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

फ़ॉर्म लेआउट क्यों महत्वपूर्ण है

फ़ॉर्म का लेआउट उसके अलग-अलग फ़ील्ड की स्टाइलिंग जितना ही महत्वपूर्ण है। अच्छी तरह व्यवस्थित फ़ॉर्म उपयोगकर्ताओं को स्वाभाविक रूप से पूरा करने में मार्गदर्शन करता है, जबकि खराब व्यवस्था उसे अधूरा छोड़ने की संभावना बढ़ाती है। फ़ॉर्म लेआउट में यह शामिल है कि लेबल और इनपुट किस तरह रखे जाते हैं, कई कॉलम वाले फ़ील्ड कैसे व्यवस्थित होते हैं, और सबमिट व रद्द करने जैसी कार्रवाइयाँ कहाँ रखी जाती हैं।

Tailwind की flex और grid यूटिलिटी बिना कोई कस्टम CSS लिखे इन सभी व्यवस्थाओं को सरल बनाती हैं।

ऊर्ध्वाधर फ़ॉर्म लेआउट

स्टैक्ड लेआउट में लेबल सीधे अपने इनपुट के ऊपर रखा जाता है, जो मोबाइल के लिए सबसे अनुकूल और पढ़ने में आसान तरीका है। प्रत्येक लेबल-इनपुट जोड़ी flex flex-col gap-1 वाले कंटेनर में रहती है और पूरा फ़ॉर्म जोड़ियों के बीच space-y-5 का उपयोग करता है।

यह लेआउट सबसे अधिक पूर्णता दर देने वाला सिद्ध हुआ है, क्योंकि उपयोगकर्ता इनपुट देखने से पहले लेबल पढ़ते हैं और कार्रवाई करने से पहले संदर्भ समझ लेते हैं।

<form class="max-w-md space-y-5">
  <div class="flex flex-col gap-1">
    <label for="fname" class="text-sm font-medium text-gray-700">First name</label>
    <input id="fname" type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <div class="flex flex-col gap-1">
    <label for="email" class="text-sm font-medium text-gray-700">Email address</label>
    <input id="email" type="email" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <button type="submit" class="w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
    Submit
  </button>
</form>

क्षैतिज फ़ॉर्म लेआउट

इनलाइन लेआउट में लेबल और इनपुट एक ही पंक्ति में, इनपुट के बाईं ओर रखा जाता है। यह संक्षिप्त होता है और प्रशासनिक फ़ॉर्म या खोज फ़िल्टर के लिए अच्छा काम करता है, जहाँ ऊर्ध्वाधर स्थान सीमित होता है। प्रत्येक पंक्ति पर flex items-center gap-4 लगाएँ और लेबल को w-32 flex-shrink-0 जैसी निश्चित चौड़ाई दें, ताकि सभी लेबल एक समान दाएँ किनारे पर संरेखित हों।

मोबाइल पर इन पंक्तियों को प्रतिक्रियाशील ब्रेकपॉइंट की सहायता से स्टैक्ड लेआउट में बदलना चाहिए: flex-col sm:flex-row।

<form class="space-y-4">
  <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
    <label for="h-name" class="text-sm font-medium text-gray-700 sm:w-32 sm:flex-shrink-0 sm:text-right">
      Full name
    </label>
    <input id="h-name" type="text" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
    <label for="h-email" class="text-sm font-medium text-gray-700 sm:w-32 sm:flex-shrink-0 sm:text-right">
      Email
    </label>
    <input id="h-email" type="email" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
</form>

दो-कॉलम फ़ॉर्म ग्रिड

कई फ़ील्ड वाले फ़ॉर्म में दो-कॉलम ग्रिड दो फ़ील्ड को साथ-साथ रखकर ऊर्ध्वाधर स्थान बचाता है। फ़ॉर्म के मुख्य भाग पर grid grid-cols-1 sm:grid-cols-2 gap-5 का उपयोग करें। जिन फ़ील्ड को पूरी चौड़ाई चाहिए, जैसे संदेश textarea, उनके लिए sm:col-span-2 उपयोग करें।

यह तरीका चेकआउट फ़ॉर्म, प्रोफ़ाइल संपादन पृष्ठों और पंजीकरण फ़ॉर्म में बहुत आम है।

<form class="grid grid-cols-1 sm:grid-cols-2 gap-5">
  <div class="flex flex-col gap-1">
    <label class="text-sm font-medium text-gray-700">First name</label>
    <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <div class="flex flex-col gap-1">
    <label class="text-sm font-medium text-gray-700">Last name</label>
    <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <!-- Full-width field -->
  <div class="flex flex-col gap-1 sm:col-span-2">
    <label class="text-sm font-medium text-gray-700">Email address</label>
    <input type="email" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <!-- Full-width textarea -->
  <div class="flex flex-col gap-1 sm:col-span-2">
    <label class="text-sm font-medium text-gray-700">Message</label>
    <textarea rows="3" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
  </div>
</form>

फ़ॉर्म अनुभाग विभाजक

संज्ञानात्मक बोझ कम करने के लिए लंबे फ़ॉर्म को तार्किक अनुभागों में बाँटा जाता है। अनुभाग शीर्षक के लिए text-base font-semibold text-gray-900 और फ़ील्ड के समूहों को दृश्य रूप से अलग करने के लिए border-t border-gray-200 pt-6 mt-6 का सूक्ष्म विभाजक उपयोग करें।

प्रोफ़ाइल फ़ॉर्म के सामान्य अनुभाग हैं: व्यक्तिगत जानकारी, संपर्क विवरण, प्राथमिकताएँ और सुरक्षा। प्रत्येक अनुभाग एक स्पष्ट विषय से संबंधित होता है, जिससे उपयोगकर्ताओं को फ़ॉर्म भरने से पहले उसकी संरचना समझने में सहायता मिलती है।

<form class="max-w-2xl space-y-8">
  <!-- Section 1 -->
  <div>
    <h3 class="text-base font-semibold text-gray-900">Personal Information</h3>
    <p class="mt-1 text-sm text-gray-500">Update your personal details.</p>
    <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
      <div class="flex flex-col gap-1">
        <label class="text-sm font-medium text-gray-700">First name</label>
        <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
      <div class="flex flex-col gap-1">
        <label class="text-sm font-medium text-gray-700">Last name</label>
        <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
    </div>
  </div>
  <!-- Section divider -->
  <div class="border-t border-gray-200 pt-6">
    <h3 class="text-base font-semibold text-gray-900">Contact Details</h3>
  </div>
</form>

अनिवार्य फ़ील्ड संकेतक

परंपरागत रूप से, अनिवार्य फ़ील्ड को लाल तारक चिह्न से दर्शाया जाता है। लेबल के पाठ के तुरंत बाद <span class="text-red-500">*</span> रखें। फ़ॉर्म के शीर्ष पर तारक चिह्न से अनिवार्य फ़ील्ड दर्शाए गए हैं जैसा वैकल्पिक सहायक नोट जोड़ें।

अनिवार्य फ़ील्ड का सत्यापन हमेशा सर्वर की ओर से करें। दृश्य संकेतक उपयोगकर्ता अनुभव की सुविधा है, सुरक्षा उपाय नहीं। ब्राउज़र-स्तरीय सत्यापन के लिए इनपुट पर HTML required विशेषता को शुरुआती प्रतिक्रिया के रूप में उपयोग करें।

<form class="max-w-md space-y-5">
  <p class="text-xs text-gray-500">Fields marked with <span class="text-red-500">*</span> are required.</p>
  <div class="flex flex-col gap-1">
    <label for="req-name" class="text-sm font-medium text-gray-700">
      Full name <span class="text-red-500">*</span>
    </label>
    <input id="req-name" type="text" required
      class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <div class="flex flex-col gap-1">
    <label for="req-email" class="text-sm font-medium text-gray-700">
      Email <span class="text-red-500">*</span>
    </label>
    <input id="req-email" type="email" required
      class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
  <div class="flex flex-col gap-1">
    <label for="opt-phone" class="text-sm font-medium text-gray-700">Phone number</label>
    <input id="opt-phone" type="tel"
      class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
</form>

फ़ील्ड के नीचे सहायक पाठ

सहायक पाठ इनपुट के नीचे अतिरिक्त संदर्भ या प्रारूप संबंधी निर्देश देता है। इनपुट के नीचे मौजूद <p> टैग पर mt-1 text-xs text-gray-500 का उपयोग करें और स्क्रीन रीडर सहायता के लिए उसे aria-describedby के माध्यम से इनपुट से जोड़ें।

सहायक पाठ संक्षिप्त रखें — अधिकतम एक छोटा वाक्य। पासवर्ड फ़ील्ड के लिए, मजबूती की आवश्यकताओं (कम से कम 8 वर्ण, एक अंक) को समझाने वाला सहायक पाठ सबमिट करने के बाद होने वाली निराशाजनक सत्यापन विफलताओं को रोकता है।

<div class="flex flex-col gap-1">
  <label for="pw" class="text-sm font-medium text-gray-700">Password</label>
  <input
    id="pw"
    type="password"
    aria-describedby="pw-hint"
    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  <p id="pw-hint" class="mt-1 text-xs text-gray-500">
    Must be at least 8 characters with one uppercase letter and one number.
  </p>
</div>

फ़ॉर्म कार्रवाई बटन का स्थान

सबमिट बटन का स्थान फ़ॉर्म पूरा करने की दर को प्रभावित करता है। एक-कॉलम वाले स्टैक्ड फ़ॉर्म के लिए पूरी चौड़ाई वाला w-full बटन अच्छा काम करता है। कार्ड-आधारित या मोडल फ़ॉर्म के लिए, flex justify-end gap-3 की सहायता से प्राथमिक और द्वितीयक कार्रवाइयों को नीचे दाईं ओर रखें।

विनाशकारी या द्वितीयक कार्रवाई (रद्द करें, रीसेट करें) को हमेशा प्राथमिक कार्रवाई (सबमिट करें, सहेजें) के बाईं ओर रखें, ताकि उपयोगकर्ता सबमिट करने से पहले रद्द करें पढ़ें और रद्द करने का प्रयास करते समय गलती से सबमिट न कर दें।

<!-- Full width (mobile forms) -->
<div class="space-y-3">
  <button type="submit" class="w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
    Create Account
  </button>
  <button type="button" class="w-full py-2.5 text-gray-700 font-semibold rounded-lg border border-gray-300 hover:bg-gray-50">
    Cancel
  </button>
</div>

<!-- Right-aligned (desktop forms) -->
<div class="flex justify-end gap-3 pt-6 border-t border-gray-200">
  <button type="button" class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
    Cancel
  </button>
  <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700">
    Save Changes
  </button>
</div>

फ़्लोटिंग लेबल पैटर्न

फ़्लोटिंग लेबल शुरुआत में प्लेसहोल्डर पाठ की तरह इनपुट के अंदर रहता है और उपयोगकर्ता के फ़ोकस करने या लिखने पर इनपुट के ऊपर चला जाता है। इससे लेबल की दृश्यता बनाए रखते हुए ऊर्ध्वाधर स्थान बचता है। इसे रैपर पर relative, focus और not-placeholder-shown स्थितियों में रूपांतरित होने वाले absolute लेबल और peer यूटिलिटी की सहायता से लागू करें।

मुख्य यूटिलिटी peer-placeholder-shown:translate-y-0 है, जो इनपुट खाली होने पर लेबल को उसके अंदर रखती है; और peer-focus:-translate-y-6 peer-focus:scale-75 फ़ोकस होने पर उसे ऊपर ले जाकर छोटा करती है।

<div class="relative">
  <input
    id="float-name"
    type="text"
    placeholder=" "
    class="peer w-full px-3 pt-5 pb-2 text-sm text-gray-900 border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  />
  <label
    for="float-name"
    class="absolute left-3 top-3 text-sm text-gray-500 transition-all duration-200
           peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600
           peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-xs">
    Full name
  </label>
</div>

इनलाइन फ़ॉर्म (खोज बार शैली)

इनलाइन फ़ॉर्म में इनपुट और सबमिट बटन एक ही पंक्ति में होते हैं, जैसे न्यूज़लेटर साइनअप या मुख्य खोज बार में। flex gap-2 वाला कंटेनर उपयोग करें, जिसमें इनपुट flex-1 स्थान ले और बटन की चौड़ाई निश्चित हो।

मोबाइल पर इन्हें flex-col sm:flex-row की सहायता से लंबवत रखा जा सकता है, ताकि छोटी स्क्रीन पर इनपुट पूरी चौड़ाई ले और बटन उसके नीचे आ जाए।

<!-- Email newsletter signup -->
<form class="flex flex-col sm:flex-row gap-3 max-w-md">
  <input
    type="email"
    placeholder="Enter your email"
    class="flex-1 px-4 py-2.5 text-sm border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  <button
    type="submit"
    class="px-6 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-lg
           hover:bg-blue-700 whitespace-nowrap transition-colors">
    Subscribe
  </button>
</form>

बहु-चरणीय फ़ॉर्म नेविगेशन

लंबे फ़ॉर्म को तार्किक चरणों में बाँटने वाला बहु-चरणीय नेविगेशन उपयोगी होता है। शीर्ष पर मौजूद प्रगति संकेतक वर्तमान चरण की स्थिति दिखाता है। प्रत्येक चरण की सामग्री शर्त के अनुसार दिखाई जाती है और नेविगेशन बटन (पीछे/आगे) नीचे रखे जाते हैं।

चरण संकेतकों को क्रमांकित वृत्तों की तरह स्टाइल करें: w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold। पूरे किए गए चरणों में bg-blue-600 text-white, वर्तमान चरण में border-2 border-blue-600 text-blue-600, और भविष्य के चरणों में border-2 border-gray-300 text-gray-400 का उपयोग करें।

<!-- Step progress indicator -->
<div class="flex items-center gap-0">
  <!-- Completed -->
  <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-bold">1</div>
  <div class="flex-1 h-0.5 bg-blue-600"></div>
  <!-- Current -->
  <div class="w-8 h-8 rounded-full border-2 border-blue-600 text-blue-600 flex items-center justify-center text-sm font-bold">2</div>
  <div class="flex-1 h-0.5 bg-gray-200"></div>
  <!-- Future -->
  <div class="w-8 h-8 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">3</div>
</div>

त्वरित जाँच

इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: स्टैक्ड लेआउट प्रत्येक लेबल-इनपुट जोड़ी के लिए flex flex-col gap-1 और पंक्तियों के बीच space-y-5 का उपयोग करते हैं; दो-कॉलम ग्रिड फ़ॉर्म grid grid-cols-1 sm:grid-cols-2 gap-5 के साथ पूरी चौड़ाई वाले फ़ील्ड के लिए sm:col-span-2 का उपयोग करते हैं; और फ़ॉर्म कार्रवाइयाँ डेस्कटॉप मोडल में दाईं ओर संरेखित तथा मोबाइल फ़ॉर्म में पूरी चौड़ाई वाली रखी जाती हैं। अब हम सत्यापन और त्रुटि स्थितियों की स्टाइलिंग करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ़ॉर्म लेआउट प्रतिरूप” पाठ निःशुल्क है?

हाँ—“फ़ॉर्म लेआउट प्रतिरूप” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़ॉर्म लेआउट प्रतिरूप” में मैं क्या सीखूँगा?

समान gap और संरेखण यूटिलिटी के साथ flex और grid का उपयोग करके लेबल और इनपुट को क्रमबद्ध या इनलाइन लेआउट में व्यवस्थित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“फ़ॉर्म लेआउट प्रतिरूप” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ