نمونه های دکمه Html. زمان استفاده از عنصر Button

24.06.2019 بررسی ها

شرح

تگ HTML

Disabled: قابلیت کلیک روی دکمه را غیرفعال می کند. این را می توان در مواردی استفاده کرد که دکمه باید با رعایت شرایط خاص فعال شود (مثلاً وقتی یک چک باکس انتخاب شده است و غیره)، می توان دکمه را با استفاده از جاوا اسکریپت فعال کرد. مقادیر برای ویژگی boolean disabled را می توان به روش های زیر تنظیم کرد: form: نشان می دهد که این دکمه متعلق به کدام فرم است. مقدار یک یا چند شناسه فرم است که با فاصله از هم جدا شده اند. تعداد شناسه ها در مقدار مشخصه به تعداد فرم های متعلق به دکمه بستگی دارد:

دکمه خارج از عنصر فرم است، اما بخشی از فرم است.

توجه: این ویژگی در اینترنت اکسپلورر پشتیبانی نمی شود.

Formaction: با فشردن دکمه، آدرسی را که داده های فرم ارسال می شود، تعیین می کند. اگر ویژگی action برای فرم مشخص شده باشد، ویژگی formation مقدار آن را لغو می کند:

ویژگی formation فقط برای دکمه هایی با ویژگی type = "submit" استفاده می شود.

توجه: این ویژگی در IE9 و نسخه های قبلی پشتیبانی نمی شود.

Formenctype: نحوه کدگذاری داده های فرم را قبل از ارسال به سرور مشخص می کند. فقط برای دکمه هایی با ویژگی type = "submit" استفاده می شود. مقادیر ویژگی ممکن:

برنامه / x-www-form-urlencoded- همه کاراکترها قبل از ارسال کدگذاری می شوند (پیش فرض).
چند بخشی / فرم-داده- کاراکترها کدگذاری نمی شوند (این روش هنگام استفاده از فرم هایی استفاده می شود که فایل کنترلی آپلود دارند).
متن / ساده- فضاها به کاراکتر "+" تبدیل می شوند، اما کاراکترها کدگذاری نمی شوند.

اگر مشخصه enctype برای فرم مشخص شده باشد، ویژگی formenctype مقدار آن را لغو می کند.

توجه: این ویژگی در IE9 و نسخه های قبلی پشتیبانی نمی شود.

Formmethod: نشان می دهد که از کدام روش HTTP هنگام ارسال داده های فرم استفاده می شود. فقط برای دکمه هایی با ویژگی type = "submit" استفاده می شود. مقادیر ویژگی ممکن:

گرفتن- داده های فرم در انتهای آدرس ضمیمه شده است: url? name = value? name = value
پست- داده های فرم را پس از تراکنش به عنوان HTTP ارسال می کند

اگر مشخصه روش برای یک فرم مشخص شده باشد، ویژگی formmethod مقدار آن را لغو می کند.

توجه: این ویژگی در IE9 و نسخه های قبلی پشتیبانی نمی شود.

Formnovalidate: نشان می دهد که داده های فرم تایید نمی شوند. فقط برای دکمه هایی با ویژگی type = "submit" استفاده می شود. مقادیر برای ویژگی فوکوس خودکار بولین را می توان به روش های زیر تنظیم کرد: اگر ویژگی novalidate برای فرم مشخص شده باشد، ویژگی formnovalidate مقدار آن را لغو می کند.

توجه: این ویژگی در IE9 و قبل از آن یا در Safari پشتیبانی نمی‌شود.

Formtarget: مشخص می کند که پاسخ پس از ارسال فرم در کجا نمایش داده شود. فقط برای دکمه هایی با ویژگی type = "submit" استفاده می شود. مقادیر ویژگی ممکن:

_جای خالی- پاسخ را در یک پنجره یا تب جدید باز می کند.
_خود- پاسخ را در همان فهرستی که پیوند در آن قرار دارد باز می کند (پیش فرض).
_والدین- پاسخ را در پنجره والد باز می کند.
_بالا- پاسخ را به عرض کامل پنجره باز می کند.
frame_name- پاسخ را در یک iframe که نام آن به عنوان مقدار مشخص شده است باز می کند.

اگر مشخصه target برای فرم مشخص شده باشد، ویژگی formtarget مقدار آن را لغو می کند.

توجه: این ویژگی در IE9 و نسخه های قبلی پشتیبانی نمی شود.

Name: نامی را برای عنصر مشخص می کند

توجه: برخی موارد

توجه: همیشه ویژگی type را برای دکمه ها مشخص کنید، زیرا مرورگرهای مختلف ممکن است از پیش فرض های متفاوتی برای ویژگی type استفاده کنند.

Value: مقدار دکمه ای که به سرور ارسال می شود یا توسط اسکریپت ها خوانده می شود.

توجه: اگر از عنصر استفاده می کنید ... در حالی که سایر مرورگرها محتوای ویژگی ارزش را ارسال می کنند.

برچسب بزنید

تگ بسته شدن الزامی است.

وای آریا

نقش پیش فرض این است: دکمه

مقادیر معتبر برای نقش:

چک باکس
ارتباط دادن
آیتم منو
کادر چک منویتم
منویتمرادیو
گزینه
رادیو
تعویض

ویژگی های

فوکوس خودکار - دکمه را برای دریافت فوکوس پس از بارگیری صفحه تنظیم می کند.
غیر فعال - دسترسی و اصلاح عنصر را مسدود می کند.
فرم - یک فرم و یک دکمه را به هم پیوند می دهد.
formation - آدرسی را تنظیم می کند که هنگام فشار دادن دکمه، داده های فرم به آن ارسال می شود.
formenctype - نحوه کدگذاری داده های فرم.
formmethod - روش ارسال داده های فرم را مشخص می کند.
formnovalidate - اعتبار فرم را لغو می کند.
formtarget - نتیجه ارسال فرم را در یک پنجره یا فریم جدید باز می کند.
name - یک نام منحصر به فرد برای دکمه تعریف می کند.
نوع - نوع دکمه را تنظیم می کند: عادی. برای ارسال داده های فرم به سرور؛ برای تمیز کردن قالب
ارزش - مقدار دکمه ای که به سرور ارسال می شود یا با استفاده از اسکریپت خوانده می شود.

فوکوس خودکار

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

نحو

ارزش ها

مقدار پیش فرض

معلول

دسترسی به دکمه و اصلاح آن را مسدود می کند. در این حالت به رنگ خاکستری نمایش داده می شود و برای فعال سازی توسط کاربر در دسترس نیست. علاوه بر این، چنین دکمه ای نمی تواند با فشار دادن کلید Tab، با ماوس یا هر روش دیگری فوکوس را به دست آورد. با این حال، این حالت دکمه را می توان از طریق اسکریپت ها تغییر داد. مقدار دکمه قفل شده به سرور منتقل نمی شود.

نحو

ارزش ها

مقدار پیش فرض

این مقدار به طور پیش فرض غیرفعال است.

فرم

یک دکمه را با یک فرم با شناسه آن مرتبط می کند. چنین اتصالی در مواردی که دکمه در داخل عنصر قرار ندارد ضروری است.

به عنوان مثال، هنگام ایجاد آن به صورت برنامه ای.

نحو

ارزش ها

شناسه فرم (مقدار ویژگی id عنصر ).

مقدار پیش فرض

شکل گیری

آدرس پردازشگر فرم را تعیین می کند - این برنامه ای است که داده های فرم را دریافت می کند و اقدامات مورد نظر را با آن انجام می دهد. خصیصه formation از نظر عمل شبیه به ویژگی عمل یک عنصر است. ... اگر همزمان اقدام و شکل‌بندی را مشخص کنید، پس از فشار دادن دکمه، ویژگی action نادیده گرفته می‌شود و داده‌ها به آدرس مشخص‌شده در شکل‌بندی ارسال می‌شوند.

نحو

ارزش ها

فرمنتیپ

نحوه کدگذاری داده های فرم را هنگام ارسال به سرور تنظیم می کند. معمولاً زمانی که از فیلد برای ارسال یک فایل استفاده می شود، به صراحت نشان داده می شود (نوع ورودی = "فایل"). این ویژگی از نظر اثر مشابه با ویژگی enctype یک عنصر است. .

نحو

ارزش ها

برنامه / x-www-form-urlencoded - جای + به جای فاصله، کاراکترهایی مانند حروف روسی با مقادیر هگزادسیمال خود کدگذاری می شوند (به عنوان مثال، % D0% 9F% D0% B5% D1% 82% D1% 8F به جای پتیا).
چند بخشی / فرم-داده - داده ها کدگذاری نمی شوند. این مقدار هنگام آپلود فایل استفاده می شود.
متن / ساده - فضاها با + جایگزین می شوند، حروف و سایر کاراکترها کدگذاری نمی شوند.

مقدار پیش فرض

برنامه / x-www-form-urlencoded

روش فرم

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

نحو

ارزش ها

دو روش وجود دارد - GET و POST.

GET - این روش برای انتقال مستقیم داده های فرم در نوار آدرس به شکل جفت های "name = value" طراحی شده است که پس از علامت سوال به آدرس صفحه اضافه می شوند و با علامت علامت (& از هم جدا می شوند). آدرس کامل، برای مثال، http://site.ru/doc/?name=Vasya&password=pup خواهد بود. حجم داده در روش به 4 کیلوبایت محدود شده است.
POST - داده ها را در یک درخواست مرورگر به سرور ارسال می کند، مقدار داده ارسال شده فقط توسط تنظیمات سرور محدود می شود.

formnovalidate

بررسی داخلی داده‌های وارد شده توسط کاربر در فرم را برای صحت با فشار دادن دکمه لغو می‌کند. هنگامی که فرم برای فیلدها به سرور ارسال می شود، چنین تأییدی توسط مرورگر به طور خودکار انجام می شود. , و همچنین اگر عنصر دارای یک الگو یا ویژگی مورد نیاز باشد .

نحو

ارزش ها

مقدار پیش فرض

به طور پیش فرض، این ویژگی خاموش است.

قالب هدف

نام فریمی را مشخص می‌کند که نتیجه بازگشت‌شده توسط فرم‌پرداز به‌عنوان یک سند HTML در آن بارگذاری می‌شود.

نحو

ارزش ها

مقدار، نام فریمی است که با ویژگی نام عنصر مشخص شده است ... اگر یک نام غیر موجود تنظیم شود، یک برگه جدید باز می شود. موارد زیر را می توان به عنوان مقادیر رزرو شده مشخص کرد.</p> <ul><li>_blank - صفحه را در یک برگه مرورگر جدید بارگیری می کند.</li> <li>_self - صفحه را در برگه فعلی بارگذاری می کند.</li> <li>_parent - صفحه را در قاب والد بارگذاری می کند. اگر هیچ فریمی وجود نداشته باشد، این مقدار مانند _self عمل می کند.</li> <li>_top - همه فریم ها را لغو می کند و صفحه را در یک پنجره کامل مرورگر بارگیری می کند. اگر هیچ فریمی وجود نداشته باشد، این مقدار مانند _self عمل می کند.</li> </ul><h3>نام</h3> <p>یک نام منحصر به فرد برای دکمه مشخص می کند. معمولاً از این نام هنگام ارسال مقدار دکمه به سرور یا هنگام دسترسی به دکمه از طریق اسکریپت استفاده می شود.</p> <p><b>نحو</b></p><p> <button name="<имя>">...</button> </p><p><b>ارزش ها</b></p> <p>نام مجموعه ای از کاراکترها شامل اعداد و حروف است. جاوا اسکریپت به حروف کوچک و بزرگ حساس است، بنابراین هنگام ارجاع به یک عنصر با نام، از املای مشابه برای ویژگی name استفاده کنید.</p> <p><b>مقدار پیش فرض</b></p> <h3>نوع</h3> <p>نوع دکمه را مشخص می کند که رفتار آن را روی فرم تنظیم می کند. از نظر ظاهری، دکمه های انواع مختلف به هیچ وجه تفاوتی با هم ندارند، اما هر یک از این دکمه ها عملکردهای خاص خود را دارند.</p> <p><b>نحو</b></p><p> <button type="button | reset | submit">...</button> </p><p><b>ارزش ها</b></p> <ul><li>دکمه - یک دکمه معمولی.</li> <li>تنظیم مجدد - دکمه ای برای پاک کردن داده های فرم وارد شده و برگرداندن مقادیر به حالت اولیه.</li> <li>ارسال - دکمه ارسال اطلاعات فرم به سرور.</li> <li>منو - منوی ایجاد شده با یک عنصر را باز می کند <menu> .</li> </ul><p><b>مقدار پیش فرض</b></p> <ul><li>ارسال</li> </ul><h3>مقدار</h3> <p>مقدار دکمه ای که به سرور ارسال می شود را مشخص می کند. یک جفت "name = value" به سرور ارسال می شود، جایی که نام با ویژگی نام عنصر مشخص می شود. <button>و مقدار، صفت ارزش است. مقدار می تواند با متن روی دکمه مطابقت داشته باشد یا مستقل باشد. ویژگی value نیز برای دسترسی به داده ها از طریق اسکریپت ها استفاده می شود.</p> <p><b>نحو</b></p><p> <button value="<متن>">...</button> </p><p><b>ارزش ها</b></p> <p>هر رشته متنی</p> <p><b>مقدار پیش فرض</b></p> <h2>مشخصات فنی</h2> <h2>نمونه هایی از</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>دکمه</title> </head> <body> <p style="text-align: center"> <button>دکمه با متن</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>دکمه با الگو</button> </p> </body> </html> <p>دکمه ها یکی از عناصر رابط محبوب هستند و اغلب در داخل فرم ها استفاده می شوند، به عنوان مثال برای ارسال اطلاعات وارد شده در فرم به سرور.</p><p>دکمه ها در یک صفحه وب را می توان به روش های مختلفی ایجاد کرد - با استفاده از عنصر <input>یا عنصر <button> .</p><p>ابتدا یک دکمه از طریق اضافه کنید <input>و نحو آن</p><p> <input type="button" value="متن"> </p><p>ویژگی های دکمه در جدول ذکر شده است. یکی</p><p>ایجاد یک دکمه در مثال 1 نشان داده شده است.</p><p>مثال 1. افزودن یک دکمه</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دکمه</title> </head> <body> <form> <p><input type="button" value="مرا به آرامی فشار دهید"></p> </form> </body> </html> </p><p>توجه داشته باشید که تمام فضاهای موجود در برچسب دکمه برخلاف متن معمولی HTML شمارش می‌شوند، بنابراین می‌توانید از هر تعداد فاصله‌ای که در نهایت بر عرض دکمه تأثیر می‌گذارد استفاده کنید. اما درست تر است، البته تنظیم ظاهر دکمه از طریق CSS. نتیجه مثال در شکل نشان داده شده است. یکی</p><p>برنج. 1. نمای دکمه</p><p>تعدادی قانون اجباری برای چنین دکمه هایی وجود دارد:</p><ul><li><input> <a> ;</li><li><input>نمی توان داخل یک دکمه تو در تو قرار داد <button> ;</li><li>مقدار صفت value نمی تواند خالی باشد.</li> </ul><p>راه دوم برای ایجاد یک دکمه بر اساس استفاده از یک عنصر است <button>... در عمل خود، آن را شبیه به نتیجه به دست آمده با استفاده از <input>... اما بر خلاف آن، گزینه های پیشرفته ای برای ایجاد دکمه ها ارائه می دهد. به عنوان مثال، می توانید هر عنصر HTML را روی دکمه ای مانند این قرار دهید، از جمله تصاویر و جداول. در شکل 2 انواع مختلفی از دکمه های به دست آمده با استفاده را نشان می دهد <button> .</p><p><img src='https://i1.wp.com/webref.ru/assets/images/html5-css3/form-button-02.png' width="100%" loading=lazy loading=lazy></p><p>برنج. 2. دکمه های ایجاد شده با <button></p><p>نحو ایجاد چنین دکمه ای به شرح زیر است.</p><p> <button>برچسب دکمه</button> </p><p>ویژگی ها در جدول ذکر شده است. 1، اما بر خلاف دکمه <input>ویژگی value فقط مقدار ارسال شده به سرور را تعیین می کند، نه برچسب روی دکمه. اگر می خواهید تصویری را روی دکمه نمایش دهید، پس <img>داخل اضافه شد <button>همانطور که در مثال 2 نشان داده شده است.</p><p>مثال 2. تصویر روی یک دکمه</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دکمه</title> </head> <body> <form> <p><button>دکمه با متن</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy loading=lazy>دکمه با الگو</button></p> </form> </body> </html> </p><p>این مثال نحوه ایجاد یک دکمه معمولی با متن و همچنین یک دکمه با استفاده همزمان از متن و گرافیک را نشان می دهد. اندازه دکمه به محتوا بستگی دارد <button>، اما فضاها نادیده گرفته می شوند، بنابراین به سادگی با افزایش تعداد آنها، مانند مورد استفاده <input>، عرض دکمه را نمی توان تغییر داد.</p><p>برای <button>همچنین تعدادی محدودیت وجود دارد:</p><ul><li><button>نمی توان داخل یک پیوند تو در تو قرار داد <a> ;</li><li>یکی <button>شما نمی توانید در داخل دیگری سرمایه گذاری کنید.</li> </ul><h2>دکمه ارسال</h2><p>برای ارسال اطلاعات به سرور، دکمه ارسال ویژه وجود دارد. ظاهر آن هیچ تفاوتی با دکمه های معمولی ندارد، اما زمانی که روی آن کلیک می کنید، در آدرسی که توسط ویژگی action عنصر مشخص شده است، به کنترل کننده فرم می روید. <form>... برنامه handler داده های وارد شده توسط کاربر را در فیلدهای فرم دریافت می کند، دستکاری های لازم را با آنها انجام می دهد و سپس نتیجه را در قالب یک سند HTML برمی گرداند. اینکه کنترل کننده دقیقاً چه کاری انجام می دهد به نویسنده سایت بستگی دارد، به عنوان مثال، یک فناوری مشابه در هنگام ایجاد نظرسنجی، انجمن، آزمایش و بسیاری موارد دیگر استفاده می شود.</p><p>نحو ایجاد دکمه ارسال به عنصری که استفاده می کنید بستگی دارد <input>یا <button> .</p><p> <input type="submit"> <button type="submit">برچسب دکمه</button> </p><p>ویژگی‌ها مانند دکمه‌های معمولی هستند (مثال 3)، اما مقدار مشخصه value اکنون می‌تواند حذف شود، زیرا مرورگر خود متن را جایگزین می‌کند، بسته به مرورگر متفاوت است. به عنوان مثال، فایرفاکس می نویسد "Submit a request"، IE - "Submit a request"، Opera و Chrome - "Submit". متن برچسب به هیچ وجه بر عملکرد دکمه تأثیر نمی گذارد.</p><p>مثال 3. ارسال داده به سرور</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دکمه</title> </head> <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> </html> </p><h2>کلید ریست</h2><p>هنگامی که بر روی دکمه Reset کلیک می کنید، داده های فرم به مقادیر اصلی خود باز می گردند. به عنوان یک قاعده، از این دکمه برای پاک کردن اطلاعات وارد شده در فیلدهای فرم استفاده می شود. برای فرم های بزرگ بهتر است از استفاده از دکمه Reset کلا خودداری کنید تا اشتباهاً روی آن کلیک نکنید زیرا در این صورت باید دوباره فرم را پر کنید.</p><p>سینتکس ایجاد دکمه مشخص شده ساده و شبیه به دکمه های دیگر است.</p><p> <input type="reset"> <button type="reset">برچسب دکمه</button> </p><p>مثال 4 فرمی را با یک فیلد متنی نشان می دهد که از قبل حاوی متنی است که از قبل با استفاده از ویژگی مقدار عنصر وارد شده است. <input>... پس از تغییر متن و کلیک بر روی دکمه "Clear"، مقدار فیلد بازیابی می شود و مجدداً عبارت "Enter text" در آن ظاهر می شود.</p>تگ های HTML <h2>معنی و کاربرد</h2> <p>تگ HTML <button>برای قرار دادن دکمه استفاده می شود. داخل تگ <button>می توانید متن و تصویر فرمت شده را قرار دهید. این تفاوت اصلی بین این عنصر و دکمه های ایجاد شده با استفاده از تگ است <input>(با ویژگی type = "button").</p> <p>همیشه برای تگ مشخص کنید <button>نوع ویژگی = "دکمه" اگر عنصر به عنوان یک دکمه معمولی استفاده شود. اگر از تگ استفاده می کنید <button>در داخل یک فرم HTML، ممکن است با این واقعیت مواجه شوید که نسخه های قدیمی مرورگرها ممکن است هنگام ارسال فرم مقادیر متفاوتی ارائه دهند. <b>در این مورد توصیه می شود از عنصر استفاده کنید <input>برای ارسال فرم های HTML</b></p> <h2>پشتیبانی از مرورگر</h2> <table class="tableTag"><tr><th class="tw">برچسب بزنید</th><th></th><th></th><th><br>اپرا</th><th></th><th><br>IExplorer</th><th><br>حاشیه، غیرمتمرکز</th> </tr><tr><td><button> </td><td class="tyes">آره</td><td class="tyes">آره</td><td class="tyes">آره</td><td class="tyes">آره</td><td class="tyes">آره</td><td class="tyes">آره</td> </tr></table><h2>ویژگی های</h2> <table class="tableTag"><tr><th>صفت</th><th>معنی</th><th class="tatt">شرح</th> </tr><tr><td> </td><td>فوکوس خودکار</td><td>یک ویژگی بولی که نشان می دهد دکمه باید به طور خودکار در بارگذاری صفحه فوکوس دریافت کند.</td> </tr><tr><td>معلول</td><td>معلول</td><td>یک ویژگی بولی است که نشان می دهد دکمه باید غیرفعال شود (برای تعامل با کاربر در دسترس نیست).</td> </tr><tr><td> </td><td>form_id</td><td>شکل (عنصر <form>) که دکمه متعلق به آن است. مقدار باید شناسه فرم () در همان سند باشد.</td> </tr><tr><td> </td><td>آدرس اینترنتی</td><td>نشانی اینترنتی فایلی را مشخص می کند که اطلاعات ورودی را پس از ارسال فرم پردازش (کنترل) کند (فقط برای <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td><span>برنامه / x-www-form-urlencoded <br>چند بخشی / فرم-داده <br>متن / ساده</span> </td><td>تعیین می کند که چگونه داده های فرم باید هنگام ارسال به سرور رمزگذاری شوند (فقط برای <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td>گرفتن <br>پست</td><td>تعیین می کند که از کدام روش HTTP هنگام ارسال داده های فرم (فقط برای <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td>formnovalidate</td><td>نشان می دهد که داده های وارد شده توسط کاربر در فرم از نظر صحت بررسی نمی شود (فقط برای <button <span>type = "submit"></span>). </td> </tr><tr><td> </td><td><span>_جای خالی <br>_خود <br>_والدین <br>_بالا <br>نام قاب</span> </td><td>به مرورگر می‌گوید که پاسخ دریافتی را پس از ارسال فرم (برگه، پنجره فعلی یا فریم) کجا نشان دهد. پیش فرض _self است - پاسخ را در پنجره فعلی نمایش می دهد. فقط برای <button <span>type = "submit"></span>. </td> </tr><tr><td>نام</td><td>نام</td><td>نام دکمه ای را که هنگام ارسال فرم ارسال می شود، مشخص می کند.</td> </tr><tr><td>نوع</td><td>دکمه <br>تنظیم مجدد <br>ارسال</td><td>نوع دکمه را نشان می دهد. <b>مقدار پیش فرض <b>ارسال.</b> </b> </td> </tr><tr><td>مقدار</td><td>متن</td><td>مقدار اولیه دکمه را مشخص می کند.</td> </tr></table><h2>مثال استفاده</h2> <span><!DOCTYPE html> <html> <head> <title> </span>برچسب بزنید <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span>دکمه 1 <span></b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px" > <img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;" > <i> </span>دکمه 3 <span></i> </button><br><br> </body> </html> </span> <p>در این مثال قرار داده ایم <i>3 دکمه</i>، که نام های منحصر به فردی با ویژگی name داده شد و با استفاده از سبک های CSS داخلی، عرض ( <i>عرض</i>) اندازه 80 پیکسل و ارتفاع ( <i>ارتفاع</i>) با اندازه 50 پیکسل:</p> <ul><li>متن داخل <i>دکمه اول</i>ما آن را به صورت پررنگ (برچسب <b>). <b>لطفا توجه داشته باشید که متنی که داخل تگ قرار می دهیم روی خود دکمه نمایش داده می شود.</b></li> <li>داخل <i>دکمه دوم</i>عنصر <img>قرار دادیم <i>* png</i>تصویر (با پس زمینه شفاف). با ویژگی alt یک متن جایگزین برای تصویر قرار می دهیم، در صورتی که به دلایلی بارگذاری نشود (ویژگی الزامی)، مسیر نسبی تصویر را با ویژگی src (ویژگی مورد نیاز)، عرض (عرض) و ویژگی های height (height) ابعاد تصویر را 40 در 40 پیکسل تعیین می کند. لطفاً توجه داشته باشید که در ویژگی‌هایی که اندازه را تعیین می‌کنند، برخلاف سبک‌های CSS، نیازی به تعیین واحدهای اندازه‌گیری ندارید، به این دلیل که ویژگی‌ها فقط می‌توانند مقدار را به پیکسل مشخص کنند.</li> <li>متن داخل <i>دکمه سوم</i>ما به صورت ایتالیک (برچسب <i>).</li> </ul><p>نتیجه مثال ما:</p> <p>مثال زیر استفاده از ویژگی هایی را نشان می دهد که اجازه می دهد داده های وارد شده توسط کاربر را از نظر صحت بررسی نکند و به مرورگر بگوید که پاسخ دریافتی پس از ارسال فرم را کجا نشان دهد.</p> <span><!DOCTYPE html> <html> <head> </span> <title>با استفاده از ویژگی های تگ formnovalidate و formtarget HTML <button><span></title> </head> <body> <form id = "myForm" > </span> <input <span>type = "text" name = "ulogin" placeholder = "(! LANG: نام شما" >!} <br> <span> </span> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "سوال شما" ></textarea><br> <button formtarget = _blank formnovalidate > </span>ارسال <span></button> <span> </span> </form> </body> </html> </span> <p>در این مثال در داخل فرم دو عنصر ایجاد کرده ایم</p> <p>دستورالعمل ها</p> <p>با استفاده از توصیفگر <input>دکمه ای به نام نام و مقدار را به صفحه اضافه می کند. ویژگی name به عنصر یک شناسه منحصر به فرد می دهد و توسط پردازشگر فرم برای تعیین مقدار آن استفاده می شود. مقدار متن مورد نیاز را در بالا قرار می دهد. به عنوان مثال، برای ایجاد یک دکمه، کد زیر را بنویسید:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>این دستور یک دکمه به نام دکمه ایجاد می کند که روی آن نوشته شده است "Submit".</p> <p>توصیفگر <button>مشابه ایجاد می کند <input>عنصر، با این حال، گزینه های اضافی زیادی را برای استفاده ارائه می دهد که ممکن است یک توسعه دهنده وب به آن نیاز داشته باشد. بنابراین، تمام شد <button>می توانید یک جدول یا تصویر، متن غنی یا یک لیست را پوشش دهید. برای مثال:</p><p><button form = “id формы” formaction = “адрес” formmethod = “метод пересылки данных” name = “имя” type = “тип” value = “значение”><img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy loading=lazy><b>متن</b></button></p> <p>ویژگی form مشخص کننده فرمی است که برای پردازش داده ها استفاده می شود. Formaction یک کنترل کننده فرم را در قسمت دیگری از سند، فایل دیگر یا یک سایت تنظیم می کند. Formmethod وظیفه تعریف روش انتقال داده ها را بر عهده دارد. نام، نام دکمه، نوع - نوع (معمولی، برای ارسال داده یا پاک کردن فرم) را مشخص می کند. مقدار - مقداری که توسط اسکریپت ها خوانده می شود. این دکمه تصویری را با آدرس و متن مشخص شده نمایش می دهد.</p> <p>برای ایجاد دکمه ای که داده های وارد شده را پردازش می کند، باید نوع مناسب را در ویژگی مشخص کنید:</p><p><input type = “submit”></p><p>برای ایجاد دکمه ای که ورودی کاربر را پاک می کند، نوع = "تنظیم مجدد" را تنظیم کنید.</p> <p>توجه داشته باشید</p> <p>توصیفگر <input>لزوما باید به عنوان محتوای تگ استفاده شود <form>... دکمه <button>می تواند خارج از فرم نمایش داده شود، اما برای پردازش داده ها و انجام یک عمل خاص، باید بین آنها نیز محصور شود. <form></form>.</p> <p>برای سازماندهی تعامل سایت با بازدیدکننده در صفحات آن، لازم است فرصت هایی برای ورود اطلاعات و ارسال آن به سرور فراهم شود. برای این منظور مجموعه خاصی از تگ ها در زبان توضیحات صفحه وب HTML (HyperText Markup Language) ارائه شده است. این تگ ها چیست و چگونه با استفاده از آنها یک صفحه وب ایجاد می کنیم <b>شکل</b>برای پر کردن توسط یک بازدید کننده؟</p> <p>شما نیاز خواهید داشت</p> <ul><li>دانش اولیه HTML</li> </ul><p>دستورالعمل ها</p> <p>تگ های HTML که به مرورگر می گوید در این نقطه از صفحه نمایش داده شود <b>شکل</b>و عناصر آن در کد بین تگ افتتاحیه قرار می گیرد<.form>و بسته شدن<./form>... تگ باز باید حاوی اطلاعات مورد نیاز باشد - ویژگی هایی که می گوید دقیقاً اطلاعات فرم باید کجا ارسال شود و از چه روشی برای انجام آن استفاده شود. علاوه بر این، اگر صفحه حاوی بیش از یک فرم باشد، هر کدام باید نام خود را داشته باشند. با در نظر گرفتن همه اینها، تگ افتتاحیه ممکن است به شکل زیر باشد: <form name="thisFormName" method="POST" action=">در اینجا ویژگی "name" نام فرم است، ویژگی "method" روش ارسال را تعیین می کند (روش های POST یا GET ممکن است) و ویژگی "action" باید نشانی اینترنتی اسکریپت روی سروری را نشان دهد که به آن داده های فرم باید ارسال شود. اگر آدرس مشخص نشده باشد، داده ها به URL همان صفحه منتقل می شود. به عنوان یک قاعده، چنین صفحات تعاملی توسط اسکریپت های جهانی تشکیل می شوند که داده ها را از همان صفحه ارائه و دریافت / پردازش می کنند.</p> <p>بعد از تگ افتتاحیه فرم باید عناصر فرم را قرار دهیم که برای ورودی کاربر از نوع داده مورد نظر مناسب تر است. چنین عناصری می توانند عبارتند از: فیلد ورودی متن: <input name="textField" type="text" value="این یک جعبه متن است" />در اینجا، مانند سایر تگ‌های «ورودی»، ویژگی «type» نوع عنصر را تعیین می‌کند، «name» نامی است که همراه با داده‌های وارد شده در این فیلد ارسال می‌شود و «value» مقدار پیش‌فرض است. که پر خواهد شد. فیلد ورودی تست. --رشته : <input name="passField" type="password" />- فیلد "علامت چک": <input name="checkBox" type="checkbox" value="1" checked="checked" />در اینجا ویژگی "checked" وجود دارد، که به طور پیش فرض چک باکس وجود دارد - گروهی از دکمه های رادیویی، که فقط باید یکی از آنها را انتخاب کنید: <input name="radioBox" type="radio" value="0" checked="checked" /><br><input name="radioBox" type="radio" value="1" />لطفا توجه داشته باشید - همه عناصر گروه باید یک نام (نام)، اما مقادیر (مقدار) متفاوت داشته باشند. فقط یک مقدار ارسال می شود - مقداری که بازدید کننده بررسی می کند یا آن چیزی که به طور پیش فرض انتخاب شده است (با ویژگی علامت زده شده). <select name="selectField"><br> <option value="ارزش 1">میدان یک</option><br> <option value="ارزش 2" selected="selected">فیلد دوم</option><br> <option value="ارزش 3">میدان سوم</option><br></select>در اینجا هر تگ "گزینه" در یک لیست کشویی قرار دارد. همانند گروه دکمه های رادیویی، تنها یک مقدار از فیلد انتخاب شده توسط بازدیدکننده، یا به صورت پیش فرض انتخاب می شود (در اینجا - با ویژگی انتخاب شده). <textarea name="textRows" cols="50" rows="5">اینجا چند خطی</textarea>ویژگی های "cols" و "rows" عرض (بر حسب نویسه) و ارتفاع (در ردیف) قسمت ورودی متن را تنظیم می کنند - فیلد پنهان: <input name="hiddenField" type="hidden" value="میدان پنهان" />این فیلد برای پر قابل مشاهده نخواهد بود <b>شکل</b>، اما به همراه بقیه داده ها ارسال می شود - فیلد انتخاب فایل برای ارسال: <input name="fileField" type="file" />ارسال یک فایل مستلزم باز شدن است <b>شکل</b>برچسب دارای ویژگی های اضافی بود. حداقل باید تگ "enctype" را اضافه کنید. به عنوان مثال، مانند این: <form name="thisFormName" method="POST" enctype="multipart/form-data" action=">--علاوه بر این در <b>شکل</b>می توانید دکمه هایی را قرار دهید - برای پاک کردن دکمه های وارد شده <b>شکل</b>داده ها: <input name="resetButton" type="reset" value="پاک کردن" />و برای ارسال فرم تکمیل شده به سرور: <input name="submitButton" type="submit" value="ارسال" />مقدار مشخص شده در ویژگی "value" برای دکمه ها، برچسب روی خود دکمه است.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">مقالات مرتبط برتر</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/odin-iz-glavnyh-priznakov-vzloma-kompyutera-kak-opredelit-chto.html"> <div class="img_container"><img src="/uploads/76867071226cb3b7967da54b4b9e5f9b.jpg" border="0" alt="چگونه بفهمیم کامپیوتر شما هک شده است؟" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">چگونه بفهمیم کامپیوتر شما هک شده است؟</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/kak-otkalibrovat-i-nastroit-monitor-v-domashnih-usloviyah-kalibrovka.html"> <div class="img_container"><img src="/uploads/f5dd0761393cfad70766137078d4928b.jpg" border="0" alt="چگونه مانیتور خود را در خانه کالیبره و تنظیم کنید" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">چگونه مانیتور خود را در خانه کالیبره و تنظیم کنید</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/kalibrovka-ekrana-kak-otkalibrovat-svoi-monitor-na-windows-ili.html"> <div class="img_container"><img src="/uploads/fae86757c8fdd585ebf5395742578324.jpg" border="0" alt="چگونه مانیتور خود را در ویندوز یا مک کالیبره کنیم" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">چگونه مانیتور خود را در ویندوز یا مک کالیبره کنیم</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">دسته بندی ها:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li> <li class=""><a href="https://bumotors.ru/fa/category/safety/">ایمنی</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li> <li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li> <li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li> <li class=""><a href="https://bumotors.ru/fa/category/errors/">خطاها</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2021 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی</span> </div> </div> </div> </div> </body> </html>