علامة <legend> في HTML

  • الصفحة السابقة <label>
  • الصفحة التالية <li>

التعريف والاستخدام

<legend> تعريف العلامة <fieldset> عناصر العنوان (الوصف).

يرجى الرجوع أيضًا إلى:

دليل HTML DOMمفهوم Legenda

مثال

مثال 1

تجميع العناصر ذات الصلة في النموذج:

<form action="/action_page.php">
  <fieldset>
    <legend>معلومات الشخصية：</legend>
    <label for="fname">الاسم الأول：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">الاسم العائلي：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">البريد الإلكتروني：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاريخ الميلاد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="إرسال">
  </fieldset>
</form>

تجربة شخصية

مثال 2

جعل عنوان مجموعة الحقول يطفو إلى اليمين (استخدام CSS):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">معلومات الشخصية：</legend>
    <label for="fname">الاسم الأول：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">الاسم العائلي：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">البريد الإلكتروني：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاريخ الميلاد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="إرسال">
  </fieldset>
</form>

تجربة شخصية

مثال 3

استخدام CSS لضبط <fieldset> و <legend> النمط:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>معلومات الشخصية：</legend>
    <label for="fname">الاسم الأول：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">الاسم العائلي：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">البريد الإلكتروني：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">تاريخ الميلاد：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="إرسال">
  </fieldset>
</form>
</body>
</html>

تجربة شخصية

خصائص العالمية

<legend> الدوال الداعمة خصائص العالمية في HTML.

خصائص الحدث

<legend> الدوال الداعمة خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية بشكل افتراضي <legend> النوع:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

تجربة شخصية

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <label>
  • الصفحة التالية <li>