صفت ها در HTML قسمت دو
صفت ها در HTML قسمت دو
لیست همه Attribute ها در HTML
اتریبیوت چیست و اتریبیوت های در html
منظور از صفت یا خاصیت یا Attribute اتریبیوت چیست؟ خاصیت های عمومی یا همگانی چه خاصیت هایی هستند؟ آیا Attribute ها باعث ایجاد تغییر در استایل کد های HTML ما نیز می‌شوند؟ در اینجا می‌خواهیم لیست کاملی از Attribute ها را با شما به اشتراک بگذاریم و همچنین توضیحاتی در رابطه با آن ها به شما منتقل کنیم.
- 1 منظور از Attribute یا صفت
- 2 لیست کلی Attribute ها
منظور از Attribute یا صفت
همانطور که در صفت ها در HTML گفتیم:
به وسیله ی صفت ها در HTML می‌توانیم ویژگی ها و تنظیمات خاصی را به تگ های HTML اعمال نماییم و کنترل بیشتری بر روی تگ های HTML داشته باشیم از این رو صفت ها یکی از مهم ترین و اصلی ترین بخش ها در HTML هستند . به عنوان مثال با استفاده از صفت id می توانیم یک شناسه ی منحصر به فرد به تگ های HTML نسبت دهیم .
لیست کلی Attribute ها
لیست زیر کلیه صفت های موجود در HTML از ابتدا تا امروز است که شما می‌توانید با توضیحات تکمیلی با آن‌ها آشنا شوید.
صفت یا Attribute |
مخصوص تگ های |
توضیحات |
| accept | input | نوع فایل هایی که در سرور پذیرفته می شود را مشخص می کند(فقط برای type = “file”) |
| accept-charset | form | نوع انکود فرم را تعیین می کند |
| accesskey | Global Attributes | کلید میانبر برای فعال سازی/تمرکز روی یک عنصر |
| action | form | مشخص می کند مقدار form-data هنگام دکمه ثبت به کجا ارسال شود |
| align | در HTML 5 پشتیبانی نمی‌شود. | چیدمان عنصر را نسبت به عنصر احاطه شده تعیین می کند. از css استفاده کنید |
| alt | area , img , input | متن جایگزین را هنگامی که عنصر اصلی امکان نمایش را ندارد تعیین میکند. |
| async | script | تعیین می کند اسکریپت به صورت ناهمگام اجرا شود(فقط برای اسکریپت های بیرونی) |
| autocomplete | form , input | تعیین می کند تگ form یا تگ input قابلیت تکمیل خودکار داشته باشد |
| autofocus | button , input , select , textarea | عنصری که باید در هنگام بارگیری صفحه focus دریافت کند را مشخص می کند. |
autoplay |
audio , video |
تعیین می کند ویدیو یا صوت به محض اماده شدن بارگیری شود |
| bgcolor | در HTML 5 پشتیبانی نمی‌شود. | رنگ پس زمینه یک عنصر را تعیین می کند از css استفاده کنید |
| border | در HTML 5 پشتیبانی نمی‌شود. | ضخامت حاشیه عنصر را مشخص می کند از css استفاده کنید. |
| charset | meta , script | انکود را تعیین می کند |
| checked | input | مشخص می کند عنصر باید در هنگام بارگیری صفحه در حالت پیش انتخاب باشد (type=”checkbox” و type=”radio”) |
| cite | blockquote , del , ins , q | آدرسی که متن نقل شده، حذف شده یا اضافه شده را تعیین می کند |
| class | Global Attributes | برای یک عنصر یک یا چند نام کلاس مشخص می کند(به یک کلاس در صفحه استایل ارجاع می دهد) |
| color | در HTML 5 پشتیبانی نمی‌شود. | رنگ متن یک عنصر را تعیین می کند. از css استفاده کنید. |
| cols | textarea | ضخامت عنصر تگ texterea را تعیین می کند |
| colspan | td , th | تعداد ستون های یک جدول را برای span تعیین می کند |
content |
meta |
مقدار نسبت داده شده به http-equiv یا نام خاصیت را تعیین می کند |
| contenteditable | Global Attributes | تعیین می کنند محتوای یک عنصر قابل تغییر است یا خیر |
| controls | audio , video | تعیین می کند کنترل های صوت و ویدیو باید نمایش داده شوند یا خیر(کنترل مانند توقف، ادامه و اجرا) |
| coords | area | گوشه های تگ area را مشخص می کند |
| data | object | لینک منابعی که توسط ابجکت استفاده می شوند را تعیین می کند |
| data-* | Global Attributes | برای ذخیره داده سفارشی خصوصی برای صفحه یا اپلیکیشن استفاده می شود. |
| datetime | del , ins , time | تاریخ و زمان را تعیین می کند |
| default | track | مشخص می کند track در صورتی که تنظیمات کاربر جایگزین دیگری برای آن ندارد فعال شود. |
| defer | script | اسکریپتی که پس از اتمام تجزیه(بارگیری؟) اجرا می شود را مشخص می کند(فقط برای اسکریپت های یبرونی) |
| dir | Global Attributes | جهت متن داخل عنصر را مشخص می کند |
dirname |
input , textarea |
جهت متون فرم را که ثبت می شوند تعیین خواهد کرد |
| disabled | button , fieldset , input , optgroup , option , select , textarea | عنصر یا گروه عناصر تعیین شده را غیرفعال می کند |
| download | a , area | لینک مقصدی که پس از کلیک کاربر بر روی hyperlink دانلود می شود را تعیین می کند. |
| draggable | Global Attribute | تعیین می کند یک عنصر قابل کشیدن هست یا نه |
| dropzone | Global Attribute | مشخص می کند داده های کشیده شده در هنگام انداختن باید کپی، حرکت یا لینک شوند یا خیر |
| enctype | form | مشخص می کند داده های فرم هنگام دکمه ثبت چگونه باید برای سرور انکود شوند(فقط برای متد post) |
| for | label , output | تعیین می کند کدام عنصر فرم برای محاسبات و برچسب است. |
| form | button , fieldset , input , label , meter , object , output , select , textarea | نام فرمی که عنصر به آن تعلق دارد را تعیین می کند. |
| formaction | button , input | مشخص می کند داده های فرم در هنگام دکمه تایید به کجا ارسال شوند. فقط برای type = submit |
| headers | td , th | هدر های سلول مربوطه را مشخص می کند. |
height |
canvas , embed , iframe , img , input , object , video |
ارتفا عنصر را مشخص می کند |
| hidden | Global Attribute | تعیین می کند یک عنصر هنوز یا دیگر وابسته نیست. |
| high | meter | برد را تعیین می کند که یک مقدار بالا در نظر گرفته می شود. |
| href | a , area , base , link | url صفحه ای که لینک به آن می رود را مشخص می کند. |
| hreflang | a , area , link | زبان داکیومنت لینک شده را مشخص می کند |
| http-equiv | meta | یک هدر http برای خاصیت content ارائه می دهد |
| id | Global Attribute | شناسه یکتای عنصر را مشخص می کند |
| ismap | img | یک عکس را به عنوان نقشه تصویری سمت سرور تعیین می کند |
| kind | track | نوع متن عنصر track را مشخص می کند |
| label | track , option , optgroup | عنوان متن track را مشخص می کند |
lang |
Global Attribute |
زبان محتوای داخل عنصر را مشخص می کند |
| list | input | به یک عنصر datalist که حاوی انتخاب های پیش تهیه شده برای یک عنصر input است رجوع می کند |
| loop | audio , video | تعیین می کند ویدیو/صوت به صورت پشت سر هم اجرا شود |
| low | meter | برد را که به صورت کم در نظر گرفته شده است را تعیین می کند |
| max | input , meter , progress | حداکثر مقدار عنصر را مشخص می کند |
| maxlength | input , textarea | حداکثر طول کاراکتر های مجاز عنصر را مشخص می کند |
| media | a , area , link , source , style | مشخص می کند داکیومنت برای چه رسانه/دستگاهی بهینه است |
| method | form | نوع متد http ارسال داده فرم را تعیین می کند |
| min | input , meter | حداقل مقدار را تعیین می کند |
| multiple | input , select | مشخص می کند یک کاربر میتواند بیش از یک مقدار وارد کند |
| muted | video , audio | تعیین می کند صدای خروجی ویدیو باید صامت باشد |
name |
button , fieldset , form , iframe , input , map , meta , object , output , param , select , textarea |
نام عنصر را تعیین می کند |
| novalidate | form | مشخص می کند فرم در هنگام تایید، نباید تایید اعتبار شود |
| onabort | audio , embed , img , object , video | اسکریپتی که باید در حالت abort اجرا شود را تعیین می کند |
| onafterprint | body | اسکریپتی که باید پس از چاپ داکیومنت اجرا شود را تعیین می کند |
| onbeforeprint | body | اسکریپتی که باید قبل از چاپ داکیومنت اجرا شود را تعیین می کند |
| onbeforeunload | body | اسکریپتی که داکیومنت هنگام خالی شدن باید اجرا کند را مشخص می کند |
| onblur | در همه تگ های قابل نمایش | اسکریپتی که عنصر هنگام از دست دادن focus اجرا می کند را مشخص می کند |
| oncanplay | audio , embed , object , video | اسکریپتی که هنگام آماده شدن فایل برای اجرا را مشص می کند(هنگامی که فایل به اندازه کافی بافر شد) |
| oncanplaythrough | audio , video | اسکریپتی که برای اجرای بدون توقف تمام فایل استفاده می شود. |
| onchange | در همه تگ های قابل نمایش | اسکریپتی که هنگام تغییر مقدار عنصر فعال می شود |
onclick |
در همه تگ های قابل نمایش |
اسکریپتی که هنگام کلیک روی عنصر فعال می شود |
| oncontextmenu | در همه تگ های قابل نمایش | اسکریپتی که هنگام اجرای context menu اجرا می شود |
| oncopy | در همه تگ های قابل نمایش | اسکریپتی که هنگام کپی شدن محتویات عنصر فعال می شود |
| oncuechange | track | اسکریپتی که هنگام تغییر در عنصر track فعال می شود |
| oncut | در همه تگ های قابل نمایش | اسکریپتی که هنگام عملیات cut در محتویات عنصر اجرا می شود |
| ondblclick | در همه تگ های قابل نمایش | اسکریپتی که هنگام دابل کلیک روی عنصر فعال می شود |
| ondrag | در همه تگ های قابل نمایش | اسکریپتی که هنگام درگ شدن عنصر فعال می شود |
| ondragend | در همه تگ های قابل نمایش | اسکریپتی که هنگام پایان عملیات درگ فعال می شود |
| ondragenter | در همه تگ های قابل نمایش | اسکریپتی که هنگام درگ شدن بر روی یک هدف معتبر اجرا می شود |
| ondragleave | در همه تگ های قابل نمایش | اسکریپتی که هنگام ترک درگ روی یک هدف معتبر فعال می شود |
ondragover |
در همه تگ های قابل نمایش |
اسکریپتی که هنگام پایان یافتن کشیدن یک عنصر روی یک هدفمعتبر فعال می شود |
| ondragstart | در همه تگ های قابل نمایش | اسکریپتی که که هنگام شروع عملیات درگ فعال می شود |
| ondrop | در همه تگ های قابل نمایش | اسکریپتی که هنگام انداختن عنصر درگ شده فعال می شود |
| ondurationchange | audio , video | اسکریپتی که هنگام تغییر طول رسانه اجرا می شود |
| onemptied | audio , video | اسکریپتی که هنگام بروز یک اتفاق ناگوار و خارج از دسترس قرار گرفتن فایل اجرا می شود(مانند قطع اتصال ناگهانی) |
| onended | audio , video | اسکریپتی که هنگام پایان یافتن رسانه اجرا می شود(یک رویداد مناسب برای دادن پیام تشکر برای گوش کردن) |
| onerror | audio , body , embed , img , object , script , style , video | اسکریپتی که هنگام بروز خطا فعال می شود |
| onfocus | در همه تگ های قابل نمایش | اسکریپتی که هنگام دریافت focus روی عنصر اجرا می شود |
| onhashchange | body | اسکریپتی که هنگام مواجه با تغییرات در بخشی از url اتفاق می افتد |
| oninput | در همه تگ های قابل نمایش | اسکریپتی که هنگام دریافت ورودی کاربر فعال می شود |
oninvalid |
در همه تگ های قابل نمایش |
اسکریپتی که هنگام نامعتبر بودن عنصر فعال می شود |
| onkeydown | در همه تگ های قابل نمایش | اسکریپتی که هنگام فشرده شدن یک کلید فعال می شود |
| onkeypress | در همه تگ های قابل نمایش | اسکریپتی که هنگام زدن یک کلید فعال می شود |
| onkeyup | در همه تگ های قابل نمایش | اسکریپتی که هنگام رها کردن کلید توسط کاربر فعال می شود |
| onload | body , iframe , img , input , link , script , style | اسکریپتی که بعد از پایان یافتن بارگیری عنصر اجرا می شود |
| onloadeddata | audio , video | اسکریپتی که هنگام بارگیری محتوای رسانه فعال می شود |
| onloadedmetadata | audio , video | اسکریپتی که هنگام بارگیری محتوای متای(مانند ابعاد و طول رسانه) اجرا می شود |
| onloadstart | audio , video | اسکریپتی که هنگام شروع بارگیری فایل رسانه اجرا می شود |
onmousedown |
در همه تگ های قابل نمایش |
اسکریپتی که هنگام فشردن کلید موس فعال می شود |
| onmousemove | در همه تگ های قابل نمایش | اسکریپتی که هنگام حرکت موس در محدود عنصر اجرا می شود(اجرای مداوم در حین حرکت) |
| onmouseout | در همه تگ های قابل نمایش | اسکریپتی که هنگام خروجی پوینتز موس از عنصر فعال می شود |
| onmouseover | در همه تگ های قابل نمایش | اسکریپتی که هنگام ورود پوینتر موس به محدود عنصر فعال می شود |
| onmouseup | در همه تگ های قابل نمایش | اسکریپتی که هنگام رها شدن کلید موس فعال می شود |
| onmousewheel | در همه تگ های قابل نمایش | اسکریپتی که هنگام اسکرول شدن چرخ موس فعال می شود |
| onoffline | body | اسکریپتی که هنگام شروع کار افلاین مرورگر اجرا می شود |
ononline |
body |
اسکریپتی که هنگام شروع کار انلاین مرورگر اجرا می شود |
| onpagehide | body | اسکریپتی که هنگام کاربر به خارج از صفحه حرکت می کند فعال می شود. |
| onpageshow | body | اسکریپتی که هنگام کاربر به داخل صفحه حرکت می کند فعال می شود |
| onpaste | در همه تگ های قابل نمایش | اسکریپتی که هنگام paste محتوا به داخل یک عنصر فعال می شود |
| onpause | audio , video | اسکریپتی که هنگام pause شدن محتوا از طریق عمل کاربر یا با کد اجرا می شود |
| onplay | audio , video | اسکریپتی که هنگام شروع اجرای رسانه فعال می شود |
| onplaying | audio , video | اسکریپتی که هنگام اجرای رسانه فعال می شود |
| onpopstate | body | اسکریپتی که هنگام تغییر تاریخچه صفحه فعال می شود |
| onprogress | audio , video | اسکریپتی که هنگام مرورگر در فرآیند دریافت داده های رسانه است فعال می شود |
| onratechange | audio , video | اسکریپتی که هنگام تغییر سرعت پخش اجرا می شود(مثلا زمانی که کاربر حالت پخش آهسته یا سریع را فعال می کند) |
onreset |
form |
اسکریپتی که هنگام فشرده شدن کلید ریست روی فرم اجرا می شود. |
| onresize | body | اسکریپتی که هنگام تغییر اندازه صفحه مرورگر اجرا می شود |
| onscroll | در همه تگ های قابل نمایش | اسکریپتی که هنگام اسکرول بار یک عنصر اسکرول می شود |
| onsearch | input | اسکریپتی که هنگام نوشتن چیزی در فیلد جستجو توسط کاربر اجرا می شود(برای input=”search”) |
| onseeked | audio , video | اسکریپتی که هنگام قرار گرفتن مقدار خاصیت seeking به false نمایانگر پایان seeking اجرا می شود |
| onseeking | audio , video | اسکریپتی که هنگام قرار گرفتن مقدار خاصیت seeking به true نمایانگر فعال شدن seeking اجرا می شود |
| onselect | در همه تگ های قابل نمایش | اسکریپتی که هنگام انتخاب شدن عنصر فعال می شود |
onstalled |
audio , video |
اسکریپتی که هنگام مرورگر نتواند داده های رسانه را به هر دلیلیبیاورد را اجرا می کند |
| onstorage | body | اسکریپتی که هنگام به روز شدن منطقه ذخیره وب فعال می شود |
| onsubmit | form | اسکریپتی که هنگام ثبت فرم اجرا می شود |
| onsuspend | audio , video | اسکریپتی که هنگام آوردن داده های رسانه قبل از تکمیل شدن متوقف می شود را اجرا می کند. |
| ontimeupdate | audio , video | اسکریپتی که موقعیت اجرای رسانه تغییر کرد(مانند زمانی که کاربر کاربر به صورت سریع به نقطه ای از رسانه می رود) |
| ontoggle | details | اسکریپتی که هنگام باز یا بسته شدن عنصر details فعال می شود |
| onunload | body | اسکریپتی که هنگام تخلیه بار(unload) صفحه یا بستن صفحه مرورگر اجرا می شود |
| onvolumechange | audio , video | اسکریپتی که هنگام تغییر ولوم صدای رسانه فعال می شود |
| onwaiting | audio , video | اسکریپتی که که هنگام pause رسانه فعال می شود(مانند زمانی که رسانه متوقف میشود تا داده بیشتری بارگیری کند) |
| onwheel | در همه تگ های قابل نمایش | اسکریپتی که هنگام چرخاندن چرخ موس به بالا یا پایین بر روی عنصر اجرا می شود. |
| open | details | تعیین می کند جزییات باید به کاربر نمایش داده شوند(open) |
optimum |
meter |
مقدار بهینه برای سنجش را تعیین می کند |
| pattern | input | یک الگو برای بررسی مقدار عنصر input تعیین می کند |
| placeholder | input , textarea | یک راهنمای(hint) کوتاه برای مقدار مورد انتظار عنصر تعیین می کند |
| poster | video | یک تصویر برای نمایش داده شدن هنگام دانلود ویدیو یا زمانی که کاربر روی دکمه پخش کلیک می کند |
| preload | audio , video | تعیین می کند رسانه چگونه باید یا از نظر نویسنده در هنگام بارگیری صفحه بارگیری شود. |
| readonly | input , textarea | مشخص می کند عنصر قفط خواندنی است |
| rel | a , area , link | رابطه بین سند فعلی و سند لینک را تعیین می کند |
| required | input , select , textarea | تعیین می کند عنصر باید قبل از ثبت فرم پر شود. |
reversed |
ol |
تعیین می کند ترتیب لیست باید نزولی باشد |
| rows | textarea | تعداد خطوط قابل دیدن یک عنصر textarea را مشخص می کند |
| rowspan | td , th | تعداد ردیف های یک سلول جدول که باید span شوند را تعیین می کند |
| sandbox | iframe | قوانین بیشتری برای محتوای عنصر iframe تعیین می کند. |
| scope | th | مشخص می کند سلول های هدر برای یک ستون ، ردیف یا گروه ستون ها و ردیف ها هدر هستند یا نه |
| selected | option | یک گزینه پیش انتخاب شده برای زمان بارگیری صفحه انتخاب می کند. |
| shape | area | شکل عنصر منطقه را تعیین می کند |
| size | input , select | طول کاراکترهای داخل عنصر یا تعداد کاراکتر های قابل نمایش را مشخص می کند. |
sizes |
img , link , source |
اندازه منابع لینک شده را تعیین می کند |
| span | col , colgroup | تعداد ستون های برای span را مشخص می کند |
| spellcheck | Global Attributes | مشخص می کند گرامر و املای محتویات عنصر بررسی شود یا خیر |
src |
audio , embed , iframe , img , input , script , source , track , video |
آدرس فایل رسانه را مشخص می کند |
| srcdoc | iframe | محتویات html صفحه را برای نمایش در iframe تعیین می کند |
| srclang | track | زبان متن داده track را تعیین می کند(اگر kind=subtitles باشد نیاز است) |
| srcset | img , source | آدرس تصویری که در موقعیت های مختلف استفاده میشود را تعیین می کند |
| start | ol | مقدار شروع یک لیست ترتیب داده شده را مشخص می کند |
| step | input | میزان فواصل مجاز برای یک input را مشخص می کند |
| style | Global Attribute | استایل برخط یک عنصر را مشخص می کند |
tabindex |
Global Attribute |
ترتیب تب عنصر را مشخص می کند |
| target | a , area , base , form | محل باز شدن سند لینک شده یا محل ثبت فرم را مشخص می کند |
| title | Global Attribute | اطلاعات بیشتری برای یک عنصر تعیین می کند |
| translate | Global Attribute | مشخص می کند محتویات عنصر باید ترجمه شود یا نه |
| type | a , button , embed , input , link , menu , object , script , source , style | نوع عنصر را تعیین می کند |
usemap |
img , object |
یک تصویر را به عنوان تصویر نقشه سمت کلاینت تعیین می کند |
| value | button , input , li , option , meter , progress , param | مقدار عنصر را تعیین می کند |
| width | canvas , embed , iframe , img , input , object , video | طول عنصر را مشخص می کند |
| wrap | textarea | تعیین می کند متن داخل textarea در هنگام ثبت فرم چگونه بسته شود |
سورس اصلی این Attribute ها از وب سایت W3Schools می‌باشد.
این مقاله هم تموم شد و امیدوارم لیست کلی Attribute ها اتریبیوت ها براتون مفید بوده باشه. تا فصل بعد…
مطالب مرتبط :
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.