تخطيطات النماذج المتقدمة

<form> <div class="row mb-3"> <div class="col-md-6"> <label for="firstName" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="firstName" required> </div> <div class="col-md-6"> <label for="lastName" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="lastName" required> </div> </div> <div class="row mb-3"> <div class="col-md-8"> <label for="email" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="email" required> </div> <div class="col-md-4"> <label for="age" class="form-label">العمر</label> <input type="number" class="form-control" id="age" min="18" required> </div> </div> <div class="row mb-3"> <div class="col-md-4"> <label for="city" class="form-label">المدينة</label> <input type="text" class="form-control" id="city" required> </div> <div class="col-md-4"> <label for="state" class="form-label">الولاية</label> <select class="form-select" id="state" required> <option value="">اختر...</option> <option>كاليفورنيا</option> <option>تكساس</option> <option>نيويورك</option> </select> </div> <div class="col-md-4"> <label for="zip" class="form-label">الرمز البريدي</label> <input type="text" class="form-control" id="zip" required> </div> </div> <div class="row mb-3"> <div class="col-12"> <label for="address" class="form-label">عنوان الشارع</label> <input type="text" class="form-control" id="address" placeholder="1234 شارع رئيسي" required> </div> </div> <div class="row mb-3"> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="agreeTerms" required> <label class="form-check-label" for="agreeTerms"> أوافق على الشروط والأحكام </label> </div> </div> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form>

<form> <!-- صف مضغوط مع تباعد أصغر --> <div class="row g-2 mb-3"> <div class="col-md"> <div class="form-floating"> <input type="text" class="form-control" id="floatingInputGrid1" placeholder="الاسم الأول"> <label for="floatingInputGrid1">الاسم الأول</label> </div> </div> <div class="col-md"> <div class="form-floating"> <input type="text" class="form-control" id="floatingInputGrid2" placeholder="الاسم الأخير"> <label for="floatingInputGrid2">الاسم الأخير</label> </div> </div> </div> <div class="row g-2 mb-3"> <div class="col-md-8"> <div class="form-floating"> <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com"> <label for="floatingEmail">عنوان البريد الإلكتروني</label> </div> </div> <div class="col-md-4"> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid"> <option selected>اختر...</option> <option value="1">واحد</option> <option value="2">اثنان</option> <option value="3">ثلاثة</option> </select> <label for="floatingSelectGrid">اختر</label> </div> </div> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form>

<form class="row gy-2 gx-3 align-items-center"> <div class="col-auto"> <label class="visually-hidden" for="autoSizingInput">الاسم</label> <input type="text" class="form-control" id="autoSizingInput" placeholder="جين دو"> </div> <div class="col-auto"> <label class="visually-hidden" for="autoSizingInputGroup">اسم المستخدم</label> <div class="input-group"> <div class="input-group-text">@</div> <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="اسم المستخدم"> </div> </div> <div class="col-auto"> <label class="visually-hidden" for="autoSizingSelect">التفضيل</label> <select class="form-select" id="autoSizingSelect"> <option selected>اختر...</option> <option value="1">واحد</option> <option value="2">اثنان</option> <option value="3">ثلاثة</option> </select> </div> <div class="col-auto"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="autoSizingCheck"> <label class="form-check-label" for="autoSizingCheck"> تذكرني </label> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">إرسال</button> </div> </form>

<form class="needs-validation" novalidate> <!-- قسم المعلومات الشخصية --> <h4 class="mb-3">المعلومات الشخصية</h4> <div class="row g-3 mb-4"> <div class="col-sm-6"> <label for="regFirstName" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="regFirstName" required> <div class="invalid-feedback"> الاسم الأول الصالح مطلوب. </div> </div> <div class="col-sm-6"> <label for="regLastName" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="regLastName" required> <div class="invalid-feedback"> الاسم الأخير الصالح مطلوب. </div> </div> <div class="col-12"> <label for="regEmail" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="regEmail" placeholder="you@example.com" required> <div class="invalid-feedback"> يرجى إدخال عنوان بريد إلكتروني صالح. </div> </div> <div class="col-12"> <label for="regPassword" class="form-label">كلمة المرور</label> <input type="password" class="form-control" id="regPassword" minlength="8" required> <div class="form-text">يجب أن تكون 8 أحرف على الأقل.</div> <div class="invalid-feedback"> كلمة المرور مطلوبة ويجب أن تكون 8 أحرف على الأقل. </div> </div> <div class="col-12"> <label for="regConfirmPassword" class="form-label">تأكيد كلمة المرور</label> <input type="password" class="form-control" id="regConfirmPassword" required> <div class="invalid-feedback"> يرجى تأكيد كلمة المرور. </div> </div> </div> <!-- قسم العنوان --> <h4 class="mb-3">العنوان</h4> <div class="row g-3 mb-4"> <div class="col-12"> <label for="regAddress" class="form-label">العنوان</label> <input type="text" class="form-control" id="regAddress" placeholder="1234 شارع رئيسي" required> <div class="invalid-feedback"> يرجى إدخال عنوان الشحن الخاص بك. </div> </div> <div class="col-12"> <label for="regAddress2" class="form-label">العنوان 2 <span class="text-muted">(اختياري)</span></label> <input type="text" class="form-control" id="regAddress2" placeholder="شقة أو جناح"> </div> <div class="col-md-5"> <label for="regCountry" class="form-label">الدولة</label> <select class="form-select" id="regCountry" required> <option value="">اختر...</option> <option>الولايات المتحدة</option> <option>كندا</option> <option>المكسيك</option> </select> <div class="invalid-feedback"> يرجى اختيار دولة صالحة. </div> </div> <div class="col-md-4"> <label for="regState" class="form-label">الولاية</label> <select class="form-select" id="regState" required> <option value="">اختر...</option> <option>كاليفورنيا</option> <option>تكساس</option> <option>نيويورك</option> </select> <div class="invalid-feedback"> يرجى تقديم ولاية صالحة. </div> </div> <div class="col-md-3"> <label for="regZip" class="form-label">الرمز البريدي</label> <input type="text" class="form-control" id="regZip" required> <div class="invalid-feedback"> الرمز البريدي مطلوب. </div> </div> </div> <!-- قسم التفضيلات --> <h4 class="mb-3">التفضيلات</h4> <div class="mb-4"> <div class="form-check form-switch mb-2"> <input class="form-check-input" type="checkbox" role="switch" id="regNewsletter"> <label class="form-check-label" for="regNewsletter"> أرسل لي النشرات الإخبارية والعروض الترويجية </label> </div> <div class="form-check form-switch mb-2"> <input class="form-check-input" type="checkbox" role="switch" id="regNotifications" checked> <label class="form-check-label" for="regNotifications"> تمكين إشعارات البريد الإلكتروني </label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="regPublicProfile"> <label class="form-check-label" for="regPublicProfile"> اجعل ملفي الشخصي عامًا </label> </div> </div> <hr class="my-4"> <div class="form-check mb-3"> <input type="checkbox" class="form-check-input" id="regTerms" required> <label class="form-check-label" for="regTerms"> أوافق على الشروط والأحكام </label> <div class="invalid-feedback"> يجب أن توافق قبل الإرسال. </div> </div> <button class="w-100 btn btn-primary btn-lg" type="submit">إنشاء حساب</button> </form>

<div class="container"> <!-- مؤشر التقدم --> <ul class="nav nav-pills mb-4"> <li class="nav-item"> <a class="nav-link active" href="#step1">1. الحساب</a> </li> <li class="nav-item"> <a class="nav-link" href="#step2">2. الملف الشخصي</a> </li> <li class="nav-item"> <a class="nav-link" href="#step3">3. التأكيد</a> </li> </ul> <form> <!-- الخطوة 1: معلومات الحساب --> <div class="step-content" id="step1"> <h4 class="mb-3">معلومات الحساب</h4> <div class="row g-3"> <div class="col-12"> <label for="wizardEmail" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="wizardEmail" required> </div> <div class="col-12"> <label for="wizardUsername" class="form-label">اسم المستخدم</label> <input type="text" class="form-control" id="wizardUsername" required> </div> <div class="col-12"> <label for="wizardPassword" class="form-label">كلمة المرور</label> <input type="password" class="form-control" id="wizardPassword" required> </div> </div> <div class="mt-4"> <button type="button" class="btn btn-primary">الخطوة التالية &larr;</button> </div> </div> <!-- الخطوة 2: معلومات الملف الشخصي (مخفية بشكل افتراضي) --> <div class="step-content d-none" id="step2"> <h4 class="mb-3">معلومات الملف الشخصي</h4> <div class="row g-3"> <div class="col-sm-6"> <label for="wizardFirstName" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="wizardFirstName" required> </div> <div class="col-sm-6"> <label for="wizardLastName" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="wizardLastName" required> </div> <div class="col-12"> <label for="wizardBio" class="form-label">السيرة الذاتية</label> <textarea class="form-control" id="wizardBio" rows="3"></textarea> </div> </div> <div class="mt-4"> <button type="button" class="btn btn-secondary">&rarr; السابق</button> <button type="button" class="btn btn-primary">الخطوة التالية &larr;</button> </div> </div> <!-- الخطوة 3: التأكيد (مخفية بشكل افتراضي) --> <div class="step-content d-none" id="step3"> <h4 class="mb-3">تأكيد معلوماتك</h4> <p>يرجى مراجعة معلوماتك قبل الإرسال.</p> <div class="alert alert-info"> راجع تفاصيلك وانقر فوق إرسال لإكمال التسجيل. </div> <div class="mt-4"> <button type="button" class="btn btn-secondary">&rarr; السابق</button> <button type="submit" class="btn btn-success">إرسال</button> </div> </div> </form> </div>

<form> <!-- استخدم fieldset وlegend للتجميع --> <fieldset class="mb-4"> <legend class="h5">تفضيلات الاتصال</legend> <div class="form-check"> <input class="form-check-input" type="checkbox" id="emailContact"> <label class="form-check-label" for="emailContact">البريد الإلكتروني</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="phoneContact"> <label class="form-check-label" for="phoneContact">الهاتف</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="smsContact"> <label class="form-check-label" for="smsContact">رسالة قصيرة</label> </div> </fieldset> <!-- استخدم aria-describedby لنص المساعدة --> <div class="mb-3"> <label for="accessibleInput" class="form-label">اسم المستخدم</label> <input type="text" class="form-control" id="accessibleInput" aria-describedby="usernameHelp" required> <div id="usernameHelp" class="form-text"> يجب أن يكون اسم المستخدم من 3 إلى 20 حرفًا ويحتوي فقط على حروف وأرقام. </div> </div> <!-- استخدم aria-required للحقول المطلوبة --> <div class="mb-3"> <label for="requiredField" class="form-label"> حقل مطلوب <span class="text-danger" aria-label="مطلوب">*</span> </label> <input type="text" class="form-control" id="requiredField" aria-required="true" required> </div> <!-- استخدم role وaria-live لرسائل التحقق الديناميكية --> <div class="mb-3"> <label for="dynamicInput" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="dynamicInput"> <div class="invalid-feedback" role="alert" aria-live="polite"> يرجى تقديم بريد إلكتروني صالح. </div> </div> <button type="submit" class="btn btn-primary">إرسال</button> </form>