آموزش تگ button در HTML
کاربرد تگ button در HTML
فهرست موضوعات در این آموزش
تگ <button> یک دکمه قابل کلیک کردن را به وجود می آورد.
تفاوت دکمه ایجاد شده با تگ<button> و دکمه ایجاد شده با تگ <input> در این است که داخل تگ <button> می توان محتوایی شامل متن یا تصویر گذاشت.
نکته: همیشه نوع ویژگی ها (attribute) عنصر را مشخص کنید، زیرا مرورگر های مختلف مقادیر مختلفی را به طور پیش فرض برای عنصر <button> به کار می برند.
دکمه ها یا Buttons در CSS
دکمه یا باتون یا به انگلیسی Button که دیگه میدونید چیه! به هرچیزی که قابل کلیک باشه میتونیم بهش بگیم دکمه، مثلا اون دکمه های داخل فرم های عضویت و ورود یا دکمه داخل منو و..
بطور کلی میتونیم بگیم ما چندین نمونه دکمه داریم:
- دکمه قابل کلیک ولی بدون لینک ( تگ button )
- دکمه قابل کلیک و دارای لینک ( تگ a )
- دکمه سابمیت یا Submit ( استفاده فقط در فرم ها )
دکمه قابل کلیک ولی بدون لینک : این دکمه ها لینک ندارند ولی قابل کلیک هستن، مثلا میتونیم بگیم وقتی روی این دکمه کلیک شد یه پیغام نشون داده بشه یا حالا هرکار دیگه
دکمه قابل کلیک و دارای لینک : خیلی راحت با استفاده از تگ a میتونیم یه لینک درست کنیم بعدش با استفاده از CSS بهش استایل بدیم
دکمه سابمیت یا Submit : این نوع دکمه در داخل تگ Form مورد استفاده قرار میگیرد و کاربر با کلیک بروی این نوع دکمه ها اطلاعات یک فرم از صفحه جاری به صفحه ای در سرور منتقل می شود.
چندتامثال بزنیم مثال اول ساخت دگمه با استفاده از تگ button
|
1 |
<button>ارسال</button> |
با استفاده از استایل از کد های زیر استفاده نمایید .
|
1 2 3 4 5 6 7 8 9 |
button{ background-color: blueviolet; color: #fff; padding: 10px; border: 2px solid #333; cursor: pointer; border-radius: 5px; text-decoration: none; } |
دکمه قابل کلیک و دارای لینک ( تگ a )
تگ a رو که دیگه میدونید چیه! خیلی راحت با استفاده از تگ a در HTML میتونیم یک لینک درست کنیم بعدش بازم با استفاده از CSS میتونیم بهش استایل بدیم و شبیه یه دکمه درش بیارم.
مثال شماره دو ساخت دگمه برای تگ a
|
1 |
<a href="https://replywp.com">پاسخ وردپرس</a> |
برای نمایش ساخت دگمه از استایل زیر استفاده فرمایید.
|
1 2 3 4 5 6 7 8 9 |
a{ background-color: blueviolet; color: #fff; padding: 10px; border: 2px solid #333; cursor: pointer; border-radius: 5px; text-decoration: none; } |
دکمه سابمیت یا Submit ( استفاده فقط در فرم ها )
همونطور که گفتم این نوع دکمه کاربردش در تگ Form می باشد، و وقتی روش کلیک میشه داده های داخل فرم رو بسمت سرور ارسال میکنه.
( برای استایل دادن به این دکمه هیچ فرقی با روش های بالا نداره و فقط کافیه با استفاده از CSS هرچی دوس داشتید بهش استایل بدید )
مثال شماره سه استاده از تگ input
|
1 |
<input type="submit" value="ارسال"> |
برای نمایش مثال یک دگمه از استایل زیر استفاده فرمایید.
|
1 2 3 4 5 6 7 |
input{ background-color: blueviolet; color: #fff; padding: 10px; border: 2px solid #333; cursor: pointer; border-radius: 5px; |
نکته
همواره سعی کنید خصیصه های type را برای عنصر <button> مشخص کنید.
مرورگرهای مختلف برای عنصر <button> از انواع پیش فرض مختلف استفاده می کنند.
توصیه
اگر از تگ <button> در فرم HTML استفاده می کنید، مرورگرهای مختلف می توانند مقادیر متفاوتی ارسال کنند.
لذا برای ایجاد دکمه به صورت HTML از <input> استفاده کنید.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.