این آموزش در تاریخ ۱۴۰۰/۰۹/۲۳ آپدیت شده است.

آموزش تگ button در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ button در HTML با من همراه باشید.

آموزش تگ button در HTML

Free-Learn

تگ button در HTML

تگ button که یکی از پراستفاده ترین تگ های HTML می باشد، تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.

خب ما بطور کلی ۲ نوع دکمه میتونیم داشته باشیم :

  •  دکمه از نوع button : که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن ، عکس و.. در این دکمه قرار دهیم.

مثال :

امتحان کنید

  • دکمه از نوع سابمیت یا Submit : که از این نوع دکمه در فرم ها برای ارسال اطلاعات فرم بسمت سرور استفاده می شود.

مثال :

امتحان کنید

Free-Learn

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

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

مثال شماره ۱ : دکمه در حالت معمولی ( با استفاده از جاوااسکریپت گفتیم وقتی روی دکمه کلیک شد پیغام بده سلام خوبی؟ )

امتحان کنید

مثال شماره ۲ : استایل دادن به دکمه با استفاده از CSS

امتحان کنید

مثال شماره ۳ : دکمه تمام عرض ( که ۱۰۰درصد صفحه باشه ) در رنگ های مختلف

امتحان کنید

مثال شماره ۴ : دکمه های لینک دار ( یعنی استفاده از تگ a )

امتحان کنید

Free-Learn

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

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

نام مرورگر Chrome Firefox Opera Safari Edge
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ button در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت مقدار توضیح
autofocus autofocus مشخص میکنه که بصورت خودکار
با بالا اومدن صفحه روی کدوم دکمه فوکوس شه
disabled disabled برای غیرفعال کردن دکمه
form form_id مشخص میکنه که این دکمه اطلاعاتش
بهمراه فلان فرم بسمت سرور ارسال شود
formaction URL مشخص میکند که داده های کدام فرم باید ارسال شود
(فقط در دکمه از نوع submit عمل میکند)
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
نحوه کدگذاری داده های فرم را در هنگام ارسال بسمت سرور مشخص میکند
(فقط در دکمه از نوع submit عمل میکند)
formmethod get
post
نوع متد ارسالی داده هارو بسمت سرور مشخص میکند
( فقط در دکمه از نوع submit عمل میکند )
formnovalidate formnovalidate مشخص میکند که در هنگام ارسال اطلاعات فرم ، داده ها اعتبار سنجی نشوند
( فقط در دکمه از نوع submit عمل میکند)
formtarget _blank
_self
_parent
_top
framename
نحوه باز شدن صفحه مقصد را پس از کلیک بروی دکمه ارسال فرم مشخص میکند
( فقط در دکمه از نوع submit عمل میکند )
name name یک نام برای دکمه مشخص میکند
type button
reset
submit
نوع دکمه را مشخص میکند
value text یک مقدار بصورت پیش فرض برای دکمه مشخص میکند

Free-Learn

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

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

Free-Learn

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

  • سعی کنید همیشه نوع (type) دکمه را مشخص نمایید ( مثلا از نوع submit یا button یا reset ) چون اگر نوع دکمه را مشخص نکرده باشید ، ممکنه برخی از مرورگرها بصورت خودکار خودشون نوع دکمه رو دستکاری کنن و عملا نتیجه ای که میخوایم بدست نیاد.

Free-Learn

دریافت PDF یا پرینت این مطلب