الفرق بين المراجعتين ل"HTML/fieldset"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
(←‏التنسيق الافتراضي: إضافة التنسيق الافتراضي الخاص بمتصفح chrome)
 
(مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين)
سطر 6: سطر 6:
 
<form action="test.php" method="post">
 
<form action="test.php" method="post">
 
   <fieldset>
 
   <fieldset>
−
     <legend>Title</legend>
+
     <legend>العنوان</legend>
 
     <input type="radio" id="radio">
 
     <input type="radio" id="radio">
−
     <label for="radio">Click me</label>
+
     <label for="radio">اضغط هنا</label>
−
     <input type="submit">
+
     <input type="submit" value="أرسل">
 
   </fieldset>
 
   </fieldset>
 
</form>
 
</form>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 55: سطر 56:
 
العناصر المعطلة هي العناصر غير القابلة للتعديل والتي لن تستقبل أحداث مثل ضغطات الفأرة أو التركيز، وتعرضها المتصفحات عادةً بلونٍ فضي.
 
العناصر المعطلة هي العناصر غير القابلة للتعديل والتي لن تستقبل أحداث مثل ضغطات الفأرة أو التركيز، وتعرضها المتصفحات عادةً بلونٍ فضي.
  
−
==== مثال ====
+
مثال عن استخدام الخاصية <code>disabled</code> لتعطيل جميع الحقول الموجودة ضمن العنصر <code><fieldset></code>:<syntaxhighlight lang="html">
−
مثال عن استخدام الخاصية disabled لتعطيل جميع الحقول الموجودة ضمن العنصر <code><fieldset></code>:<syntaxhighlight lang="html">
 
 
<form action="test.php" method="post">
 
<form action="test.php" method="post">
 
   <fieldset disabled>
 
   <fieldset disabled>
−
     <legend>Title</legend>
+
     <legend>العنوان</legend>
 
     <input type="radio" id="radio">
 
     <input type="radio" id="radio">
−
     <label for="radio">Click me</label>
+
     <label for="radio">اضغط هنا</label>
−
     <input type="submit">
+
     <input type="submit" value="أرسل">
 
   </fieldset>
 
   </fieldset>
 
</form>
 
</form>
سطر 70: سطر 70:
 
هذه الخاصية هي قيمة الخاصية <code>id</code> للعنصر <code>[[HTML/form|<form>]]</code> الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية <code>id</code> لأقرب عنصر <code>[[HTML/form|<form>]]</code> أب لهذا العنصر.
 
هذه الخاصية هي قيمة الخاصية <code>id</code> للعنصر <code>[[HTML/form|<form>]]</code> الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية <code>id</code> لأقرب عنصر <code>[[HTML/form|<form>]]</code> أب لهذا العنصر.
  
−
==== مثال ====
 
 
مثال عن استخدام الخاصية <code>form</code> لتحديد ما هو النموذج الذي يتبع له العنصر <code><fieldset></code>:<syntaxhighlight lang="html">
 
مثال عن استخدام الخاصية <code>form</code> لتحديد ما هو النموذج الذي يتبع له العنصر <code><fieldset></code>:<syntaxhighlight lang="html">
 
<form action="test.php" method="post" id="form1">
 
<form action="test.php" method="post" id="form1">
 
</form>
 
</form>
 
<fieldset form="form1">
 
<fieldset form="form1">
−
   <legend>Title</legend>
+
   <legend>العنوان</legend>
 
   <input type="radio" id="radio">
 
   <input type="radio" id="radio">
−
  <label for="radio">Click me</label>
+
    <label for="radio">اضغط هنا</label>
−
  <input type="submit">
+
    <input type="submit" value="أرسل">
 
</fieldset>
 
</fieldset>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
=== <code>name</code> ===
 
=== <code>name</code> ===
−
الاسم المرتبط بهذه المجموعة.
+
الاسم المرتبط بهذه المجموعة.<syntaxhighlight lang="html">
−
 
 
−
==== مثال ====
 
−
<syntaxhighlight lang="html">
 
 
<fieldset name="myset">
 
<fieldset name="myset">
 
   <legend>Title</legend>
 
   <legend>Title</legend>
سطر 93: سطر 89:
 
   <input type="submit">
 
   <input type="submit">
 
</fieldset>
 
</fieldset>
 +
</syntaxhighlight>
 +
 +
== التنسيق الافتراضي ==
 +
أغلبية المتصفحات تعرض العنصر <code><fieldset></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وضبط الهوامش (<code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code>) والحواشي (<code>[[CSS/padding-top|padding-top]]</code> و <code>[[CSS/padding-right|padding-right]]</code> و <code>[[CSS/padding-bottom|padding-bottom]]</code> و <code>[[CSS/padding-left|padding-left]]</code>) والإطار (<code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/border-image|border-image]]</code>):<syntaxhighlight lang="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;
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 101: سطر 114:
 
[[تصنيف:HTML|{{SUBPAGENAME}}]]
 
[[تصنيف:HTML|{{SUBPAGENAME}}]]
 
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
 
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
−
[[تصنيف:Forms|{{SUBPAGENAME}}]]
+
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 12:24، 24 فبراير 2018

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

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

<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
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصية form ليست مدعومة في أيّ متصفح رئيسي في وقت كتابة هذه الصفحة.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

disabled

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

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

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

<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>:

<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

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

<fieldset name="myset">
  <legend>Title</legend>
  <input type="radio" id="radio">
  <label for="radio">Click me</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):

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://wiki.hsoub.com/index.php?title=HTML/fieldset&oldid=2770"