موضوعات وبسایت : برنامه نویسی
سوالات امتحان آیین نامه رانندگی

سورس کد فرم ثبت نام html

سورس کد فرم ثبت نام html

نویسنده : محمد پارسایی | زمان انتشار : 25 اسفند 1400 ساعت 16:27

جهت انجام پروژه های دانشجویی و یا تمرین‌های برنامه نویسی رشته کامپیوتر میتوانید به آی دی تلگرام زیر پیام دهید

@AlirezaSepand



در این پست یک مطلب با عنوان سورس کد فرم ثبت نام html را مطالعه خواهید کرد.

سوالات امتحان آیین نامه رانندگی

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

Material-Design-Log-in-Sign-up.jpg

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

فرم های ورود و ثبت نام زیبای طراحی شده با HTML و CSS

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

فرم ثبت نام و ورود شماره 1

Si1Login-and-Sign-Up-Form-Concept.jpg

شکلی که در بالا مشاهد میکنید فرم هایی هستند که توسط  Dany Santos ایجاد شده اند. فرم های ورود فقط حاوی ایمیل و رمز عبور هستند در حالی که فرم ثبت نام حاوی ایمیل، نام کاربری و رمز عبور است. علاوه بر این، همه این اجزاء تنها زمانی ظاهر می شوند که شما بخواهید ثبت نام کرده و یا وارد سایت شوید. جابه جایی بین فرم های ثبت نام و ورود به زیبا ترین شکل با انیمیشن انجام میشود. در لینک زیر میتوانید این فرم ها را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 2

Si2Sign-Up-Login-Form.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 3 (فرم های ساده و واکنش گرا)

Si3Clean-and-Responsive-Forms.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 4

Si4Sign-Up-Form.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 5

Si5Sign-Up-Screen-Animation.jpg

این فرم ثبت نام و ورود که بسیار کاربر پسندانه است توسط  Josh Sorosky طراحی شده است. این فرم ظاهر ساده ای داشته و به وسیله کدهای HTML، CSS و جاوا اسکریپت ایجاد شده است. این فرم تنها شامل موارد اساسی مانند نام کاربری ، رمز عبور و ایمیل است. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 6

Si6Login-registration-Form.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 7 (فرم های چند مرحله ای)

Si7Sign-in-and-Sign-up-Single-Form.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 8

Si8Material-Design-Log-in-Sign-up%20(1).jpg

فرم ثبت نام و ورود Material design یکی دیگر از فرم های بسیار سبک بوده که توسط Brawada طراحی شده است. این فرم با استفاده از کد های CSS ، HTML و جاوا اسکریپت ایجاد شده و به نظر ساده و زیبا است. این فرم فقط شامل عناصر اساسی است و فضای کمی از سایت شما را اشغال میکند. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 9

Si9Material-Design-Signup-Interaction.jpg

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 10

Si10Sign-Up-Interface.jpg

Martin Machycek توسعه دهنده ای محبوب در سایت CodePen است. او این فرم بسیار ساده و زیبا را از طریق HTML، CSS و جاوا اسکریپت طراحی کرده است. این فرم از سازگاری بالایی برخوردار بوده و سبک وزن است. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

آیا این مطلب برای شما مفید بود؟


منبع: learnsource.net



ارسال نظر

نام


ایمیل


نظر