آموزش تگ button در HTML

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

آموزش تگ button در HTML

Free-Learn

تگ button در HTML

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

اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :

  •  دکمه از نوع button که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
  • دکمه از نوع ورودی (input) که از این نوع دکمه معمولا در فرم ها برای ارسال اطلاعات فرم به سرور استفاده می شود.

Free-Learn

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

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

مثال شماره ۱ : یک دکمه ی معمولی و قابل کلیک شدن

امتحان کنید

مثال شماره ۲ : یک دکمه ایجاد شده با CSS (دکمه سفارشی)

امتحان کنید

مثال شماره ۳ : دکمه تمام عرض در رنگ های مختلف

امتحان کنید

مثال شماره ۴ : دکمه ایجاد شده با CSS (با تگ a و دارای لینک)

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

(علامت یعنی در HTML5 اضافه شده است)

نام صفت مقدار توضیح
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) چون اگر نوع دکمه را مشخص نکرده باشید ، ممکن است برخی از مرورگرها بصورت پیش فرض تنظیماتی را بروی دکمه ها اعمال نمایند.

اگر میخواهید با کلیک بروی دکمه ، اطلاعات فرم ها ارسال شوند بهتر است از دکمه نوع Input و درون تگ Form استفاده نمایید. (همانند دستور زیر)


Free-Learn