सामग्री पर जाएँ
अनुभाग
भाषा, अभी हिन्दी
Rastrillo डिज़ाइन सिस्टम

फ़ॉर्म

वे फ़ील्ड जिनमें कोई व्यक्ति लिखता है, उन्हीं स्थितियों में जिनमें कोई असली फ़ॉर्म उन्हें रखता है। हर एक पैडिंग वाले rst-box में बैठता है, क्योंकि ये पार्शियल यही मानकर चलते हैं।

हर उदाहरण असली है, पर उसके लिंक कहीं नहीं ले जाते। HTML कॉपी करने के लिए मार्कअप दिखाता है।

field

लेबल, इनपुट, वैकल्पिक संकेत, सहायता और त्रुटि। सामान्य टेक्स्ट जैसा कंट्रोल, स्पष्ट ID के साथ।

सादा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_bare">शीर्षक</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "शीर्षक"}}

एक संकेत के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_hint">स्लग <span rst-field-hint>(छोटे अक्षर, बिना स्पेस)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "स्लग"
    "Hint" "छोटे अक्षर, बिना स्पेस"}}

नियंत्रण के नीचे सहायता के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_help">ईमेल</label>
  <input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
  <p rst-field-help id="f_help-help">हम इसका उपयोग केवल आपको जवाब भेजने के लिए करते हैं।</p>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "ईमेल"
    "Type" "email"
    "Help" "हम इसका उपयोग केवल आपको जवाब भेजने के लिए करते हैं।"
    "Autocomplete" "email"}}

अनिवार्य

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_required">पूरा नाम</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "पूरा नाम"
    "Required" true}}

त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_error">ईमेल</label>
  <input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
  <p rst-field-error id="f_error-error" role="alert">यह ईमेल पता नहीं लगता।</p>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "ईमेल"
    "Type" "email"
    "Error" "यह ईमेल पता नहीं लगता।"
    "Value" "grace@"}}

छोटा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_short">पिन कोड</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "पिन कोड"
    "Short" true
    "Value" "D02 XY45"}}

मुख्य फ़ील्ड

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="f_primary">शीर्षक</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="तिमाही बोर्ड बैठक">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "शीर्षक"
    "Primary" true
    "Value" "तिमाही बोर्ड बैठक"}}

field-text

एक लेबल वाला टेक्स्ट इनपुट, ids Name से बनते हैं। अनिवार्य चिह्न का तारा aria-hidden है। प्रोग्रामेटिक संकेत इनपुट का required एट्रिब्यूट है।

सादा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ft_bare">शीर्षक</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-text" dict "Name" "ft_bare" "Label" "शीर्षक"}}

एक संकेत के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ft_hint">मुख्य शीर्षक</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">सूची में दिखता है।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "मुख्य शीर्षक"
    "Hint" "सूची में दिखता है।"}}

अनिवार्य

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ft_required">प्रदर्शित नाम <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "प्रदर्शित नाम"
    "Required" true
    "Autocomplete" "nickname"}}

त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ft_error">शीर्षक</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="रिलीज़ नोट्स" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">इस शीर्षक वाली पोस्ट पहले से मौजूद है।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "शीर्षक"
    "Value" "रिलीज़ नोट्स"
    "Error" "इस शीर्षक वाली पोस्ट पहले से मौजूद है।"}}

मुख्य फ़ील्ड

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ft_primary">यह क्या है?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="तिमाही बोर्ड बैठक">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "यह क्या है?"
    "Value" "तिमाही बोर्ड बैठक"
    "Primary" true}}

फ़ॉर्म के मुख्य फ़ील्ड — जैसे शीर्षक या नाम — पर Primary लगाएँ, जिससे इनपुट अधिक प्रमुख दिखे।

field-url

वेब पते का फ़ील्ड, जो example.com को https:// के साथ या उसके बिना स्वीकार करता है। सर्वर पर इसे form.URL के साथ इस्तेमाल करें।

सादा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fu_bare">वेबसाइट</label>
  <input rst-input id="fu_bare" name="fu_bare" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-url" dict "Name" "fu_bare" "Label" "वेबसाइट"}}

एक संकेत के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fu_hint">कंपनी की वेबसाइट</label>
  <input rst-input id="fu_hint" name="fu_hint" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="fu_hint-hint">
  <small rst-field-hint id="fu_hint-hint">आप https छोड़ सकते हैं।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "कंपनी की वेबसाइट"
    "Hint" "आप https छोड़ सकते हैं।"}}

त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fu_error">वेबसाइट</label>
  <input rst-input id="fu_error" name="fu_error" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" value="brightwater" aria-invalid="true" aria-describedby="fu_error-error">
  <small rst-field-error id="fu_error-error">कोई वेब पता दर्ज करें, जैसे example.com।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "वेबसाइट"
    "Value" "brightwater"
    "Error" "कोई वेब पता दर्ज करें, जैसे example.com।"}}

field-money

एक ही मुद्रा में राशि। मुद्रा कोड लेबल के पास दिखता है और फ़ॉर्म के साथ भेजा जाता है, इसलिए अगर किसी के टाइप करते समय मुद्रा बदल गई हो, तो सहेजते समय यह पकड़ में आ जाता है। सर्वर पर इसे form.Field के Currency के साथ इस्तेमाल करें।

सादा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fm_bare">टिकट की कीमत <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_bare" name="fm_bare" type="text" inputmode="decimal">
  <input type="hidden" name="fm_bare.locale" value="en">
  <input type="hidden" name="fm_bare.currency" value="EUR">
  <input type="hidden" name="fm_bare.seed" value="">
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "टिकट की कीमत"
    "Locale" "en"
    "Currency" "EUR"}}

एक संकेत के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fm_hint">टिकट की कीमत <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_hint" name="fm_hint" type="text" inputmode="decimal" aria-describedby="fm_hint-hint">
  <input type="hidden" name="fm_hint.locale" value="en">
  <input type="hidden" name="fm_hint.currency" value="EUR">
  <input type="hidden" name="fm_hint.seed" value="">
  <small rst-field-hint id="fm_hint-hint">उदाहरण के लिए, 12.50 या €12.50।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "टिकट की कीमत"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "उदाहरण के लिए, 12.50 या €12.50।"}}

त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="fm_error">टिकट की कीमत <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_error" name="fm_error" type="text" inputmode="decimal" value="12,.50" aria-invalid="true" aria-describedby="fm_error-error">
  <input type="hidden" name="fm_error.locale" value="en">
  <input type="hidden" name="fm_error.currency" value="EUR">
  <input type="hidden" name="fm_error.seed" value="">
  <small rst-field-error id="fm_error-error">दशमलव के लिए बिंदु का उपयोग करें, जैसे 12.50।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "टिकट की कीमत"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "दशमलव के लिए बिंदु का उपयोग करें, जैसे 12.50।"}}

field-textarea

field-text का आवरण, एक textarea के चारों ओर।

सादा

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ta_bare">नोट्स</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-textarea" dict "Name" "ta_bare" "Label" "नोट्स" "Rows" 3}}

एक संकेत के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ta_hint">परिचय</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">आपकी प्रोफ़ाइल पर दिखता है।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "परिचय"
    "Rows" 3
    "Hint" "आपकी प्रोफ़ाइल पर दिखता है।"}}

त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ta_error">सारांश</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">सारांश में कम से कम बीस अक्षर होने चाहिए।</small>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "सारांश"
    "Value" "…"
    "Rows" 3
    "Error" "सारांश में कम से कम बीस अक्षर होने चाहिए।"}}

अनिवार्य

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="ta_required">रिफ़ंड का कारण <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "रिफ़ंड का कारण"
    "Rows" 3
    "Required" true}}