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

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

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

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

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

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

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

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

مشاهده فرم 

منبع: learnsource.net