در جلسات قبل دوره متنی HTML با تگ های آن آشنا شدید. در این جلسه به ویژگیها (Attributes) در HTML می پردازیم. ویژگیها (Attributes) برای ارائه اطلاعات اضافی به تگها استفاده میشوند. این ویژگیها معمولاً در تگ باز قرار میگیرند و به شکل "نام-مقدار" یا key-value تعریف میشوند. مقدار ویژگیها معمولاً داخل کوتیشن نوشته میشود.
<tagname attribute1="value1" attribute2="value2">محتوا</tagname>
ویژگیها (Attributes) در HTML
ویژگی id
- مشخص میکند که هر عنصر HTML یک شناسه یکتا داشته باشد. برای شناسایی عنصر در CSS یا جاوااسکریپت استفاده میشود.
مثال:
<p id="intro">این یک پاراگراف با شناسه یکتا است.</p>
ویژگی class
- برای گروهبندی عناصر مشابه استفاده میشود.
- معمولاً برای اعمال استایل یکسان به چند عنصر استفاده میشود.
مثال:
<p class="highlight">این متن برجسته است.</p>ویژگیها (Attributes) در HTML ویژگی style
- برای اضافه کردن استایلهای CSS به صورت درونخطی استفاده میشود.
مثال:
<p style="color: red; font-size: 20px;">این متن قرمز است.</p>
ویژگیها (Attributes) در HTML | ویژگی title
- توضیح کوتاهی درباره عنصر ارائه میدهد.
- هنگام نگهداشتن نشانگر ماوس روی عنصر، به صورت یک متن کوچک (Tooltip) نمایش داده میشود.
مثال:
<a href="https://example.com" title="باز کردن مثال">بازدید از سایت مثال</a>
ویژگیها (Attributes) در HTML | ویژگی alt
- برای ارائه توضیحی درباره تصاویر استفاده میشود.
- اگر تصویر لود نشود، متن alt نمایش داده میشود.
<img src="image.jpg" alt ="یک تصویر زیبا">
ویژگی src
- آدرس منبع تصاویر، ویدئوها یا فایلهای دیگر را مشخص میکند.
مثال:
<img src="example.jpg" alt="تصویر نمونه"> <video src="video.mp4" controls></video>
ویژگی href
- لینک مقصد را در عناصر لینک (Anchor) مشخص میکند.
مثال:
<a href="https://example.com">این یک لینک است</a>ویژگی target
- مشخص میکند که لینک در کجا باز شود.
- مقدارهای رایج:
- _self: در همان تب باز شود.
_blank: در تب جدید باز شود
<a href="https://example.com" target="_blank">باز کردن در تب جدید</a>ویژگیها (Attributes) در HTML | ویژگی name
- برای نامگذاری عناصر فرم استفاده میشود.
- در ارسال دادههای فرم، از این نامها استفاده میشود.
مثال:
<input type="text" name="username "placeholder ="نامکاربری خود را وارد کنید">
ویژگی placeholder
- متن پیشفرضی که در فیلدهای ورودی نمایش داده میشود.
مثال:
<input type="text" name="username "placeholder ="نامکاربری خود را وارد کنید">
ویژگیها (Attributes) در HTML | ویژگی value
- مقدار پیشفرضی که در فیلدهای ورودی یا دکمهها قرار میگیرد.
مثال:
<input type="text"value="مقدار پیشفرض">
<input type="submit"value="ارسال">
ویژگیها (Attributes) در HTML | ویژگی disabled
- مشخص میکند که یک عنصر غیرفعال باشد.
مثال:
<input type="text" disabled placeholder="اینفیلد غیرفعال است">
ویژگیها (Attributes) در HTML | ویژگی checked
- برای چکباکسها و دکمههای رادیویی استفاده میشود تا مقدار پیشفرض انتخاب شود.
مثال:
<input type="checkbox" checked> گزینه انتخاب شده
ویژگی readonly
- فیلد را بهگونهای تنظیم میکند که فقط خواندنی باشد و کاربر نتواند مقدار آن را تغییر دهد.
مثال:
<input type="text" value="فقط خواندنی" readonly>
ویژگیها (Attributes) در HTML | ویژگی required
- مشخص میکند که پر کردن یک فیلد اجباری است.
مثال:
<input type="text" required placeholder="اینفیلد الزامی است">
ویژگیmaxlength و minlength
- محدودیت تعداد کاراکترها برای فیلدهای متنی را مشخص میکنند.
مثال:
<input type="text" maxlength="10" minlength="5" placeholder="بین 5 تا 10 کاراکتر وارد کنید">
ویژگی action و method در فرمها
- action : مشخص میکند که دادههای فرم به کجا ارسال شوند.
- method : مشخص میکند که دادهها چگونه ارسال شوند GET) یا POST)
مثال:
<form action="/submit" method="post"> <input type="text" name="username"> <button type="submit">ارسال</button> </form>
ویژگی lang
- زبان محتوای صفحه را مشخص میکند.
مثال:
<html lang="fa">حال که با ویژگیها (Attributes) در HTML آشنا شدید، می توانید از دیگر مقالات سایت ایوولرن دیدن کنید.