الانتقال إلى المحتوى
الأقسام
اللغة، حاليًا العربية
نظام تصميم Rastrillo

النموذج

الحقول التي يكتب فيها الشخص، في الحالات التي يضعها فيها نموذج حقيقي. وكلٌّ منها داخل ‎rst-box‎ ذي حشو، لأن هذه هي القاعدة التي تفترضها هذه الأجزاء.

كل مثال يعمل فعلًا، لكن روابطه لا تؤدي إلى أي مكان. يعرض HTML الترميز الجاهز للنسخ.

field

تسمية وحقل إدخال وتلميح اختياري وشرح وخطأ. عنصر التحكّم النصّي العام، بمعرّف صريح.

مجرّد

معاينة

ضع هذا داخل <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

حقل نصّي واحد بتسمية، والمعرّفات مشتقّة من 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

مبلغ بعملة واحدة. يظهر رمز العملة بجانب التسمية ويُرسل مع النموذج، لذا يُكتشف عند الحفظ أي تغيّر في العملة حدث أثناء الكتابة. استخدمه مع Currency في form.Field على الخادم.

مجرّد

معاينة

ضع هذا داخل <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}}