الاختيارات والإجراءات

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_few">الدور</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>مسؤول</option>
    <option value="editor">محرر</option>
    <option value="member">عضو</option>
  </select>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_many">المدينة</label>
  <select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="اكتب للتصفية" data-rst-select-results="{n} نتائج" data-rst-select-result-one="نتيجة واحدة" data-rst-select-no-matches="لا توجد نتائج مطابقة" aria-describedby="sel_many-help">
    <option value="dublin" selected>دبلن</option>
    <option value="lisbon">لشبونة</option>
    <option value="madrid">مدريد</option>
    <option value="berlin">برلين</option>
    <option value="rome">روما</option>
    <option value="athens">أثينا</option>
    <option value="helsinki">هلسنكي</option>
    <option value="reykjavík">ريكيافيك</option>
    <option value="warsaw">وارسو</option>
    <option value="zagreb">زغرب</option>
    <option value="tallinn">تالين</option>
    <option value="valletta">فاليتا</option>
  </select>
  <p rst-field-help id="sel_many-help">ابدأ الكتابة للتصفية.</p>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_plain">المدينة</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>دبلن</option>
    <option value="lisbon">لشبونة</option>
    <option value="madrid">مدريد</option>
    <option value="berlin">برلين</option>
    <option value="rome">روما</option>
    <option value="athens">أثينا</option>
    <option value="helsinki">هلسنكي</option>
    <option value="reykjavík">ريكيافيك</option>
    <option value="warsaw">وارسو</option>
    <option value="zagreb">زغرب</option>
    <option value="tallinn">تالين</option>
    <option value="valletta">فاليتا</option>
  </select>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_error">الدور</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>مسؤول</option>
    <option value="editor">محرر</option>
    <option value="member">عضو</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">اختر دورًا لهذا الشخص.</p>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_grouped">المنطقة</label>
  <select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="اكتب للتصفية" data-rst-select-results="{n} نتائج" data-rst-select-result-one="نتيجة واحدة" data-rst-select-no-matches="لا توجد نتائج مطابقة">
    <optgroup label="أوروبا">
      <option value="dublin" selected>دبلن</option>
      <option value="lisbon">لشبونة</option>
      <option value="warsaw">وارسو</option>
    </optgroup>
    <optgroup label="الأمريكتان">
      <option value="montreal">مونتريال</option>
      <option value="lima">ليما</option>
      <option value="austin">أوستن</option>
    </optgroup>
    <optgroup label="آسيا">
      <option value="osaka">أوساكا</option>
      <option value="hanoi">هانوي</option>
      <option value="dhaka">دكا</option>
    </optgroup>
    <optgroup label="أفريقيا">
      <option value="accra">أكرا</option>
      <option value="nairobi">نيروبي</option>
      <option value="tunis">تونس</option>
    </optgroup>
  </select>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  راسلني عند وصول الردود
</label>

ضع هذا داخل <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  راسلني عند الإشارة إليّ
</label>

ضع هذا داخل <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  أرسل لي ملخصًا أسبوعيًا
</label>

ضع هذا داخل <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>الخطة</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>مجاني</span>
        <span rst-choice-desc>مشروع واحد، ودعم من المجتمع.</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>احترافي</span>
        <span rst-choice-desc>مشاريع بلا حدود وصندوق بريد للدعم.</span>
      </span>
    </label>
  </div>
</fieldset>

ضع هذا داخل <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>أرسل إليّ</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>الردود</span>
        <span rst-choice-desc>فور حدوثها.</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>ملخص أسبوعي</span>
        <span rst-choice-desc>صباح كل اثنين.</span>
      </span>
    </label>
  </div>
</fieldset>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">حفظ المنشور</button>
  <a rst-btn="lg" href="/posts">العودة إلى المنشورات</a>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">إرسال الدعوة</button>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">نشر</button>
  <a rst-btn="lg" href="/posts">العودة إلى المنشورات</a>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit" aria-busy="true" disabled>
    <span rst-spin aria-hidden="true"></span>
    نشر
  </button>
  <a rst-btn="lg" href="/posts">العودة إلى المنشورات</a>
</div>

ضع هذا داخل <section rst-box>.

<form rst-form-actions method="post" action="/posts/1/delete">
  <input type="hidden" name="csrf" value="tok-123">
  <input type="hidden" name="id" value="1">
  <a rst-btn="ghost lg" href="/posts/1">إلغاء</a>
  <button type="submit" rst-btn="danger lg">حذف هذا المنشور</button>
</form>

ضع هذا داخل <section rst-box>.

<form rst-form-actions method="post" action="/posts/1/publish">
  <a rst-btn="ghost lg" href="/posts/1">إلغاء</a>
  <button type="submit" rst-btn="primary lg">نشر</button>
</form>