مثال (تگ button در HTML)
ایجاد یک دکمه قابل کلیک شدن:
خودتان امتحان کنید »
تعریف و کاربرد تگ button در HTML
تگ <button> یک دکمه قابل کلیک کردن را به وجود می آورد.
تفاوت دکمه ایجاد شده با تگ<button> و دکمه ایجاد شده با تگ <input> در این است که داخل تگ <button> می توان محتوایی شامل متن یا تصویر گذاشت.
نکته: همیشه نوع ویژگی ها (attribute) عنصر را مشخص کنید، زیرا مرورگر های مختلف مقادیر مختلفی را به طور پیش فرض برای عنصر <button> به کار می برند.
پشتیبانی مرورگرها از تگ button در HTML
| عنصر | |||||
|---|---|---|---|---|---|
| <button> | بله | بله | بله | بله | بله |
نکته ها و ترفندها
نکته: اگر در یک فرم HTML، از تگ <button> استفاده کنید، مرورگر های مختلف ممکن است مقادیر متفاوتی رو ارسال کنند، به همین دلیل در فرم ها از تگ <input> استفاده کنید.
تفاوت بین HTML 4.01 و HTML5
HTML5 شامل ویژگی ها (attribute) جدیدی است از جمله:autofocus ،form ،formaction ،formenctypy ،formmethod formnovalidate و formtarget.
خصوصیت ها
= جدید در HTML5.
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| autofocus | autofocus | مشخص می کند یک button (دکمه) بطور خودکار در کانون توجه قرار می گیرد زمانی که صفحه load می شود. |
| disabled | disabled | یک button (دکمه) غیر فعال را مشخص می کند. |
| form | form_id | مشخص می کند که یک button متعلق به کدام فرم یا فرم ها می باشد. |
| formaction | URL | مشخص کننده این است که هنگام ارسال یک فرم داده های مربوط به آن به کجا فرستاده شوند. (فقط برای نوع submit) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | مشخص کننده این است که داده های مربوط به فرم پیش از ارسال آن فرم چگونه رمزگذاری شود. (فقط برای نوع submit) |
| formmethod | get post | مشخص کننده این است که داده های مربوط به یک فرم چگونه فرستاده شوند(با استفاده از کدام متد HTTP ). (فقط برای نوع submit) |
| formnovalidate | formnovalidate | مشخص کننده این است که داده های یک فرم احتیاجی به سنجش اعتبار ندارند. (فقط برای نوع submit) |
| formtarget | _blank _self _parent _top framename | مشخص کننده این است که پیغام کجا نمایش داده شود پس از اینکه فرم ارسال می شود. (فقط برای نوع submit) |
| name | name | مشخص کننده یک نام برای button |
| type | button reset submit | مشخص کننده نوع button |
| value | text | مشخص کننده یک مقدار اولیه برای button |
ویژگی های عمومی تگ button در HTML
تگ <button> از ویژگی های عمومی درHTML پشتیبانی می کند.
رویدادهای عمومی تگ button در HTML
تگ <button> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ button در JavaScript
من میخوام یه دکمه بزارم که وقتی روش کلیک شد بره داخل یه فرم
خصوصیت onclick مساوی alert رو در کد زیر، لطفا توضیح میدید؟ ممنون<button type="button" onclick="alert('Hello world!')">Click Me!</button>
ویژگی Onclick همان طور که از اسمش پیداست، مربوط به رویداد کلیک کردن روی دکمه می شود. یعنی زمانی که روی دکمه کلیک شود، کدی که در ویژگی onclick نوشته ایم اجرا خواهد شد.
اما دستور alert که در قسمت onclock استفاده شده است باعث می شود تا یک پیغام دلخواه روی صفحه نمایان شود. البته این پیغام داخل یک پنجره کوچک بهمراه دکمه OK نشان داده خواهد شد.
ببخشید میخواستم بدونم فرق submit با button چیه؟
در دکمه از نوع submit، بلافاصله بعد از کلیک کاربر، داده های فرم به سرور ارسال می شود و صفحه refresh می شود. submit بمعنی تسلیم کردن است. اما در تگ button اینگونه نیست و به ازای کلیک شدن (onclick) می توان یک تابع JavaScript را فراخوانی کرد.