آموزش تگ legend در HTML

8 شهریور 1401
ارسال شده توسط
آموزش html css
آموزش تگ legend در HTML+وردپرس پوش

آموزش تگ legend در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ legend در HTML به صورت کامل آشنا بشید.

تگ Legend در HTML

تگ legend درون تگ fieldset بکار میرود و با استفاده از آن میتوان یک کپشن یا عنوان برای تگ fieldset مشخص و ایجاد کرد.

مثال از تگ legend در HTML

در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره یک : استفاده از تگ legend ( بدون استایل )

<body>
 <fieldset>
  <legend>اطلاعات شخصی</legend>
   نام: <input type="text" name="Name"><br>
   فامیلی: <input type="text" name="Family"><br><br>
 </fieldset>
</body>

مثال شماره دو : استایل دادن به تگ legend با استفاده از CSS

<style>
fieldset{
 background-color: #f2f2f2;
} 
legend{
 background-color:#059862;
 color: #fff;
 padding: 5px 10px;
}
</style>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

پشتیبانی مرورگرها

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ legend در HTML پشتیبانی میکنند یا خیر.

 

جدول پشتیبانی مرورگرها+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

تگ legend از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

  • نکته یا توضیح قابل توجهی وجود ندارد.

دستورات CSS پیش فرض

اکثرا مرورگرها تگ legend را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

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

توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید تا بتوانید علاوه بر طراحی سایت برای خودتان و حتی دیگران و درآمد زایی برای خود درک بهتر و بیشتری راجع به این مطالب پیدا کنید.

ما سعی کردیم در این دوره از مثال های کوچک و کاربردی استفاده شود تا مطالب به صورت کامل برای شما عزیزان قابل فهم باشه این دوره درواقع سطح پیشرفته تر و کامل تر برای دوره html & css میباشد.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید