# العنصر fieldset

> يستعمل العنصر لتجميع عدِّة عناصر ولافتات () ضمن نموذج في مستند HTML؛ مما يجعل نماذجك أسهل استخدامًا وأوضح.

- Canonical URL: https://coreiten.com/article/العنصر-fieldset
- Language: ar
- Section: HTML
- Author: Sami
- Published: 2025-06-13T00:00:00+03:00
- Modified: 2026-01-30T20:37:21+03:00
- Publisher: CoreITen (https://coreiten.com)
- Keywords: العنصر, ما هو العنصر fieldset في html, شرح العنصر fieldset, مثال عن العنصر fieldset, خاصيات العنصر fieldset, استخدام العنصر fieldset في html, بطاقة العنصر fieldset, تعلم html من الصفر, تصميم مواقع, برمجة مواقع, لغة html

---

**العنصر <fieldset>**

يستعمل العنصر `<fieldset>` لتجميع عدِّة عناصر ولافتات (`<label>`) ضمن نموذج في مستند HTML؛ مما يجعل نماذجك أسهل استخدامًا وأوضح.

مثال عن استخدام العنصر `<fieldset>` وفيه العنصر `<legend>` كأوّل ابن له، والعنصرين `<input>` و `<label>`:

```html
<form action="test.php" method="post">
  <fieldset>
    <legend>العنوان</legend>
    <input type="radio" id="radio">
    <label for="radio">اضغط هنا</label>
    <input type="submit" value="أرسل">
  </fieldset>
</form>
```

## بطاقة العنصر

| تصنيفات المحتوى | عنصر تنظيمي وعنصر تقسيمي وعنصر مرتبط بالنماذج. |
| --- | --- |
| المحتوى المسموح | عنصر <legend> اختياري يتبعه محتوى عادي. |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
| واجهة DOM | HTMLFieldSetElement |

## دعم المتصفحات

| Chrome | Firefox | Edge | Safari | Opera |
| --- | --- | --- | --- | --- |
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |

## الخاصيات

يمكن استخدام [الخاصيات العامة](https://coreiten.com/article/%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D8%A7%D9%85%D8%A9) في هذا العنصر.

### disabled

إذا ضُبِطَت هذه الخاصية المنطقية (Boolean) فستُعطَّل جميع عناصر النموذج الأبناء لهذا العنصر ما عدا أبناء العنصر `<legend>` الاختياري.

العناصر المعطلة هي العناصر غير القابلة للتعديل والتي لن تستقبل أحداث مثل ضغطات الفأرة أو التركيز، وتعرضها المتصفحات عادةً بلونٍ فضي.

مثال عن استخدام الخاصية `disabled` لتعطيل جميع الحقول الموجودة ضمن العنصر `<fieldset>`:

```html
<form action="test.php" method="post">
  <fieldset disabled>
    <legend>العنوان</legend>
    <input type="radio" id="radio">
    <label for="radio">اضغط هنا</label>
    <input type="submit" value="أرسل">
  </fieldset>
</form>
```

### form

هذه الخاصية هي قيمة الخاصية `id` للعنصر `<form>` الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية `id` لأقرب عنصر `<form>` أب لهذا العنصر.

مثال عن استخدام الخاصية `form` لتحديد ما هو النموذج الذي يتبع له العنصر `<fieldset>`:

```html
<form action="test.php" method="post" id="form1">
</form>
<fieldset form="form1">
  <legend>العنوان</legend>
  <input type="radio" id="radio">
    <label for="radio">اضغط هنا</label>
    <input type="submit" value="أرسل">
</fieldset>
```

### name

الاسم المرتبط بهذه المجموعة.

```html
<fieldset name="myset">
  <legend>العنوان</legend>
  <input type="radio" id="radio">
  <label for="radio">اضغط هنا</label>
  <input type="submit">
</fieldset>
```

## التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر `<fieldset>` بضبط الخاصية `display` إلى `block`، وضبط الهوامش (`margin-left` و `margin-right`) والحواشي (`padding-top` و `padding-right` و `padding-bottom` و `padding-left`) والإطار (`border-width` و `border-style` و `border-color` و `border-image`):

```css
fieldset { 
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
}
```

## مواضيع ذات صلة

- [العنصر](https://coreiten.com/topic/%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1)
- [تعلم html من الصفر](https://coreiten.com/topic/%D8%AA%D8%B9%D9%84%D9%85-html-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1)
- [تصميم مواقع](https://coreiten.com/topic/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [برمجة مواقع](https://coreiten.com/topic/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D9%85%D9%88%D8%A7%D9%82%D8%B9)
- [لغة html](https://coreiten.com/topic/%D9%84%D8%BA%D8%A9-html)