آموزش تگ button در HTML

آموزش تگ button در HTML

تگ <button> در HTML برای ایجاد یک دکمه قابل کلیک برای اجرای عملیات مختلف در وبسایت‌ها استفاده می‌شود. این تگ امکان ایجاد دکمه‌هایی با متن، تصویر یا هر دیگر نوع محتوا را فراهم می‌کند. در این مقاله، تمامی ویژگی‌ها و حالت‌های تگ <button> را بررسی خواهیم کرد و با مثال‌های عملی آن‌ها را توضیح می‌دهیم.

1. تگ button در HTML

تگ <button> برای ایجاد یک دکمه قابل کلیک برای اجرای عملیات مختلف در وبسایت‌ها استفاده می‌شود. این تگ به صورت خودبخود بسته است و بدون تگ بسته‌کننده (</button>) استفاده می‌شود. محتوای درون این تگ می‌تواند شامل متن، تصویر و یا هر نوع محتوای دیگری باشد.

<button>کلیک کنید</button>

2. ویژگی‌های تگ button

2.1. type

این ویژگی نوع عملکرد دکمه را مشخص می‌کند. مقادیر ممکن برای این ویژگی عبارتند از: button، submit، و reset.

<button type="submit">ارسال</button>

2.2. name و value

این ویژگی‌ها می‌توانند اطلاعات اضافی برای ارسال به سرور را مشخص کنند.

<button name="submit" value="save">ذخیره</button>

3. مثال کامل

<form action="/submit" method="post">
   <input type="text" name="username" placeholder="نام کاربری"><br><br>
   <input type="password" name="password" placeholder="رمز عبور"><br><br>
   <button type="submit">ورود</button>
</form>

در این مثال، یک فرم ورود با دو فیلد متنی برای نام کاربری و رمز عبور و یک دکمه “ورود” با استفاده از تگ <button> نمایش داده شده است.

با استفاده از تگ <button> در HTML، می‌توانید دکمه‌هایی با امکانات فراوانی ایجاد کنید که برای انجام عملیات‌های مختلف در وبسایت‌ها مورد استفاده قرار می‌گیرند. این تگ ابزاری مهم در طراحی وبسایت‌های تعاملی و دارای فرم است.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.