মূল বিষয়ে যান
বিভাগসমূহ
ভাষা, এখন বাংলা
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

লেবেলসহ একটি টেক্সট ইনপুট, id তৈরি হয় 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

একটি textarea-র চারপাশে field-text-এর মোড়ক।

সাদামাটা

প্রিভিউ

এটি <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}}