طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

اموزش تک button در HTML

از تگ button برای ایجاد کنترل دکمه در یک سند HTML استفاده می شود. یک عنصر <button> کاربر را قادر می سازد با کلیک بر روی دکمه ، فرم ها را ارسال کرده و با سند در تعامل باشد. اگرچه این برچسب اغلب درون یک عنصر <form> قرار دارد ، اما این یک الزام نیست.
ذهن انسان محدودیت نداره

تگ button

از تگ button برای ایجاد کنترل دکمه در یک سند HTML استفاده می شود. یک عنصر <button> کاربر را قادر می سازد با کلیک بر روی دکمه ، فرم ها را ارسال کرده و با سند در تعامل باشد. اگرچه این برچسب اغلب درون یک عنصر <form> قرار دارد ، اما این یک الزام نیست.

همچنین می تواند به یک فرم در جای دیگری از سند با ویژگی شکل مرتبط شود. همچنین می تواند به عنوان یک کنترل مستقل مورد استفاده قرار گیرد (یعنی بدون اینکه با هیچ عنصر <form> در ارتباط باشد).

Syntax

تگ button را به این شکل <button> </button> با محتویات آن بین برچسب شروع و پایان نوشته شده است. محتویات به عنوان برچسب دکمه عمل می کنند (یعنی هر چیزی که بین برچسب شروع و پایان نوشته شده است روی دکمه نمایش داده می شود). عنصر <button> تعدادی ویژگی را می پذیرد که به شما امکان می دهد ظاهر دکمه ، رفتار و موارد دیگر را شخصی سازی کنید. در زیر لیست کاملی از ویژگی های قابل استفاده با برچسب <button> را در زیر مشاهده می کنید. در اینجا نمونه ای از Syntax اصلی برای ارائه عنصر <button> آورده شده است:

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

مثال ها

استفاده اولیه از برچسب

در اینجا ما از یک دکمه مستقل استفاده می کنیم (یعنی به یک فرم وصل نشده است). ما با استفاده از JavaScript برای نمایش کادر هشدار در هنگام کلیک کاربر روی دکمه ،کلمه تمام شد را نشان میدهیم.

<button onclick="JavaScript:alert('Well done!')">Click Me!</button>

دکمه را داخل یک فرم استفاده کردیم .


در اینجا دکمه را درون یک تگ form استفاده می کنیم که دکمه را به بخشی از فرم تبدیل می کند.

<form action="/html/tags/html_form_tag_action.cfm" method="get" target="_blank">
  First name:
  <input type="text" name="first_name" maxlength="100" />
  <br />
  Last name:
  <input type="text" name="last_name" maxlength="100" />
  <button type="submit">Submit</button>
</form>

دکمه خارج یک فرم

در اینجا دکمه را با استفاده از صفت فرم به یک عنصر <form> مرتبط می کنیم (یعنی شناسه فرم را به عنوان مقدار درج می کنیم). با این کار ، لازم نیست تگ button را درون عنصر <form> لانه کنیم.

<form action="/html/tags/html_form_tag_action.cfm" method="get" target="_blank" id="my_form">
First name:
<input type="text" name="first_name" maxlength="100">
<br />
Last name:
<input type="text" name="last_name" maxlength="100">
</form>
<p>Other content...</p>
<button type="submit" form="my_form">Submit</button>

عناصر مرتبط با فرم

برخی از عناصر HTML می توانند “مالک فرم” داشته باشند. این بدان معنی است که عنصر با فرم در ارتباط است و می تواند از آن استفاده شود که انگار بخشی از آن شکل است. اگر شما یک یا چند فرم در یک صفحه داشته باشید و تگ form درون هیچ یک از آنها واقع نشود ، می تواند مفید باشد. عناصر HTML زیر “عناصر مرتبط با فرم” هستند:

  • button
  • fieldset
  • input
  • keygen
  • label
  • object
  • output
  • select
  • textarea
  • img

دکمه همراه با عکس :

تگ button برای نمایش عکس روی دکمه می توانید یک عنصر <img> را در داخل عنصر <button> خود وارد کنید. شما هنوز هم می توانید متن را بر روی دکمه اضافه کنید ، در نتیجه ترکیبی از تصویر و متن است.

<button onclick="JavaScript:alert('شما عاشق این عکس هستید!')">
<img src="{ادرس عکس شما}" alt="Read book">
<br>خواندن کتاب</button>

ویژگی های تگ button

ویژگی ها را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد. عنصر <button> ویژگی های زیر را می پذیرد:

ویژگی ها توضیحات
autofocusهنگام بارگیری صفحه ، به طور خودکار به این کنترل توجه می شود. این به کاربر اجازه می دهد بدون نیاز به انتخاب ابتدا ، از کنترل استفاده کند. نباید بیش از یک عنصر در سند با مشخصه فوکوس خودکار مشخص شده باشد. این یک ویژگی بولینی است. اگر این ویژگی وجود داشته باشد ، مقدار آن باید یا رشته خالی یا مقداری باشد که مطابق مورد حساس ASCII برای نام کانونی صفت باشد ، بدون فضای سفید پیشرو یا دنباله (یعنی یا autofocus یا autofocus="autofocus"“) امکان پذیر باشد. مقادیر: فوکوس خودکار [رشته خالی]
disabledکنترل را غیرفعال می کند. بنابراین ، اگر کاربر سعی کند از کنترل استفاده کند ، هیچ اتفاقی نخواهد افتاد. این یک ویژگی بولینی است. اگر این ویژگی وجود داشته باشد ، مقدار آن باید یا رشته خالی یا مقداری باشد که مطابق مورد حساس ASCII برای نام کانونی صفت باشد ، بدون فضای سفید پیشرو یا دنباله (یعنی disabled یا disabled="disabled"“) امکان پذیر باشد. مقادیر: [رشته خالی] غیرفعال است
formشناسه فرمی را که این کنترل به آن تعلق دارد ، مشخص می کند. مقادیر ممکن: [شناسه عنصر فرم در سند مالکیت عنصر]
formactionنشانی اینترنتی پرونده را مشخص می کند که هنگام ارسال ، کنترل را پردازش می کند.
formenctypeمقدار محتوا را برای رمزگذاری مجموعه داده های فرم هنگام ارسال به سرور مشخص می کند. مقادیر ممکن: برنامه / x-www-form-urlencoded (پیش فرض) چند بخش / فرم-داده (استفاده از این هنگام بارگذاری پرونده ها) متن / ساده (استفاده این هنگام بارگذاری پرونده ها)
formmethodروش HTTP را برای استفاده در هنگام ارائه کنترل مشخص می کند. مقادیر ممکن: دریافت (ارسال فرم داده ها به URL در هنگام ارسال ارسال می شود) ارسال (داده فرم فرم به URL اضافه نشده است) گفتگو (کادر محاوره ای را که در آن فرم بسته می شود) می گیرد. در صورت وجود خود را پیدا می کند ، و در غیر این صورت تسلیم نمی شود.)
formnovalidateمشخص می کند که فرم نباید در طول ارسال تأیید شود. این یک ویژگی بولی است. اگر این ویژگی وجود داشته باشد ، مقدار آن باید یا رشته خالی باشد یا مقداری که مطابق مورد حساس ASCII برای نام متعارف صفت باشد ، بدون فضای سفید پیشرو یا دنباله دار (یعنی یا novalidate یا novalidate = “novalidate”) امکان پذیر باشد. مقادیر: novalidate [رشته خالی]
formtargetزمینه بارگذاری را برای بارگذاری مقصد ذکر شده در ویژگی عملکرد مشخص می کند. مقادیر ممکن: _blank_ Self_top_parent
menuاگر ویژگی نوع دارای مقدار منو باشد ، باید ویژگی منو را برای مشخص کردن منوی عنصر ارائه دهید. مقدار باید شناسه یک عنصر <menu> در همان زیربنای خانه باشد که ویژگی نوع آن در حالت منو پاپ قرار دارد. ویژگی منو فقط در صورت استفاده از ویژگی نوع می تواند مورد استفاده قرار گیرد.
nameنام کنترل را تعیین می کند.
typeنوع دکمه را تعیین می کند. مقادیر ممکن: ارسال فرم را ارسال می کند. این مقدار پیش فرض است. تنظیم مجدد فرم. دکمه هیچ کاری نمی کند. می توانید از JavaScript استفاده کنید تا کنترل در واقع کاری انجام دهد. منو یک منو را نشان می دهد. هنگام استفاده از این مقدار ، باید منو را با استفاده از ویژگی منو مشخص کنید (به بالا مراجعه کنید).
valueمقدار اولیه را به کنترل اختصاص می دهد. دکمه (و مقدار آن) فقط در صورتی ارائه می شود که فرم برای شروع ارسال فرم از خود دکمه استفاده شود.

دیدگاه‌های نوشته

Share via
ارسال این به یک دوست