نحوه ایجاد فرم ثبت نام html با ماهیچه. فرم های CSS مثال: استفاده از دکمه های رادیویی

ما لیستی از 60 فرم ورود رایگان را گردآوری کرده ایم که می توانید در سایت وردپرس، وبلاگ، انجمن و غیره خود استفاده کنید. هر فرم به طور کامل آزمایش می شود تا مطمئن شود که کار می کند و کد منبع در دسترس است.

سفارشی ساز ورود به وردپرس

فرم های این لیست با استفاده از با استفاده از HTML/CSS. اما در این مورد ما در مورد O بهترین افزونهبرای تنظیمات رابط کاربریوردپرس. دارای چندین قالب است که می‌توان آن‌ها را متناسب با طراحی وب‌سایت شما سفارشی کرد. با این افزونه می توانید از شر صفحه ورود خسته کننده وردپرس خلاص شوید.

فرم ورود خلاق

یک فرم ورود ساده اما خلاقانه که با استفاده از HTML و CSS3 ایجاد شده است. همچنین می توان از آن به عنوان فرم ثبت نام استفاده کرد. این الگوی مورد علاقه ما از این لیست است.

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

فرم مجوز شماره 1

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

دانلود

پیش نمایش

فرم مجوز شماره 2

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

دانلود

پیش نمایش

فرم مجوز شماره 3

صفحه ورود با تصویر پس زمینه، سایه و افکت شناور برای دکمه ورود به سیستم.

دانلود

پیش نمایش

فرم مجوز شماره 4

می توانید این فرم وب را دانلود کرده و به دلخواه از آن استفاده کنید. کاملا تطبیقی ​​است.

دانلود

پیش نمایش

فرم مجوز شماره 5

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

دانلود

پیش نمایش

فرم مجوز شماره 6

اگر صفحه وب مرتب و زیبا است، فرم ورود نباید با طراحی آن متفاوت باشد. در اینجا فرمی وجود دارد که قطعاً انتظارات شما را برآورده می کند.

دانلود

پیش نمایش

فرم مجوز شماره 7

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

دانلود

پیش نمایش

فرم مجوز شماره 8

یکی دیگر از مدرن، مد روز و شکل زیباوارد شدن. به خصوص در دستگاه های تلفن همراه خوب به نظر می رسد.

دانلود

پیش نمایش

فرم مجوز شماره 9

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

دانلود

پیش نمایش

فرم مجوز شماره 10

این کاملا برعکس گزینه قبلی است. به نظر مینیمالیست، اما در عین حال بسیار شسته و رفته است.

دانلود

پیش نمایش

فرم مجوز شماره 11

به جای ایجاد یک فرم از ابتدا، می توانید از یک قالب آماده برای استفاده عالی مانند این استفاده کنید.

دانلود

پیش نمایش

فرم مجوز شماره 12

تصویر پس‌زمینه با پوشش سایه آبی، نامی با آواتار و فیلدهای ورودی، فرم مجوز شماره 12 است. یک افکت شناور به دکمه ورود اضافه شد.

دانلود

پیش نمایش

فرم مجوز شماره 13

یک الگوی تقسیم صفحه که یک نیمه برای تصویر و نیم دیگر برای شکل است.

دانلود

پیش نمایش

فرم مجوز شماره 14

این مجموعه شامل فرم های ورود ساده و پیچیده تر است. و قالب شماره 14 یکی از مینیمالیستی هاست.

دانلود

پیش نمایش

فرم مجوز شماره 15

یک شکل کاملا مینیمالیستی است، اما می توانید یک بنر در بالا اضافه کنید. به لطف این گزینه کوچک می توانید فرم را جذاب تر کنید.

دانلود

پیش نمایش

فرم مجوز شماره 16

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

دانلود

پیش نمایش

فرم مجوز شماره 17

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

دانلود

پیش نمایش

فرم مجوز شماره 18

دانلود

پیش نمایش

فرم مجوز شماره 19

پر جنب و جوش، پرانرژی و هیجان انگیز - این همان چیزی است که این فرم ورودی درباره آن است. این کاملا سازگار است، بهینه شده است دستگاه های تلفن همراهو با تمام مرورگرهای وب اصلی سازگار است.

دانلود

پیش نمایش

فرم مجوز شماره 20

پس‌زمینه گرادیان، دکمه سیاه با افکت شناور، فیلدهایی برای وارد کردن ورود و رمز عبور، و همچنین بخش «رمز عبور خود را فراموش کرده‌اید؟» همه اینها در فرم مجوز شماره 20 است.

دانلود

پیش نمایش

فرم لاگین کشویی

دانلود

فرم ثبت نام شناور

برای فرم های اشتراک با استفاده از برگه ها و برچسب ها طراحی شده است.

دانلود

فرم مجوز ساده

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

دانلود

ورود به سیستم - فرم ثبت نام

هنگامی که روی دکمه “Click me” واقع در گوشه سمت راست بالا کلیک می کنید، فرم ورود از طریق انیمیشن به فرم ثبت نام تبدیل می شود.

دانلود

با فرم SCSS خودکفا وارد شوید

این فرمی است که با استفاده از SCSS ایجاد شده است. یک برنامه افزودنی CSS که عملکرد و ظرافت جدیدی را به زبان پایه اضافه می کند. این به شما امکان می دهد از متغیرها، قوانین تودرتو، واردات درون خطی و موارد دیگر استفاده کنید.

دانلود

فرم ورود متحرک

این یک فرم ورود به سیستم متحرک است، و قسمت بالایی "Hey you, Login قبلا" با کلیک روی دکمه به فرم تبدیل می شود.

دانلود

فرم ورود با استفاده از CSS3 و HTML5

نمونه ای از نحوه ایجاد یک فرم ورود ساده با استفاده از HTML5 و CSS3. از عناصر شبه (:after و :before) برای ایجاد افکت چندین صفحه استفاده می کند. این فرم از HTML5 برای ساده سازی اعتبارسنجی و ارائه داده ها استفاده می کند.

دانلود

با اثر لرزش وارد شوید

اگر وارد شدی رمز عبور اشتباه، با استفاده از این موضوع به شما اطلاع داده خواهد شد جلوه زیبالرزش یک راه حل ساده و موثر.

دانلود

فرم ورود باکسی

تگ های HTML که فرم های HTML را در سایت تعریف می کنند

ما وب سایت ایجاد می کنیم و صفحات منفرددر اینترنتبرای ارتباط با بازدیدکنندگان

فرم های HTMLبرای ثبت نام بازدیدکنندگان در سایت، نظرسنجی های تعاملی و رای گیری، امکان ارسال پیام، خرید و غیره استفاده می شود. HTMLاین فرم برای یک هدف ایجاد شده است: جمع آوری و متعاقباً انتقال اطلاعات برای پردازش توسط یک اسکریپت نرم افزاری یا از طریق ایمیل.

نمونه فرم HTML | وارد سایت شوید

برچسب ها، ویژگی ها و ارزش ها

• - شکل را تعیین کنید.
• name="" - نام فرم را مشخص می کند.
• method="" - روش ارسال داده ها را از فرم تعریف می کند. مقادیر: "get" (پیش فرض) و "post". روش "پست" اغلب مورد استفاده قرار می گیرد، زیرا امکان انتقال حجم زیادی از داده ها را فراهم می کند.
• action="" - نشانی اینترنتی که داده ها برای پردازش در آن ارسال می شوند را مشخص می کند. در مورد ما - enter_data.php ..
• - عناصر فرم را مانند دکمه ها، سوئیچ ها، فیلدهای متنی برای ورود داده ها تعریف کنید.
• type="text" - یک فیلد متنی برای ورود داده ها تعریف می کند.
• type="password" - فیلدی را برای وارد کردن رمز عبور تعریف می کند که متن آن به شکل ستاره یا دایره نمایش داده می شود.
• type="checkbox" - یک دکمه رادیویی را تعریف می کند.
• type="hidden" - یک عنصر فرم پنهان را تعریف می کند - که برای انتقال استفاده می شود اطلاعات اضافیبه سرور
• size="25" - طول فیلد متن به کاراکتر.
• maxlength="30" - حداکثر تعداد مجاز کاراکترهای وارد شده.
• value="" - مقداری را تعیین می کند که برای پردازش ارسال می شود اگر مربوط به دکمه های رادیویی یا سوئیچ ها باشد. مقدار این ویژگی به عنوان بخشی از یک فیلد متنی یا دکمه به عنوان مثال، Vasya یا Login در مثال بالا نشان داده خواهد شد.

نمونه فرم HTML | نظرات در سایت

برچسب ها، ویژگی ها و ارزش ها

• action="http://site/comments.php" - نشانی اینترنتی را که داده های فرم به آن ارسال می شود را مشخص می کند.
• id="" - نام و شناسه عنصر فرم را تعریف می کند.
• name="" - نام عنصر فرم را مشخص می کند.
• - یک فیلد متنی را به عنوان بخشی از فرم تعریف کنید.
• cols="" - تعداد ستون های فیلد متن فرم را تعیین می کند.
• rows="" - تعداد ردیف های فیلد متن فرم را مشخص می کند.

اگر بین متن را جای دهید، در داخل فیلد به عنوان نمونه نشان داده می شود که به راحتی قابل حذف است.

نمونه فرم HTML | لیست کشویی

برچسب ها، ویژگی ها و ارزش ها

• - لیستی با موقعیت هایی برای انتخاب تعریف کنید.
• size="" - تعداد موقعیت های قابل مشاهده لیست را تعیین می کند. اگر مقدار 1 باشد، با یک لیست کشویی روبرو هستیم.
• - تعیین موقعیت (اقلام) لیست.
• value="" - حاوی مقداری است که توسط فرم برای پردازش به url مشخص شده ارسال می شود.
• select="selected" - یک آیتم لیست را به عنوان نمونه برجسته می کند.

نمونه فرم HTML | فهرست با نوار پیمایش

با افزایش مقدار مشخصه size=""، لیستی با نوار اسکرول دریافت می کنیم:

برای این گزینه از پرچم multiple="multiple" استفاده کنید که امکان انتخاب چندین موقعیت را فراهم می کند. عدم وجود آن به شما امکان می دهد فقط یک مورد را انتخاب کنید.

به ادامه مطلب مراجعه کنید:

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

هیچ چیز سختی در مورد ایجاد فرم های HTML وجود ندارد. ساده ترین راه برای دریافت ایده از فرم ها این است که کمی کد HTML را تجزیه کنید و سپس ببینید که چگونه کار می کند. مثال زیر سینتکس ایجاد یک فرم ساده HTML را نشان می دهد:

مثال: فرم ساده HTML

• خودت آن را امتحان کن "

اولین فرم من:
نام:
نام خانوادگی:

عنصر

فرم ها با استفاده از عنصر در صفحات وب درج می شوند . این یک محفظه برای تمام محتوای فرم، از جمله عناصری مانند فیلدهای متنی و دکمه ها، و همچنین سایر تگ های HTML فراهم می کند. با این حال، نمی تواند حاوی عنصر دیگری باشد .
برای ارسال فرم به سرور، از دکمه "ارسال" استفاده کنید، در صورتی که کلید "Enter" را در داخل فرم فشار دهید، نتیجه مشابه خواهد بود. اگر دکمه "ارسال" در فرم وجود ندارد، می توان از کلید "Enter" برای ارسال استفاده کرد.
اکثر ویژگی های عنصر بر پردازش فرم تأثیر می گذارد، نه طراحی آن. که رایج ترین آنها هستند عملو روش. صفت عملحاوی URL است که اطلاعات فرم برای پردازش توسط سرور به آن ارسال می شود. صفت روشروش HTTP است که مرورگرها باید برای ارسال داده های فرم از آن استفاده کنند.

عنصر

تقریباً تمام فیلدهای فرم با استفاده از عنصر ایجاد می شوند (از ورودی انگلیسی - ورودی). ظاهرعنصر بسته به مقدار ویژگی آن تغییر می کند نوع:

در اینجا برخی از مقادیر ویژگی وجود دارد نوع:

وارد کردن متن و رمز عبور

یکی از مهمترین انواع سادهعناصر فرم یک فیلد متنی است که برای وارد کردن متن از یک خط طراحی شده است. این نوعورودی متن به‌طور پیش‌فرض تنظیم شده است، و بنابراین اگر فراموش کنید مشخصه را مشخص کنید، فیلد یک خطی نمایش داده می‌شود. نوع. برای افزودن یک فیلد ورودی متن تک خطی به فرم، باید عنصر را داخل آن قرار دهید ویژگی را ثبت کنید نوعبا مقدار متن:

فیلد ورودی رمز یک نوع فیلد متنی معمولی است. از همان ویژگی های یک فیلد متنی تک خطی پشتیبانی می کند. صفت نامنام فیلد ورود رمز عبور را تعیین می کند که به همراه رمز عبور وارد شده توسط کاربر به سرور ارسال می شود. برای ایجاد یک فیلد رمز عبور، باید ویژگی رمز عبور را تنظیم کنید نوع(رمز عبور (انگلیسی) - رمز عبور):

نمونه ای از ایجاد فرم با فیلد رمز عبور:

مثال: قسمت رمز عبور

• خودت آن را امتحان کن "

ورود شما:

کلمه عبور:

ورود شما:

کلمه عبور:

شما می توانید ویژگی را در ارتباط با این ویژگی استفاده کنید حداکثر طول، که مقدار آن تعیین کننده حداکثر تعداد کاراکترهایی است که می توان وارد کرد این خط. همچنین می توانید طول فیلد ورودی را با استفاده از ویژگی تنظیم کنید اندازه. به طور پیش فرض، بیشتر مرورگرها عرض یک فیلد متنی را به 20 کاراکتر محدود می کنند. برای کنترل عرض عناصر فرم جدید، به جای یک ویژگی اندازه، توصیه می کنیم از Cascading Style Sheets (CSS) استفاده کنید.
صفت ارزشمقداری را مشخص می کند که به طور پیش فرض در قسمت متن در هنگام بارگیری فرم نمایش داده می شود. با وارد کردن مقدار پیش‌فرض در فیلد، می‌توانید به کاربر توضیح دهید که دقیقاً چه داده‌هایی و با چه فرمتی می‌خواهید کاربر در اینجا وارد کند. این مانند یک نمونه است، زیرا کاربر با دیدن نمونه ای در مقابل خود، پر کردن فرم را بسیار راحت تر می کند.

سوئیچ ها (رادیو)

عنصر نوع رادیوسوئیچ هایی ایجاد می کند که از اصل منطقی "OR" استفاده می کنند و به شما امکان می دهد فقط یکی از چندین مقدار را انتخاب کنید: اگر یک موقعیت را انتخاب کنید، بقیه غیرفعال می شوند. نحو اصلی یک عنصر ضامن عبارت است از:

صفت نامبرای سوئیچ ها مورد نیاز است و نقش مهمی در ترکیب چندین عنصر سوئیچ در یک گروه ایفا می کند. برای ترکیب دکمه‌های رادیویی در یک گروه، باید همان مقدار مشخصه را تنظیم کنید نامو مقدار مشخصه های مختلف ارزش. صفت ارزشمقدار دکمه رادیویی انتخاب شده را برای ارسال به سرور تنظیم می کند. مقدار هر عنصر دکمه رادیویی باید در گروه منحصر به فرد باشد تا سرور بداند کاربر کدام گزینه پاسخ را انتخاب کرده است.
حضور صفت بررسی شد(از انگلیسی - نصب شده) در عنصر سوئیچ نشان می دهد که در صورت لزوم، هنگام بارگیری صفحه، کدام یک از گزینه های پیشنهادی باید به طور پیش فرض انتخاب شوند. این ویژگی را می توان فقط برای یک عنصر دکمه رادیویی از گروه تنظیم کرد:

• خودت آن را امتحان کن "

شما چند سال دارید؟

1. زیر 18
2. از ساعت 18 تا 24
3. از 25 تا 35
4. بیش از 35

صفت عمل.

اصلی برای عنصر

فایل پردازش روی سرور قرار دارد mytestserver.comدر پوشه پوشه نامو نام اسکریپت سروری که داده ها را پردازش می کند - obrabotchik.php. تمام داده هایی که در فرم در صفحه وب وارد کرده اید به او منتقل می شود. پسوند php نشان می دهد که فرم مشخص شده توسط یک اسکریپت نوشته شده در PHP پردازش می شود. خود handler می تواند به زبان دیگری نوشته شود، به عنوان مثال می تواند زبان برنامه نویسی Python، Ruby و غیره باشد.
توصیه می شود همیشه مقدار ویژگی را تنظیم کنید عمل. اگر فرم باید مقادیر را به همان صفحه ای که در آن قرار دارد ارسال کند، یک رشته خالی به عنوان مقدار مشخصه action ارائه دهید: action="".

ویژگی روش

صفت روشنحوه انتقال اطلاعات به سرور را مشخص می کند. روش ارسال فرمی که انتخاب می کنید به داده هایی که می خواهید همراه با فرم ارسال کنید بستگی دارد. حجم این داده ها در اینجا نقش اصلی را ایفا می کند. محبوب ترین دو روش برای انتقال داده های منبع فرم شما از مرورگر به سرور است: گرفتنو پست. این روش را می توان روی هر کدام که انتخاب کردید تنظیم کرد و اگر آن را مشخص نکنید، از حالت پیش فرض استفاده می شود گرفتن. بیایید استفاده از هر یک از آنها را در نظر بگیریم.

روش POST

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

روش GET

همانطور که می دانید، وظیفه اصلی مرورگر دریافت صفحات وب از سرور است. بنابراین وقتی از روش استفاده می کنید گرفتن، مرورگر شما به سادگی صفحه وب را مانند همیشه بازیابی می کند. روش گرفتنهمچنین داده های فرم را بسته بندی می کند، اما قبل از ارسال درخواست به سرور، آن را به انتهای URL اضافه می کند. برای درک نحوه عملکرد روش گرفتن، بیایید آن را در عمل ببینیم. اولین مثال از این درس (مثال: فرم HTML ساده) را در Notepad باز کنید (به عنوان مثال Notepad++) و یک تغییر کوچک در کد HTML ایجاد کنید:

آن ها جایگزین کردن پستبر گرفتن.
فایل را با نام ذخیره کنید file_name.htmlو صفحه مرورگر (F5) را رفرش کنید، سپس فرم را برای مثال پر کنید واسیا پوپکینو روی دکمه «ارسال» کلیک کنید. در نوار آدرس مرورگر خود چیزی شبیه به زیر را خواهید دید:

File_name.html?firstname=Vasya&lastname=Pupkin

اکنون می توانید نام هر عنصر فرم و همچنین مقدار آن را در اینجا در URL مشاهده کنید.
URL با علامت سوال از بقیه داده های فرم جدا می شود و نام ها و مقادیر متغیرها با علامت علامت جدا می شوند. (&) .
اگر حجم زیادی از اطلاعات را منتقل نمی کنید، باید از این روش استفاده کنید.
اگر داده های فرم شما حساس باشد، مانند ذخیره شماره کارت بانکی یا رمز عبور، این روش کار نخواهد کرد.
علاوه بر این، روش گرفتناگر بخواهید فایل ها را به همراه فرم به سرور ارسال کنید نامناسب است.

گروه بندی عناصر فرم

عناصر فرم که از نظر معنی به هم مرتبط هستند را می توان بین برچسب ها گروه بندی کرد

و

. مرورگر نمایش داده خواهد شد

به شکل یک قاب در اطراف گروهی از عناصر فرم. ظاهر قاب را می توان با استفاده از Cascading Style Sheets (CSS) تغییر داد.
برای افزودن عنوان برای هر گروه، به یک عنصر نیاز دارید

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

... محتویات فرم ...

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

ویژگی های فرم:

• ویژگی action یک فایل سرور با یک اسکریپت مسئول پردازش اصلی داده های ارسال شده از فرم را مشخص می کند. به طور معمول، کد این فایل در یک زبان برنامه نویسی سمت سرور نوشته می شود، به عنوان مثال، در phpیا پرل.
• مشخصه enctype نوع اطلاعات ارسال شده به سرور را نشان می دهد، اگر فقط داده متنی باشد - text/plain، اگر فایل ها با فرم ارسال می شوند، باید multipart/form-data را مشخص کنید.
• ویژگی متد شکل انتقال داده را مشخص و تعریف می کند. در این مورد به تفصیل نمی پردازیم، اما باید گفت که برای انتقال مطمئن تر، باید روش پست مشخص شود.

عناصر فرم HTML

<نوع ورودی = "متن" نام = "ورود" اندازه = "20" مقدار = "Login" maxlength = "25" > !}

نتیجه:

• مقدار ویژگی type - text - نشان می دهد که این یک فیلد متنی است
• اندازه - اندازه فیلد متن به کاراکتر
• maxlength - حداکثر تعداد کاراکترهایی که می توانند در فیلد قرار بگیرند
• مقدار - متن اولیه در قسمت متن
• نام - نام عنصر، برای پردازش داده ها در فایل کنترل کننده لازم است

نتیجه:


به جای متن، یک ماسک در قسمت نمایش داده می شود - ستاره ها یا دایره ها

<نوع ورودی = مقدار "ارسال" = "ارسال داده ها">

نتیجه:

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

<نوع ورودی = "تنظیم مجدد" مقدار = "فرم را پاک کنید" > !}

نتیجه:

دکمه وضعیت همه کنترل ها را به حالت اولیه باز می گرداند (فرم را پاک می کند)

<نوع ورودی = "چک باکس" نام = "asp" مقدار = " بله" > !} A.S.P.<br> <نوع ورودی = "چک باکس" نام = "js" مقدار = " بله" checked = "checked" > !}جاوا اسکریپت<br> <نوع ورودی = "چک باکس" نام = "php" مقدار = " بله" > !} PHP<br> <نوع ورودی = "چک باکس" نام = "html" مقدار = " بله" checked = "checked" > !} HTML<br>

A.S.P.
جاوا اسکریپت
PHP
HTML



نتیجه:

A.S.P.
جاوا اسکریپت
PHP
HTML

در html، یک چک باکس برای سازماندهی چندین انتخاب استفاده می شود، به عنوان مثال. در مواقعی که انتخاب چندین گزینه پاسخ ضروری و امکان پذیر است

<نوع ورودی = "رادیو" نام = "کتاب" مقدار = "asp" > !} A.S.P.<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "js" > !}جاوا اسکریپت<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "php" > !} PHP<br> <نوع ورودی = "رادیو" نام = "کتاب" مقدار = "html" checked = "checked" > !} HTML<br>

A.S.P.
جاوا اسکریپت
PHP
HTML




نتیجه:

A.S.P.
جاوا اسکریپت
PHP
HTML

دکمه رادیویی html برای یک انتخاب واحد از چندین گزینه استفاده می شود

ویژگی checked بلافاصله عنصر را علامت زده می کند

مهم:برای عناصر رادیولازم است که مقدار ویژگی نامهمه عناصر در گروه یکسان بودند: در این حالت، عناصر به هم پیوسته کار می کنند، زمانی که یک عنصر روشن است، بقیه خاموش می شوند.

لیست کشویی HTML

بیایید به مثالی از افزودن یک لیست کشویی نگاه کنیم:

1 2 3 4 5 6

<نام = "کتاب" اندازه = "1" > را انتخاب کنید <مقدار گزینه = "asp" > !} A.S.P.</option> <مقدار گزینه = "js" > !}جاوا اسکریپت</option> <مقدار گزینه = "php" > !} PHP</option> <مقدار گزینه = "html" selected = "selected" > !} HTML</option> </انتخاب>

A.S.P. جاوا اسکریپت PHP HTML

نتیجه:

• لیست کشویی شامل یک تگ اصلی - انتخاب - است که دارای یک جفت بسته است و هر آیتم لیست یک تگ گزینه است که متن مورد در داخل آن نمایش داده می شود.
• ویژگی اندازه با مقدار "1"نشان می دهد که لیست جمع شده یک مورد را نشان می دهد، بقیه با کلیک بر روی فلش منو باز می شوند
• ویژگی انتخاب شده یک آیتم (گزینه) نشان می دهد که این مورد خاص در ابتدا قابل مشاهده خواهد بود و موارد باقی مانده "جمع شده" هستند.

برای لیست های بزرگ و پیچیده یک گزینه وجود دارد عنوان های فرعی را اضافه کنید- تگ optgroup با ویژگی برچسب:

1 2 3 4 5 6 7 8 9 10 11 12

<نام = "کتاب" اندازه = "1" > را انتخاب کنید <optgroup label = "انگلیسی" > <مقدار گزینه = "asp" > !} A.S.P.</option> <مقدار گزینه = "js" > !}جاوا اسکریپت</option> <مقدار گزینه = "php" > !} PHP</option> <مقدار گزینه = "html" selected = "selected" > !} HTML</option> </optgroup> <optgroup label = "روس ها" > <مقدار گزینه = "asp_rus" > !} ASP در روسی</option> <مقدار گزینه = "js_rus" > !}جاوا اسکریپت به زبان روسی</option> </optgroup> </انتخاب>

A.S.P. جاوا اسکریپت PHP HTML ASP در روسی جاوا اسکریپت به زبان روسی

تا فرصت را فراهم کند انتخاب چندین مورد به طور همزمانشما باید ویژگی چندگانه را اضافه کنید. اما در این مورد، ویژگی size نیز باید روی مقداری بیشتر از 1 تنظیم شود:

متن

نتیجه:

• عرض عنصر به ویژگی cols بستگی دارد، که مشخص می کند چند کاراکتر به صورت افقی قرار می گیرند
• ویژگی rows تعداد ردیف های یک عنصر را مشخص می کند

عناصر دیگر

عناصر و ویژگی های اضافی

• برای کنترل ها رادیوو چک باکساستفاده از عناصر اضافی راحت است که اولاً متن را به رادیو یا خود عنصر چک باکس متصل می کند و ثانیاً هنگام کلیک کردن یک ضربه اضافه می کند:

<نوع ورودی = "چک باکس" id = "book1" > <label for = "book1" > A.S.P.</label>

A.S.P.

در مثال، یک کتیبه (برچسب برچسب) برای عنصر چک باکس ایجاد شده است. اتصال از طریق ویژگی id انجام می شود که مقدار آن در ویژگی for برچسب مشخص شده است.

نتیجه:



• ویژگی غیرفعال به شما امکان می دهد یک عنصر را قفل کنید و کاربر آن را غیرقابل تغییر کند:

<نوع ورودی = "متن" نام = "ورود" اندازه = "20" مقدار = "Login" maxlength = "25" disabled = "disabled" >!} <نوع ورودی = "چک باکس" نام = "asp" مقدار = " بله" > !} A.S.P.<br> <نوع ورودی = "چک باکس" نام = "js" مقدار = " بله" checked = "checked" disabled = "disabled" > !}جاوا اسکریپت<br>


A.S.P.
جاوا اسکریپت

تمام تعاملات - فیلدهای ورودی، چک باکس ها، دکمه های رادیویی، لیست های کشویی، دکمه ها - فرم های وب و عناصر آنها هستند. شما در فرم نظر می گذارید، با استفاده از فرم ثبت نام می کنید، از طریق فرم وارد می شوید، از فرم جستجو استفاده می کنید، در نظرسنجی ها رای می دهید، فایل ها را آپلود می کنید، مشترک می شوید - همه این کارها را با استفاده از فرم های وب انجام می دهید.

سازمان داخلی

در واقع فرم از دو بخش تشکیل شده است: طراحی بصری و اسکریپتی که داده های وارد شده را پردازش می کند. برای نوشتن یک اسکریپت باید یکی از زبان های برنامه نویسی را بدانید. ما در اینجا آنها را مطالعه نمی کنیم، بنابراین مؤلفه HTML را تجزیه و تحلیل می کنیم - یاد می گیریم که چگونه یک رابط فرم ایجاد کنید، با این فرض که در جایی از قبل یک اسکریپت داریم که آن را پردازش می کند.

یک فرم HTML با استفاده از یک تگ جفت ایجاد می شود

، که تگ های عناصر آن در داخل آن قرار دارد.

برچسب ها

قبل از نمایش نمونه ها، اجازه دهید از طریق برچسب ها بگذریم.

. یک فرم ایجاد می کند. اگر فرم را با جدول مقایسه کنید، تگ همان نقش تگ را ایفا می کند

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

• عمل. آدرس اسکریپت یا سندی که داده های فرم را پردازش می کند. مقدار URL است.
• روش. روشی برای انتقال داده ها به کنترل کننده می توانید GET (پیش فرض) یا POST را مشخص کنید. GET شامل ارسال داده به عنوان بخشی از URL است. ممکن است چیزی شبیه به?id=225 در آدرس ها دیده باشید. این است. روش POST متفاوت عمل می کند و بنابراین داده های ارسالی از کاربر پنهان می شود. ایمن تر است و به شما امکان می دهد اطلاعات بیشتری از جمله فایل ها را منتقل کنید. اما همه اینها بیشتر در مورد برنامه نویسی است تا نشانه گذاری HTML.
• پذیرش-مجموعه حروف. رمزگذاری را تنظیم می کند.
• تکمیل خودکار. پر کردن خودکار فرم‌ها را فعال می‌کند (روشن) یا غیرفعال (خاموش) می‌کند، جایی که خود مرورگر به شما می‌گوید بر اساس آنچه دفعه قبل تایپ کرده‌اید چه چیزی را وارد کنید. غیرفعال کردن عملکرد برای فرم های محرمانه منطقی است، به طوری که مرورگر ناخواسته داده های مهم را نشان نمی دهد.
• نام. نام فرم

ویژگی های دیگری نیز وجود دارد، اما آنها بسیار به ندرت استفاده می شوند.

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

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

معنی	شرح
	پرچم ها با کمک آنها می توانید چندین گزینه را همزمان انتخاب کنید
	دکمه انتخاب فایل
	فیلد پنهان، در مرورگر قابل مشاهده نیست
	دکمه با تصویر
	فیلد ورود رمز عبور یک فیلد متنی معمولی، اما کاراکترهایی که وارد می‌کنید در پشت ستاره‌ها (*) پنهان هستند.
	سوئیچ ها. تقریبا چک باکس، اما با کمک آنها می توانید تنها یکی از گزینه های پیشنهادی را انتخاب کنید
	دکمه بازنشانی داده های فرم به مقادیر اصلی
	دکمه ارسال اطلاعات به سرور معمولاً آنها را برای تأیید ورودی فشار می دهید - ذخیره، اعمال، OK
	فیلد متنی

بسیاری از مقادیر جدید در HTML5 ظاهر شده اند، اما، متأسفانه، تا کنون (ژوئن 2016) فقط تا حدی پشتیبانی می شوند.

• فوکوس خودکار. فوکوس ورودی به طور پیش‌فرض روی عنصری که این ویژگی برای آن مشخص شده است تنظیم می‌شود.
• بررسی شد. چک باکس پیش فرض یا دکمه رادیویی را تنظیم کنید.
• الگو. با استفاده از این ویژگی می توانید کاربر را مجبور کنید که داده ها را در قالب خاصی وارد کند. به عنوان مثال، فقط یک عدد از 0 تا 9 یا فقط حروف الفبای لاتین را وارد کنید (باید آشنا باشد). تا زمانی که فیلد به درستی پر نشود، اطلاعات فرم برای پردازش ارسال نمی شود.
• نگهدارنده مکان. متن راهنمای ابزار را تنظیم می کند.
• . ظرفی که لیست با آن ایجاد می شود. این می تواند یک لیست کشویی یا یک لیست تک یا چند گزینه ای باشد. برچسب ها مسئول عناصر لیست هستند .
  اندازه. ویژگی اصلی که تعداد ردیف های لیست برای نمایش را مشخص می کند. به عنوان مثال، اگر مقدار 1 باشد، لیست یک لیست کشویی است؛ در غیر این صورت، نتیجه یا لیستی است که در آن همه عناصر بلافاصله قابل مشاهده هستند، یا لیستی که می توان عناصر را در آن با استفاده از نوار پیمایش پیمایش کرد.
  چندگانه. صفت بدون ارزش. آن را مشخص کنید تا یک لیست چند گزینه ای دریافت کنید.
  ضروری. لیست را برای انتخاب اجباری می کند، یعنی تا زمانی که کاربر مقداری را در آن تعیین نکند، فرم ارسال نمی شود. این اغلب با لیست جنسیت در فرم های ثبت نام انجام می شود.
  . برچسب مورد فهرست به صورت داخلی استفاده می شود
  .
• ارزش. مقدار مورد فهرستی که باید توسط اسکریپت پردازش شود.
• انتخاب شد. یک مورد با این ویژگی به طور پیش فرض برجسته می شود، گویی که کاربر آن را انتخاب کرده است.
• . یک کانتینر به شما امکان می دهد موارد لیست را گروه بندی کنید .
• معلول. گروه لیست را غیر قابل انتخاب می کند (اما آن را با رنگ دیگری نمایش می دهد).
• برچسب. متن عنوان گروه

فرم نمونه

اکنون که همه برچسب ها شناخته شده اند، اجازه دهید یک فرم مجوز کوچک ایجاد کنیم که داده های آن توسط فایل پردازش می شود. script.php، در پوشه ای با صفحه HTML قرار دارد.

کد به این صورت خواهد بود.

وارد شدن:

کلمه عبور:

تو کی هستی؟ مهمان مدیر

یاد آوردن

بیایید به برخی از قطعات آن نگاه کنیم.

- یک فرم پردازش شده توسط فایل script.php ایجاد کنید. داده ها با استفاده از روش GET منتقل می شوند.

< br> - برچسب انتقال به خط بعدی.

< ورودی نام=" وارد شدن" نوع=" متن" اندازه="25" بیشترین طول="30" ارزش"میخائیل">- یک فیلد متنی با نام ورود به سیستم با عرض 25 کاراکتر ایجاد کنید. ما Mikhail را به عنوان مقدار پیش فرض مشخص می کنیم تا کاربر بتواند بفهمد چه چیزی و چگونه باید وارد شود.

< ورودی نام=" عبور" نوع=" کلمه عبور" اندازه="25" بیشترین طول="30" ارزش=""> - ایجاد یک فیلد ورود رمز عبور (نمادها با ستاره جایگزین می شوند). عرض میدان - 25، حداکثر طولرمز عبور - 30 کاراکتر.

< انتخاب کنید>< گزینه ارزش=" ج1"> مهمانگزینه>< گزینه ارزش=" ج2"> مدیرگزینه>انتخاب کنید> - یک لیست کشویی ساده از دو مورد ایجاد کنید.

< ورودی نام=" صرفه جویی" نوع=" چک باکس" ارزش=" آره"> به خاطر بسپار- یک چک باکس اضافه کنید و متن توضیحی بنویسید.

< br>< ورودی نوع=" ارسال" نام=" وارد" ارزش"ورود">- یک دکمه ایجاد کنید، با کلیک کردن روی آن، فرآیند پردازش داده ها شروع می شود.

- فرم را ببندید

در مرورگر، فرم وب مانند تصویر زیر خواهد بود.

می توانید آن را پر کنید، اما برای شروع کار باید کد بنویسید و در یک فایل ذخیره کنید script.phpدر کنار صفحه HTML