مشاوره رایگان

دسته بندی:آموزش برنامه نویسی
تاریخ انتشار:یکشنبه 30 بهمن 1401
نویسنده:مرتضی رستمیان

Input در Tailwind-css

در این مقاله از گروه برنامه نویسی وارنا ، به بررسی Input ها در فریمورک Tailwind-css میپردازیم.

یکی از مهم ترین قسمت های هر فرم و پرسش نامه ای ، input ها هستند که داده ای را از سمت کاربر دریافت میکند. پس باید در عین زیبایی ، ساده و کاربردی باشد تا بهترین تعامل بین کاربر و سایت را برقرار سازد. در این مقاله قصد داریم با چند input طراحی شده با فریمورک Tailwind-css آشنا بشیم.

  • 1- Input در اندازه های مختلف

    کلاس های مختلفی برای Font-size در Tailwind-css وجود دارد که امکان طراحی input در اندازه های مختلف را برای ما فراهم میسازد:

    input در اندازه های مختلف

     
    
  • 2- Input غیر فعال

    اگر بخواهیم طبق داده های قبلی دریافتی از سمت کاربر ، فیلدی از input را غیر فعال کنیم ، از قطعه کد زیر استفاده میکنیم:

    input غیر فعال

     
    
    
  • دوره ی آموزش Tailwind وارنا

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

  • 3- Input اعتبار سنجی

    در صورتی که مقدار داده ی ورودی از سمت کاربر ، معتبر یا غیر معتبر باشد ، میتوان از input های زیر استفاده کرد:

    input اعتبارسنجی

    Well done! Some success message.

    Oh, snapp! Some error message.

  • 4- Input همراه با آیکون

    اگر بخواهیم برای input ، آیکون یا در کل بخش ثابتی داشته باشیم ، به این شکل عمل خواهیم کرد:

    input همراه با

     
    

    @

  • بخوانید درباره : آموزش طراحی مثلث با Tailwind-css

  • 5- Input جست و جو

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

    input   جست و جو

        
        
        

  • 6- Input همراه با Dropdown

    میتوان از لیست Dropdown هم در input ها استفاده کرد:

    input همراه با Dropdown

     
        

شما میتوانید input های جذابی رو با کلاس های متنوع تیلویند طراحی کنید و وبسایتی متفاوت نسبت به وبسایت های تکراری موجود داشته باشید.

آموزش و استخدام در وارنا

آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قبولی ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !