فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

تگ button در html + ویدیو آموزشی

تگ button در html برای ما یک دکمه ایجاد می کند که قابل کلیک کردن است. در این دکمه محتوایی مانند عکس و متن می تواند قرار بگیرید. در ادامه ساخت انواع دکمه را به مختصر بیان می کنیم سپس به صورت اختصاصی به ایجاد دکمه با تگ button در html می پرازیم تا به صورت کامل با آن آشنا شوید.

 

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

 

ساخت دکمه در html

ساخت دکمه در html به چند روش امکان پذیر است که هر کدام کاربرد و ویژگی های منحصر به فرد خود را دارد. در زیر این روشها را بررسی می کنیم تا به صورت کلی با کاربرد هر کدام آشنا شوید.

 

ایجاد دکمه با تگ button:

با تگ button می توانید یک دکمه قابل کلیک ایجاد کنید و درون آن متن، عکس و … قرار دهید.

 

ایجاد دکمه با submit:

با ویژگی سابمیت می توانید در فرم های خود یک دکمه ایجاد کنید که اطلاعات فرم را به سرور ارسال کند. ویژگی submit یکی از خصوصیات تگ input است. برای ایجاد دکمه با سابمیت به صورت زیر عمل می کنیم:

 

ایجاد دکمه با تگ a:

تگ a به صورت کلی برای لینک دهی به یک صفحه و یا هدفی خاص می باشد، ولی با ایجاد بک گراند و پدینگ برای آن می توانید دکمه های زیبایی با این تگ ایجاد کنید و به هدف لینک دهید. (برای آشنایی بیشتر با این تگ می توانید مقاله تگ a در HTML را مطالعه نمایید)

 

تگ button در html

در زیر ویژگی های این تگ را بیان می کنیم و پس از آن با مثال سعی می کنیم موارد را بهتر توضیح دهیم.

  • تگ <button> شامل یک تگ باز و یک تگ بسته است.
  • تگ <button> یک دکمه قابل کلیک را تعریف می کند.
  • داخل <button> می توانید عکس، متن (و برچسب هایی مانند <i>، <b>، <strong>، <br>، <img> و …) قرار دهید. این کار با دکمه ای که با عنصر <input> ایجاد شده امکان پذیر نیست!

 

مثال:

خروجی: خروجی کار یک متن به صورت «برو به وبسافت3» خواهد بود که نه استایل دارد و نه لینک. در ادامه کم کم به آن استایل می دهیم و برای آن لینک ایجاد می کنیم.

 

نکته: ویژگی type را برای عنصر <button> همیشه مشخص کنید تا به مرورگرها بگویید که چه نوع دکمه ای است. اگر این کار را نکنید ممکن مرورگرها به صورت پیشفرض یک ویژگی برای آن در نظر بگیرند.

 

استایل دادن به button در css

برای استایل دادن به دکمه در ابتدا یک بک گراند به آن می دهیم و سپس با پدینگ، تغییر رنگ، تغییر سایز و … می توانیم یک دکمه زیبا درست کنیم.

در مثال ذکر شده استایل های زیر را درج می کنیم تا به یک خروجی زیبا برسیم:

خروجی:

تگ button در html

 

 

لینک دادن به دکمه در html

تا به حال توانستیم با استفاده از تگ button در html یک دکمه ایجاد کنیم و با استایل دادن به آن، یک دکمه زیبا ایجاد کنیم، ولی هدف از ایجاد دکمه این است که با کلیک روی آن به یک هدف برسیم. مثلا با کلیک روی دکمه به یک لینک خاص هدایت شویم.

 

مثال: برای لینکدار کردن دکمه به صورت زیر عمل می کنیم:

 

مثال: اگر بخواهیم بعد از کلیک به صفحه خاصی هدایت نشود و فقط یک پیغام به ما نشان دهد به صورت زیر عمل می کنیم:

خروجی: با کلیک بر روی این دکمه یک پاپ آپ به شکل زیر در صفحه برای ما باز می شود:

 

جمع بندی

در این مطلب سعی شد با ذکر مثال و به صورت عملی شیوه ایجاد دکمه با تگ button در html آموزش داده شود. امیدوارم این آموزش برای شما مفید باشد. اگر در این رابطه سوالی دارید در بخش نظرات مطرح نمایید.

 

منبع: https://www.w3schools.com/tags/tag_button.asp

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد