آموزش تگ button در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ button در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ button
تگی است که ما با استفاده از آن میتوانیم یک دکمه ی قابل کلیک شدن را ایجاد نماییم.
اگر در جریان باشید ما بطور کلی ۲ نوع دکمه قابل کلیک شدن داریم :
- دکمه از نوع button که در این بخش میخواهیم باهاش آشنا بشیم دکمه ای است که قابل کلیک شدن می باشد و ما میتوانیم محتوایی همچون متن و.. در این دکمه قرار دهیم.
- دکمه از نوع ورودی (input) که از این نوع دکمه معمولا در فرم ها برای ارسال اطلاعات فرم به سرور استفاده می شود.
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : یک دکمه ی معمولی و قابل کلیک شدن
1 2 3 4 5 |
<body> <button onclick="alert('سلام خوبی؟')">کلیک کن</button> </body> |
مثال شماره ۲ : یک دکمه ایجاد شده با CSS (دکمه سفارشی)
1 2 3 4 5 |
<body> <button class="button" onclick="alert('سلام خوبی؟')">کلیک کن</button> </body> |
مثال شماره ۳ : دکمه تمام عرض در رنگ های مختلف
1 2 3 4 5 6 7 8 9 |
<body> <button class="button">کلیک کن</button> <button class="button red">کلیک کن</button> <button class="button yellow">کلیک کن</button> <button class="button green">کلیک کن</button> <button class="button purple">کلیک کن</button> </body> |
مثال شماره ۴ : دکمه ایجاد شده با CSS (با تگ a و دارای لینک)
1 2 3 4 5 6 7 8 9 |
<body> <a href="#" class="button"><span>دانلود </span></a> <a href="#" class="button bg-blue"><span>دانلود </span></a> <a href="#" class="button bg-red"><span>دانلود </span></a> <a href="#" class="button bg-purple"><span>دانلود </span></a> <a href="#" class="button bg-green"><span>دانلود </span></a> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ button
در HTML پشتیبانی میکنند یا خیر.
نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت یعنی در 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 استفاده نمایید. (همانند دستور زیر)
1 |
<input type="submit"> |