این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ fieldset در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ fieldset در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Fieldset در HTML
تگ fieldset تگی است که با استفاده از اون میتونیم تگ های درون یک فرم رو گروه بندی ( دسته بندی ) کنیم. ( مثلا اطلاعات شخصی ، اطلاعات تحصیلی و… )
تگ legend داخل تگ fieldset قرار میگیره و میتونه یه متن عنوان برای تگ های دسته بندی شده ایجاد کند، ( آموزش تگ legend )
Free-Learn
مثال از تگ fieldset در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <form action="files/get_data4.php" method="POST"> <fieldset> <legend>اطلاعات شخصی</legend> نام: <input type="text" name="Name"><br> فامیلی: <input type="text" name="Family"><br><br> </fieldset> <br> <fieldset> <legend>اطلاعات تحصیلی</legend> مدرک: <input type="text" name="Madrak"><br><br> <input type="submit" value="ارسال"> </fieldset> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ fieldset در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ fieldset در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| disabled | disabled | تگ fieldset رو بکل غیرفعال میکند |
| form | form_id | مشخص میکند که تگ fieldset متعلق به کدام فرم می باشد ( جهت ارسال داد ها بسمت سرور ) |
| name | text | یک نام برای تگ fieldset مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ fieldset از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- با استفاده از تگ <legend> میتونیم یک عنوان / کپشن برای تگ fieldset مشخص نماییم.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ fieldset را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 10 |
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: 2px groove (internal value); } |
