حقول النماذج

<div class="form-grid">
<label class="field">
<span>الاسم الكامل</span>
<input name="name" type="text" value="" placeholder="أحمد منصور" maxlength="80">
</label>
<label class="field">
<span>البريد الإلكتروني</span>
<input name="email" type="email" value="" placeholder="hello@example.com">
</label>
<label class="field">
<span>رقم الهاتف</span>
<input name="telephone" type="tel" value="" autocomplete="tel">
</label>
<label class="field">
<span>عنوان الموقع</span>
<input name="website" type="url" value="" placeholder="https://example.com">
</label>
<label class="field">
<span>حقل للقراءة فقط</span>
<input name="readonly" type="text" value="ORB-2026" readonly>
</label>
<label class="field">
<span>حقل معطل</span>
<input name="disabled" type="text" value="محتوى توضيحي" disabled>
</label>
</div>

<div class="stack">
<label class="field">
<span>التصنيف</span>
<select name="category">
<option>تصميم مواقع</option>
<option>تصميم منتجات</option>
<option>هوية بصرية</option>
<option>تطوير</option>
<option>تسويق</option>
<option>تجربة المستخدم</option>
</select>
</label>
<label class="field">
<span>اختيار قابل للبحث</span>
<input name="searchable" list="project-types">
<datalist id="project-types">
<option value="تصميم مواقع">
</option>
<option value="تصميم منتجات">
</option>
<option value="هوية بصرية">
</option>
<option value="تطوير">
</option>
<option value="تسويق">
</option>
<option value="تجربة المستخدم">
</option>
</datalist>
</label>
<label class="field">
<span>اختيارات متعددة</span>
<select multiple name="multiple" size="3">
<option>تصميم مواقع</option>
<option>تصميم منتجات</option>
<option>هوية بصرية</option>
<option>تطوير</option>
<option>تسويق</option>
<option>تجربة المستخدم</option>
</select>
</label>
<fieldset class="choice-fieldset">
<legend>خيار التسليم</legend>
<div class="flex wrap">
<label class="check-label">
<input type="radio" name="delivery" value="standard" checked>عادي</label>
<label class="check-label">
<input type="radio" name="delivery" value="priority" >أولوية</label>
</div>
</fieldset>
<label class="toggle-row">
<span>تفعيل الإشعارات</span>
<input type="checkbox" class="switch" name="notifications" checked>
</label>
</div>

<div class="form-grid">
<label class="field">
<span>التاريخ</span>
<input name="date" type="date" value="" >
</label>
<label class="field">
<span>الوقت</span>
<input name="time" type="time" value="" >
</label>
<label class="field">
<span>الشهر</span>
<input name="month" type="month" value="" >
</label>
<label class="field">
<span>الأسبوع</span>
<input name="week" type="week" value="" >
</label>
<label class="field">
<span>الموعد</span>
<input name="appointment" type="datetime-local" value="" >
</label>
<label class="field">
<span>اللون الأساسي</span>
<input name="color" type="color" value="#7456e8" >
</label>
<label class="field full">
<span>السعة: <output id="range-value" for="capacity">50</output>%</span>
<input id="capacity" name="capacity" type="range" min="0" max="100" value="50" data-range-output="range-value">
</label>
</div>

<div class="stack">
<label class="field">
<span>القيمة</span>
<span class="input-group">
<span class="input-addon">$</span>
<input type="number" name="amount" min="0" step="0.01" value="49">
<span class="input-addon">USD</span>
</span>
</label>
<label class="field">
<span>المعرّف العام</span>
<span class="input-group">
<span class="input-addon">@</span>
<input type="text" name="handle" maxlength="40" placeholder="haneen">
</span>
</label>
<div class="field">
<label for="sample-password">كلمة مرور تجريبية</label>
<span class="input-group">
<input id="sample-password" name="password" type="password" autocomplete="new-password">
<button type="button" class="btn btn-secondary" data-password-toggle aria-controls="sample-password" aria-pressed="false">إظهار كلمة المرور</button>
</span>
</div>
</div>

<label class="field">
<span>الوصف</span>
<textarea name="description" maxlength="300" data-character-count="character-count" rows="5">
</textarea>
<small id="character-count" aria-live="polite">0 / 300 حرفًا</small>
</label>

<label class="field">
<span>اختر ملفات</span>
<input type="file" name="files" multiple data-file-list="selected-files" aria-describedby="file-hint">
</label>
<p id="file-hint" class="small muted section-copy">اختر ملفات محلية لمعاينة أسمائها وأحجامها. لا تُرفع الملفات ولا تُحتفظ بها.</p>
<ul class="file-selection" id="selected-files" aria-live="polite">
<li>لم يتم اختيار ملفات.</li>
</ul>