<table border="1">
    <tr>
        <th colspan="2">بيانات الموظف</th>
    </tr>
    <tr>
        <td rowspan="2">IT</td>
        <td>أحمد</td>
    </tr>
    <tr>
        <td>سارة</td>
    </tr>
</table>

<select name="country">
    <option value="" disabled selected>اختر دولتك</option>
    <option value="eg">مصر</option>
    <option value="sa">السعودية</option>
    <option value="ma">المغرب</option>
</select>

<!-- Radio Buttons -->
<label><input type="radio" name="gender" value="male"> ذكر</label>
<label><input type="radio" name="gender" value="female"> أنثى</label>

<br>

<!-- Checkboxes -->
<label><input type="checkbox" name="hobby1" value="reading"> قراءة</label>
<label><input type="checkbox" name="hobby2" value="travel"> سفر</label>

<label>تاريخ الميلاد: <input type="date" name="birthdate"></label>
<br>
<label>اللون المفضل: <input type="color" name="favcolor"></label>
<br>
<label>التقييم: <input type="range" name="rating" min="1" max="10"></label>

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز النص التشعبي.</dd>
    
    <dt>CSS</dt>
    <dd>أوراق الأنماط المتتالية.</dd>
</dl>

<blockquote cite="https://example.com">
    البرمجة هي فن التفكير.
</blockquote>

<p>قال المعلم: <q>العلم نور</q> ونحن نصدقه.</p>

<p>من كتاب <cite>تعلم البرمجة</cite></p>

<iframe 
    src="https://www.example.com" 
    width="400" 
    height="300" 
    title="موقع خارجي">
</iframe>

<figure>
    <img src="chart.png" alt="رسم بياني للمبيعات">
    <figcaption>إحصائيات المبيعات</figcaption>
</figure>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="هذا وصف مختصر لمحتوى الصفحة">
<meta name="keywords" content="HTML, CSS, JavaScript">

<details>
    <summary>اقرأ المزيد</summary>
    <p>هذا النص يظهر فقط عند الضغط على العنوان.</p>
</details>

<textarea 
    cols="50" 
    rows="10" 
    placeholder="اكتب رسالتك هنا" 
    required 
    maxlength="500"
    name="message">
</textarea>

<fieldset>
    <legend>البيانات الشخصية</legend>
    
    <label>الاسم: <input type="text" name="name"></label>
    <br>
    <label>البريد: <input type="email" name="email"></label>
</fieldset>

<select name="cars">
    <optgroup label="سيارات ألمانية">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="سيارات يابانية">
        <option value="toyota">Toyota</option>
        <option value="honda">Honda</option>
    </optgroup>
</select>

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

<table border="1">
    <caption>قائمة الطلاب</caption>
    <colgroup>
        <col style="background-color:lightblue">
        <col style="background-color:lightgreen">
    </colgroup>
    <thead>
        <tr><th>الاسم</th><th>الدرجة</th></tr>
    </thead>
    <tbody>
        <tr><td>أحمد</td><td>90</td></tr>
    </tbody>
    <tfoot>
        <tr><td>المجموع</td><td>90</td></tr>
    </tfoot>
</table>

<form action="/register" method="POST">
    <label>الاسم: <input type="text" name="name" required></label><br>
    
    <label>البريد: 
        <input type="email" name="email" 
               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
    </label><br>
    
    <label>كلمة المرور: 
        <input type="password" name="password" autocomplete="off" required>
    </label><br>
    
    <label>تأكيد كلمة المرور: 
        <input type="password" name="confirm" autocomplete="off" required>
    </label><br>
    
    <label>
        <input type="checkbox" name="terms" required>
        أوافق على الشروط والأحكام
    </label><br>
    
    <button type="submit">تسجيل</button>
</form>

<table border="1">
    <thead>
        <tr>
            <th rowspan="2" scope="col">الطالب</th>
            <th colspan="2" scope="colgroup">الدرجات</th>
        </tr>
        <tr>
            <th scope="col">الفصل 1</th>
            <th scope="col">الفصل 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">أحمد</th>
            <td>85</td>
            <td>90</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">المعدل</th>
            <td colspan="2">87.5</td>
        </tr>
    </tfoot>
</table>

<form action="/search" method="GET">
    <input type="search" 
           name="q" 
           list="suggestions" 
           placeholder="ابحث..." 
           autofocus>
    
    <datalist id="suggestions">
        <option value="HTML">
        <option value="CSS">
        <option value="JavaScript">
    </datalist>
    
    <button type="submit">بحث</button>
    <button type="reset">مسح</button>
</form>

<form action="/upload" method="POST" enctype="multipart/form-data">
    <label>اختر الصور:
        <input type="file" 
               name="photos" 
               accept="image/*" 
               multiple
               required>
    </label>
    
    <!-- ملاحظة: الحد الأقصى للحجم يتم التحكم به من السيرفر -->
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000">
    
    <button type="submit">رفع</button>
</form>

<form action="/survey" method="POST">
    <fieldset>
        <legend>المعلومات الشخصية</legend>
        <label>الاسم: <input type="text" name="name" required></label><br>
        <label>العمر: <input type="number" name="age" min="18" max="100"></label><br>
        <label><input type="radio" name="gender" value="m"> ذكر</label>
        <label><input type="radio" name="gender" value="f"> أنثى</label>
    </fieldset>
    
    <fieldset>
        <legend>التقييمات</legend>
        <label>جودة الخدمة: 
            <input type="range" name="quality" min="1" max="10" value="5">
        </label><br>
        <label>السرعة: 
            <input type="range" name="speed" min="1" max="10" value="5">
        </label>
    </fieldset>
    
    <fieldset>
        <legend>المميزات المفضلة</legend>
        <label><input type="checkbox" name="features[]" value="design"> التصميم</label><br>
        <label><input type="checkbox" name="features[]" value="speed"> السرعة</label><br>
        <label><input type="checkbox" name="features[]" value="support"> الدعم</label>
    </fieldset>
    
    <label>ملاحظات إضافية:
        <textarea name="comments" rows="5" cols="50" placeholder="اكتب ملاحظاتك..."></textarea>
    </label><br>
    
    <button type="submit">إرسال الاستبيان</button>
</form>