نماذج الأعمال
أنماط عملية وأمثلة واضحة قابلة للتخصيص لمشروعك.
بيانات النشاط
عرض كود المثال
<form data-business-form="businessForm" novalidate>
<div class="form-grid">
<label class="field">
<span>المؤسسة</span>
<input name="organization" type="text" value="" required maxlength="100">
</label>
<label class="field">
<span>رابط الموقع</span>
<input name="website" type="url" value="" placeholder="https://example.com">
</label>
<label class="field">
<span>المجال</span>
<select name="industry" >
<option value="التجارة">التجارة</option>
<option value="الخدمات">الخدمات</option>
<option value="التعليم">التعليم</option>
<option value="التقنية">التقنية</option>
</select>
</label>
<label class="field">
<span>حجم الفريق</span>
<select name="teamSize" >
<option value="1–5">1–5</option>
<option value="6–20">6–20</option>
<option value="21–50">21–50</option>
<option value="50+">50+</option>
</select>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>أفهم أن هذا النموذج تجربة محلية.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">إعادة ضبط التجربة</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>حفظ التغييرات</button>
</div>
</form>عنوان الفوترة
عرض كود المثال
<form data-business-form="billingForm" novalidate>
<div class="form-grid">
<label class="field">
<span>الشركة</span>
<input name="company" type="text" value="" required>
</label>
<label class="field">
<span>العنوان</span>
<input name="street" type="text" value="" required>
</label>
<label class="field">
<span>المدينة</span>
<input name="city" type="text" value="" required>
</label>
<label class="field">
<span>الرمز البريدي</span>
<input name="postal" type="text" value="" required maxlength="20">
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>أفهم أن هذا النموذج تجربة محلية.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">إعادة ضبط التجربة</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>حفظ التغييرات</button>
</div>
</form>نموذج تواصل
عرض كود المثال
<form data-business-form="contactForm" novalidate>
<div class="form-grid">
<label class="field">
<span>الاسم الكامل</span>
<input name="name" type="text" value="" required>
</label>
<label class="field">
<span>البريد الإلكتروني</span>
<input name="email" type="email" value="" required>
</label>
<label class="field">
<span>رقم الهاتف</span>
<input name="phone" type="tel" value="" maxlength="30">
</label>
<label class="field">
<span>الرسالة</span>
<textarea name="message" required maxlength="2000">
</textarea>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>أفهم أن هذا النموذج تجربة محلية.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">إعادة ضبط التجربة</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>حفظ التغييرات</button>
</div>
</form>بيانات المنتج
عرض كود المثال
<form data-business-form="productForm" novalidate>
<div class="form-grid">
<label class="field">
<span>اسم المنتج</span>
<input name="name" type="text" value="" required>
</label>
<label class="field">
<span>رمز المنتج</span>
<input name="sku" type="text" value="" required>
</label>
<label class="field">
<span>السعر</span>
<input name="price" type="number" value="0" required min="0" step="0.01">
</label>
<label class="field">
<span>المخزون</span>
<input name="stock" type="number" value="0" required min="0" step="1">
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>أفهم أن هذا النموذج تجربة محلية.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">إعادة ضبط التجربة</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>حفظ التغييرات</button>
</div>
</form>التفضيلات
عرض كود المثال
<form data-business-form="preferencesForm" novalidate>
<div class="form-grid">
<label class="field">
<span>العملة</span>
<select name="currency" >
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="ILS">ILS</option>
</select>
</label>
<label class="field">
<span>المنطقة الزمنية</span>
<select name="timezone" >
<option value="Asia/Jerusalem">Asia/Jerusalem</option>
<option value="Asia/Amman">Asia/Amman</option>
<option value="Europe/London">Europe/London</option>
<option value="UTC">UTC</option>
</select>
</label>
<label class="field">
<span>تخطيط التنقل</span>
<select name="layout" >
<option value="sidebar">قائمة جانبية كاملة</option>
<option value="compactSidebar">قائمة جانبية مصغرة</option>
<option value="topNavigation">تنقل علوي</option>
</select>
</label>
<label class="field">
<span>مظهر الواجهة</span>
<select name="theme" >
<option value="light">فاتح</option>
<option value="dark">داكن</option>
<option value="system">حسب الجهاز</option>
</select>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>أفهم أن هذا النموذج تجربة محلية.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">إعادة ضبط التجربة</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>حفظ التغييرات</button>
</div>
</form>