ایجاد یک فرم html زیبا ایجاد فرم. مثال استفاده از فرم

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

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

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

فرم ورود خلاق

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

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

فرم مجوز №1

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

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

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

دانلود

پیش نمایش

فرم مجوز №11

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

دانلود

پیش نمایش

فرم مجوز شماره 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 استفاده می‌کند تا اعتبارسنجی و ارسال داده‌ها را آسان‌تر کند.

دانلود

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

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

دانلود

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

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

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

قبل از ارسال داده ها، مرورگر اطلاعات را در قالب یک جفت name=value آماده می کند، جایی که نام توسط ویژگی name تگ تعیین می شود. یا تگ دیگری که در فرم معتبر است و مقدار توسط کاربر وارد می شود یا در قسمت فرم پیش فرض تنظیم می شود. پس از کلیک کاربر بر روی دکمه ارسال، کنترل کننده فرم فراخوانی می شود که اطلاعات وارد شده در فرم را دریافت می کند و سپس آنچه را که توسعه دهنده فرض می کند با آن انجام می دهد. کنترل کننده فرم معمولاً برنامه ای است که توسط ویژگی عمل تگ مشخص می شود.

همچنین می‌توانید یک آدرس ایمیل را به‌عنوان مقدار مشخصه action، با شروع مشخص کنید کلمه کلیدی mailto: . وقتی فرم ارسال شد، اجرا می شود برنامه پستیبه طور پیش فرض تنظیم شده است. برای اهداف امنیتی، مرورگر تنظیم شده است که اطلاعات وارد شده در فرم را بطور محرمانه از طریق پست ارسال نکند. برای تفسیر صحیح داده ها، از ویژگی enctype با مقدار text/plain در تگ استفاده کنید

مرورگرها با چنین کدهایی به طور مبهم کار می کنند. فایرفاکس لیستی از برنامه های کاربردی مناسب برای ارسال نامه ارائه می دهد (شکل 1)، اینترنت اکسپلورراخطاری را نمایش می دهد (شکل 2) و تلاش می کند برنامه مرتبط با نامه را راه اندازی کند، Opera مانند فایرفاکس لیستی از گزینه های مناسب برای ارسال نامه را ارائه می دهد (شکل 3).

برنج. 1. راه اندازی برنامه در فایرفاکس

برنج. 2. هشدار اینترنت اکسپلورر

برنج. 3. انتخاب یک برنامه در Opera

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

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

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

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

ساختار ساده ترین فرم:

عناصر فرم ...

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

ساختار دکمه:

بنابراین، برای ثبت تقریباً تمام عناصر فرم، از تگ استفاده می شود با ویژگی type برای ایجاد دکمه ای که تمام داده ها را از فرم ها بازنشانی می کند، از ساختار زیر استفاده می شود:

برای ایجاد یک فیلد متنی (فیلد متنی) یک پارامتر متن وجود دارد. برای این کار از پارامترهای زیر استفاده می شود: name – field name; اندازه - برای فیلد در نمادها؛ maxlength - حداکثر تعداد کاراکترهای ممکن در فیلد. مقدار - اطلاعاتی که به طور پیش فرض در فرم نمایش داده می شود

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

نتیجه فرم در شکل نشان داده شده است.

در صورت نیاز به وارد کردن حجم زیادی از اطلاعات در یک فیلد متنی، به عنوان مثال، یک نظر، از فرم یک ناحیه متنی (textarea) استفاده می شود که با استفاده از تگ ایجاد می شود. با ویژگی های زیر: نام - نام منطقه; cols تعداد ستون های ناحیه است. ردیف - تعداد ردیف؛ بسته بندی - راهی برای بسته بندی سهام (روی - خطوط بسته بندی، خاموش - خطوط را بسته بندی نکنید).</p><p>بیایید یک قسمت متنی به کد بالا اضافه کنیم:</p><p>یک نظر: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

نتیجه کد با ناحیه متن در شکل نشان داده شده است.

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

برای اینکه عنصر در هنگام بارگذاری صفحه برجسته شود، در تگ ضروری است

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

ساختار چک باکس و ورودی دکمه رادیویی:

متن

دکمه رادیویی:

متن

در عناصر مشخص شده در ساختار، ویژگی checked به طور پیش فرض برای برجسته کردن کادر انتخاب و دکمه رادیویی استفاده می شود. نمونه ای از استفاده از چک باکس، دکمه رادیویی و همچنین کد HTML در شکل نشان داده شده است.

یکی دیگر از عناصر فرم یک دکمه است که با استفاده از ویژگی type تگ مشخص می شود. با مقدار دکمه:

در کد مشخص شده برای ایجاد یک دکمه، یک پارامتر onclick وجود دارد که به عنوان یک قاعده، کدی را در یک زبان برنامه نویسی مشخص می کند تا با کلیک روی این دکمه، اقدامی را انجام دهد:

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

برای درج یک تصویر در یک دکمه، از کد نشان داده شده در مثال زیر استفاده کنید:

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

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

عنصر فرم پنهان در پنجره مرورگر نامرئی خواهد بود.

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

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

فرم های HTML عناصر رابط پیچیده ای هستند. آنها شامل عناصر عملکردی مختلفی هستند: فیلدهای ورودی و ، لیست ها <select>، نکات و غیره تمام کدهای فرم در یک عنصر محصور شده است <form> .</p> <p>بیشتر اطلاعات در فرم های وب با استفاده از عنصر ارسال می شود. <input>. عنصر برای وارد کردن یک خط متن استفاده می شود. <input type="text">، برای چندین خط - عنصر <textarea>. عنصر <select>یک لیست کشویی ایجاد می کند.</p> <p>عنصر <label>برای فیلدهای فرم زیرنویس ایجاد می کند. دو روش برای گروه بندی برچسب ها و فیلدها وجود دارد. اگر فیلد داخل یک عنصر باشد <label>، پس ویژگی for نیازی به مشخص شدن ندارد.</p><p> <label for="lastname">نام خانوادگی</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">نام خانوادگی</label> <label>نام خانوادگی <input type="text" name="lastname"></label> </p><p>فیلدهای فرم را می توان با استفاده از عنصر به بلوک های منطقی تقسیم کرد <fieldset>. با استفاده از عنصر می توان به هر بخش عنوانی داد <legend> .</p><p> <fieldset> <legend>اطلاعات تماس</legend> <label>نام <input type="text" required></label> <label>پست الکترونیک <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>برنج. 1. گروه بندی فیلدهای فرم</p><p>برای درک بیشتر فرم برای کاربران، متنی به فیلدهای فرم حاوی نمونه ای از داده های ورودی اضافه می شود. چنین متنی متن مکان یاب نامیده می شود و با استفاده از ویژگی مکان نگهدار ایجاد می شود.</p> <p>فیلدهای مورد نیاز نیز باید برجسته شوند. قبل از ظهور HTML5، کاراکتر ستاره * در کنار نام فیلد استفاده می شد. مشخصات جدید یک ویژگی مورد نیاز ویژه را معرفی می کند که به شما امکان می دهد یک فیلد مورد نیاز را در سطح نشانه گذاری علامت گذاری کنید. این ویژگی به مرورگر دستور می دهد (با فرض اینکه از HTML5 پشتیبانی می کند) پس از کلیک کاربر روی دکمه ارسال تا زمانی که فیلدهای مشخص شده پر نشدند، داده ارسال نکند.</p><p> <input type="text" required placeholder="اسم شما"> </p><p>برای تغییر ظاهر یک فیلد متنی هنگام دریافت فوکوس، از کلاس شبه فوکوس استفاده کنید. برای مثال، می‌توانید پس‌زمینه فیلد فعلی را تیره‌تر کنید یا یک حاشیه رنگی اضافه کنید تا آن را از بقیه متمایز کنید:</p><p>ورودی: فوکوس ( پس‌زمینه: #eaeaea؛ )</p><p>یکی دیگر از ویژگی های مفید HTML5 ویژگی فوکوس خودکار است. این به شما امکان می دهد به طور خودکار فوکوس را روی فیلد اولیه مورد نظر برای عناصر تنظیم کنید <input>و <textarea>(فقط یک عنصر از هر فرم).</p> <h2>نمونه ای از ایجاد فرم ثبت نام</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>ثبت</h1> </div> <form method="post" action="form.php"> <div> <label for="name">نام</label> <input type="text" name="name" required> </div> <div class="radio">کف <label> <input type="radio" name="sex" value="نر">نر <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="زنانه">زنانه <div class="radio-control female"></div> </label> </div> <div> <label for="email">پست الکترونیک</label> <input type="email" name="email" required> </div> <div> <label for="country">یک کشور</label> <select name="country"> <option>کشور محل اقامت خود را انتخاب کنید</option> <option value="روسیه">روسیه</option> <option value="اوکراین">اوکراین</option> <option value="بلاروس">بلاروس</option> </select> <div class="select-arrow"></div> </div> <button type="submit">ارسال</button> </form> </div> <p><b>توجه داشته باشید</b><br>action="form.php" - پیوند به فایل کنترل کننده فرم. یک فایل با رمزگذاری UTF-8 ایجاد کنید، آن را در سرور آپلود کنید و مسیر فایل روی سرور خود را جایگزین action="form.php" کنید.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>برنج. 2. ظاهر فرم پیش فرض <p>همانطور که در شکل مشاهده می کنید، هر عنصر فرم دارای سبک های پیش فرض مرورگر است. بیایید سبک ها را تمیز کنیم و عناصر فرم را تزئین کنیم.</p><p> Form-wrap ( عرض: 550px؛ پس‌زمینه: #ffd500؛ حاشیه-شعاع: 20px؛ ). : 30 پیکسل؛ ) فرم ( پس‌زمینه: سفید؛ شناور: چپ؛ عرض: کالک (100٪ - 240 پیکسل)؛ لایه‌بندی: 30 پیکسل؛ شعاع حاشیه: 0 20 پیکسل 20 پیکسل 0؛ رنگ: #7b7b7b؛ ) .form-wrap:after, فرم div:after ( محتوا: ""؛ نمایش: جدول؛ واضح: هر دو؛ ) فرم div ( حاشیه پایین: 15 پیکسل؛ موقعیت: نسبی؛ ) h1 (اندازه قلم: 24 پیکسل؛ وزن قلم: 400؛ موقعیت: نسبی ؛ حاشیه بالا: 50 پیکسل؛ ) h1:after ( محتوا: "\f138"؛ اندازه قلم: 40 پیکسل؛ خانواده فونت: FontAwesome؛ موقعیت: مطلق؛ بالا: 50 پیکسل؛ سمت چپ: 50%؛ تبدیل: translateX(-50 %)؛ ) /************************ عناصر فرم یک ظاهر طراحی شده ***************** *** **/ برچسب، دهانه (نمایش: بلوک؛ اندازه فونت: 14 پیکسل؛ حاشیه پایین: 8 پیکسل؛ ) ورودی، ورودی (عرض حاشیه: 0؛ طرح کلی: هیچ، حاشیه: 0؛ عرض: 100 درصد. padding: 10px 15px؛ پس زمینه: #e6e6e6; ) input:focus, input:focus (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) برچسب رادیویی ( موقعیت: نسبی؛ بالشتک چپ: 50 پیکسل؛ مکان نما: نشانگر؛ عرض: 50 درصد؛ شناور: چپ؛ ارتفاع خط: 40 پیکسل؛ ) ورودی رادیویی (موقعیت: مطلق؛ کدورت: 0؛ ) .رادیو -کنترل ( موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ ارتفاع: 40 پیکسل؛ عرض: 40 پیکسل؛ پس‌زمینه: #e6e6e6؛ شعاع حاشیه: 50%؛ تراز نوشتاری: مرکز؛ ) .male:pre ( محتوا: " \f222"؛ font-family: FontAwesome؛ font-weight: bold; ) .female:before ( content: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label: hover input ~ . radio-control، .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( رنگ: قرمز؛ ) انتخاب (عرض: 100%؛ مکان نما: اشاره گر؛ بالشتک: 10px 15px؛ طرح کلی: 0؛ حاشیه: 0؛ پس زمینه: #e6e6e6؛ رنگ: #7b7b7b؛ -webkit-appearance: هیچ؛ /* علامت وب کیت - مرورگرها را بردارید. */ -moz-appearance: هیچ؛ /*در موزیلا فایرفاکس علامت را بردارید*/ ) انتخاب کنید::-ms-expand (نمایش: هیچ، /*در IE علامت بزنید*/) .select-arrow ( موقعیت: مطلق ; بالا: 38 پیکسل; سمت راست: 15 پیکسل؛ عرض: 0; ارتفاع: 0; اشاره گر رویدادها: هیچ /*فعال کردن نمایش لیست با کلیک بر روی فلش*/ border-style: solid; حاشیه-عرض: 8px 5px 0 5px; حاشیه رنگ: #7b7b7b شفاف شفاف شفاف; ) دکمه ( بالشتک: 10 پیکسل 0؛ پهنای حاشیه: 0؛ نمایشگر: بلوک؛ عرض: 120 پیکسل؛ حاشیه: 25 پیکسل خودکار 0؛ پس زمینه: #60e6c5؛ رنگ: سفید؛ اندازه قلم: 14 پیکسل؛ طرح کلی: هیچ؛ تبدیل متن : بزرگ؛ ) /**************************** افزودن فرم تطبیقی ***************** **** **/ @media (حداکثر عرض: 600 پیکسل) ( .form-wrap (حاشیه: 20 پیکسل خودکار؛ حداکثر عرض: 550 پیکسل؛ عرض: 100 درصد؛) .نمایه، فرم (شناور: هیچ، عرض: 100%؛) h1 (حاشیه بالا: خودکار؛ بالشتک پایین: 50 پیکسل؛) فرم (شعاع حاشیه: 0 0 20 پیکسل 20 پیکسل؛) )</p><p><b>فایل form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: your_email". "\r\n"؛ if(!empty($name) && !empty($sex) && !empty($email) && ! vala($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "متشکرم! شما با موفقیت ثبت نام کردید.";) ?></p><p><b>توجه داشته باشید</b><br>در متغیر $subject متنی را که به عنوان موضوع ایمیل نمایش داده می شود را مشخص کنید. <br>Your_name - در اینجا می توانید نامی را که در قسمت "حرف از چه کسی" نمایش داده می شود را مشخص کنید. <br>آدرس سایت را با فرم ثبت نام جایگزین your_site_url کنید. <br>your_email را با آدرس ایمیل خود جایگزین کنید. <br>$headers .= "Bcc: your_email". "\r\n"؛ می فرستد <a href="https://ow5.ru/fa/photo-editors/chto-takoe-skrytaya-kopiya-v-pochte-mail-postfix-otpravte-kopiyu.html">کپی مخفی</a>به آدرس ایمیل شما</p> <h3>شرح</h3> <p>برچسب بزنید <form>یک فرم را در یک صفحه وب تنظیم می کند. این فرم برای تبادل داده بین کاربر و سرور در نظر گرفته شده است. دامنه فرم ها به ارسال داده ها به سرور محدود نمی شود، با استفاده از اسکریپت های مشتری، می توانید به هر عنصر فرم دسترسی داشته باشید، آن را تغییر دهید و بنا به صلاحدید خود اعمال کنید.</p> <p>یک سند می تواند حاوی هر تعداد فرم باشد، اما تنها یک فرم می تواند در هر زمان به سرور ارسال شود. به همین دلیل، داده های فرم باید مستقل از یکدیگر باشند.</p> <p>برای ارسال فرم به سرور از دکمه Submit استفاده می شود که با فشردن کلید Enter درون فرم نیز می توان به همین منظور دست یافت. اگر دکمه ارسال در فرم وجود نداشته باشد، کلید Enter استفاده از آن را شبیه سازی می کند.</p> <p>هنگامی که فرم به سرور ارسال می شود، کنترل داده ها به برنامه مشخص شده توسط ویژگی عمل تگ منتقل می شود. <form>. پیش از این، مرورگر اطلاعاتی را در قالب یک جفت "name=value" آماده می‌کند، جایی که نام با ویژگی نام تگ تعیین می‌شود. <input>، و مقدار توسط کاربر وارد می شود یا در قسمت فرم پیش فرض تنظیم می شود. اگر از روش GET برای ارسال داده استفاده می شود، پس <a href="https://ow5.ru/fa/office/chto-oznachaet-znachok-zamka-chto-oznachaet-zamok-v-adresnoi-stroke-brauzera.html">نوار آدرس</a>ممکن است به شکل زیر باشد.</p> <p>http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p> <p>پارامترها بعد از علامت سوال بعد از آدرس برنامه CGI لیست شده و با علامت (&) از هم جدا می شوند. کاراکترهای غیر لاتین به نمایش هگزادسیمال تبدیل می شوند (به شکل %HH، که در آن HH است <a href="https://ow5.ru/fa/game/hex-redaktory-fleshki-hxd-dlya-redaktirovaniya-failov-v-shestnadcaterichnom.html">کد هگز</a>برای یک مقدار کاراکتر ASCII)، فاصله با یک پلاس (+) جایگزین می شود.</p> <p>داخل ظرف مجاز است <form>تگ های دیگر را قرار دهید، در حالی که خود فرم به هیچ وجه در صفحه وب نمایش داده نمی شود، فقط عناصر آن و نتایج تگ های تو در تو قابل مشاهده است.</p> <h3>نحو</h3> <form action="URL"> ... </form> <h3>ویژگی های</h3>کدگذاری را تنظیم می کند که در آن سرور می تواند داده ها را دریافت و پردازش کند. آدرس برنامه یا سندی که داده های فرم را پردازش می کند. تکمیل خودکار فیلدهای فرم را فعال می کند. نحوه کدگذاری داده های فرم روش پروتکل HTTP نام فرم. اعتبار سنجی داخلی داده های فرم را برای ورودی معتبر لغو می کند. نام پنجره یا قاب جایی که کنترل کننده نتیجه برگشتی را بارگیری می کند. <h3>برچسب بسته شدن</h3> <p>ضروری.</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>تگ FORM</title> </head> <body> <form action="handler.php"> <p><b>به نظر شما مخفف "OS" مخفف چیست؟</b></p> <p><input type="radio" name="answer" value="a1">افسران <Br> <input type="radio" name="answer" value="a2"><a href="https://ow5.ru/fa/strategy/zapustitsya-li-kompyuter-bez-operacionnoi-sistemy-procedura-i-ih-vidy.html">سیستم عامل</a><Br> <input type="radio" name="answer" value="a3">مگس های راه راه بزرگ</p> <p><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>نتیجه <a href="https://ow5.ru/fa/office/politika-konfidencialnosti-i-obrabotki-personalnyh.html">این مثال</a>در شکل نشان داده شده است. 1.</p> <p>برنج. 1. مشاهده عناصر فرم در پنجره مرورگر</p> <script type="text/javascript">  </script><br> <br> <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="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/security/">ایمنی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/more/">دیگر</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/game/">بازی ها</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/internet/">اینترنت</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/keyboard/">صفحه کلید</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/multimedia/">چند رسانه ای</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/navigation/">جهت یابی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/office/">دفتر</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/program/">برنامه ها</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/different/">متفرقه</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/system/">سیستمیک</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">آخرین یادداشت ها</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/fa/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html" class="thumb"><img width="95" height="95" src="/uploads/aeaa41ce84ea748fe76cf90e7edb532e.jpg" class="attachment-mini size-mini wp-post-image" alt="بازگرداندن صفحه حذف شده یا مسدود شده در همکلاسی ها" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html">بازگرداندن صفحه حذف شده یا مسدود شده در همکلاسی ها</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html" class="thumb"><img width="95" height="95" src="/uploads/65770e61a298aa3e28ddf470cb2579e0.jpg" class="attachment-mini size-mini wp-post-image" alt="چرا Vkontakte موسیقی پخش نمی کند و در مورد آن چه باید کرد؟" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html">چرا Vkontakte موسیقی پخش نمی کند و در مورد آن چه باید کرد؟</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html" class="thumb"><img width="95" height="95" src="/uploads/f181ff1ade1a6984ed85c2954ab71048.jpg" class="attachment-mini size-mini wp-post-image" alt="چگونه یک شخص را در Vkontakte ذکر کنیم؟" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html">چگونه یک شخص را در Vkontakte ذکر کنیم؟</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html" class="thumb"><img width="95" height="95" src="/uploads/1f58bb94499f926e7b02137d77d764cd.jpg" class="attachment-mini size-mini wp-post-image" alt="اطلاعات بیوگرافی نقشه های برایان" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html">اطلاعات بیوگرافی نقشه های برایان</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html" class="thumb"><img width="95" height="95" src="/uploads/63e48e2f3fcceab1c239ec2b3b42d900.jpg" class="attachment-mini size-mini wp-post-image" alt="نمودارها و نمودارها در مایکروسافت اکسل" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html">نمودارها و نمودارها در مایکروسافت اکسل</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">محبوب</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/fa/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html" class="thumb"><img width="95" height="95" src="/uploads/9f280d6ec603eb33f62eccc15ac78d44.jpg" class="attachment-mini size-mini wp-post-image" alt="VKontakte MP3 mod تغییرات در آخرین نسخه" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html">VKontakte MP3 mod تغییرات در آخرین نسخه</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html" class="thumb"><img width="95" height="95" src="/uploads/dc70fb5a8f8e301c6a58d0cd510e9703.jpg" class="attachment-mini size-mini wp-post-image" alt="فیفا هنگام راه اندازی از کار می افتد" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html">فیفا هنگام راه اندازی از کار می افتد</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html" class="thumb"><img width="95" height="95" src="/uploads/4b18c2f9a0964faaea01b8c95275c258.jpg" class="attachment-mini size-mini wp-post-image" alt="تبدیل ساعت به دقیقه در مایکروسافت اکسل" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html">تبدیل ساعت به دقیقه در مایکروسافت اکسل</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">اخبار</div> <div class="business_news"> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/fa/office/failovaya-sistema-refs-preimushchestva-i-perspektivy-refs.html" class="title">مزایا و چشم اندازها</a> </div> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/fa/system-utilities/odnoklassniki-polnaya-versiya-vhod-na-moyu-stranicu-zaiti-v-odnoklassniki-na.html" class="title">رفتن به همکلاسی ها در صفحه خود: اطلاعات دقیق</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/fa/strategy/professiya-veb-dizainer-skolko-zarabatyvayut-i-gde-uchitsya-etoi-specialnosti-professiya-web-dizain.html" class="title">حرفه ای طراح وب: چقدر درآمد دارند و کجا باید این تخصص را مطالعه کرد؟</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/fa/system-utilities/pochemu-bet-tokom-ot-vsego-v-chem-prichina-udar-tokom.html" class="title">شوک الکتریکی: عواقب، اقدامات لازم و اقدامات صحیح نحوه برق رسانی دست ها به شوک</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/fa/photo-editors/pochemu-bet-tokom-ot-vsego-v-chem-prichina-udar-tokom-posledstviya.html" class="title">شوک الکتریکی: عواقب، اقدامات لازم و اقدامات صحیح نحوه ضربه زدن از انگشت</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://ow5.ru/fa/" class="logo" style="background:none;">ow5.ru</a> <div class="copyright"> <p>ow5.ru - آموزش. ایمنی. جهت یابی. اینترنت. بازی ها. برنامه های اداری</p> <p><span>2023 - کلیه حقوق محفوظ است</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://ow5.ru/fa/feedback.html">مخاطب</a></li> <li><a href="">درباره سایت</a></li> <li><a href="">تبلیغات در وب سایت</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/security/">ایمنی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/more/">دیگر</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/game/">بازی ها</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/security/">ایمنی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/more/">دیگر</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/game/">بازی ها</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://ow5.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> <script type="text/javascript">  </script><br> <br> </body> </html>