فرم CSS

فرم دهی فرم CSS به افزودن خصوصیات به فرم های HTML برای تنظیم موقعیت آنها ، تعاملی بودن آن ها و بهبود کلی شکل ظاهری آن ها اشاره دارد.

نکات اصلی فرم CSS:

• HTML عناصر ورودی کاربر مانند <form> و <input>  و <textarea> و<button>  و <select> و <option> را به کاربر ارائه می دهد.
• فرم دهی فرم CSS طرحی برای این عناصر ایجاد می کند.
• شما می توانید فرم های CSS را متحرک و اصلاح کنید و همچنین بسیاری از خصوصیات یک ظاهر طراحی را به قسمت های ورودی اضافه کنید.

یک ظاهر سازی زمینه های ورودی

انتخاب نوع ورودی فرم CSS

انتخابگرهای ویژگی CSS انواع ورودی CSS خاص را برای یک ظاهر طراحی می کنند:

• input [type = text] – قسمتهای فرم متن را انتخاب می کند.
• input [type = password] – قسمتهای فرم را که رمزهای عبور را می پذیرند انتخاب می کند.
• input [type = number] – قسمتهای فرم را که اعداد را می پذیرند انتخاب می کند.
• و غیره.

تغییرعرض

ویژگی width به شما امکان می دهد عرض قسمتهای ورودی را تغییر دهید.

مثال برای همه عناصر <input> اعمال می شود و عرض آنها را روی 100٪ تنظیم می کند:

input {
      width: 100px; /* When specifying this, you can use both px and % */
}

ورودی های خالی

خصوصیات padding و حاشیه فضای بیشتری را در داخل و اطراف قسمت ورودی اضافه می کند تا فضای بیشتری داشته باشد.

نکته: هر دوی این ویژگی ها شاخص های طول (به عنوان مثال px و em) و درصدها را به عنوان مقادیر طول می پذیرند.

مثال زیر فضا را برای قسمت ورودی فرم CSS ایجاد می کند:

input[type=text] {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box;  
}

توجه: خاصیت box-sizing را روی مقدار border-box قرار می دهیم تا شامل padding و حاشیه ها در کل ارتفاع و عرض عناصر شود.

ورودی های مرزی

ویژگی حاشیه ضخامت ، شعاع حاشیه (گوشه های گرد) ، سبک و رنگ حاشیه ها را در فرم های CSS کنترل می کند.

در مثال ، یک حاشیه ضخیم بنفش به قسمت اضافه می کنیم:

input[type=text] {
    border: 4px solid #8842d5;
    border-radius: 5px;  
}

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

input[type=text] {
    border: none;
    border-bottom: 4px solid #8842d5;  
}

ورودی های رنگی

ویژگی background-colour یک زمینه در قسمت ورودی اضافه می کند. برای تغییر رنگ متن داخل فیلد ، از رنگ استفاده کنید. مثال زیر نشان می دهد که چگونه می توانید قسمت ورودی خود را رنگ آمیزی کنید:

input[type=text] {
    background-color: #8842d5;
    color: white;  
}

ورودی های متمرکز

فرم های CSS و زمینه های ورودی آنها هنگامی که ویژگی های یک ظاهر طراحی آنها تغییر می کند ، هنگامی که کاربران روی آن ها کلیک می کنند ، تعاملی تر می شوند.

شما باید کلاس شبه CSS به نام: focus را اضافه کنید تا وقتی فرم متمرکز است ، یک سبک منحصر به فرد برای فرم ایجاد کنید.

این مثال پس از انتخاب رنگ پس زمینه یک قسمت ورودی را تغییر می دهد:

input[type=text]:focus {
    background-color: #8842d5;
}

مثال زیر یک بار حاشیه اضافه می کند: عوامل محرک:

input[type=text]:focus {
     border: 5px solid #8842d5; 
}

توجه: می توانید طرح اصلی آبی رنگ را با تنظیم خاصیت رئوس مطالب به هیچ وجه حذف کنید.

افزودن نماد یا تصویر پس زمینه

ویژگی تصویر پس زمینه تصویری را به قسمت ورودی اضافه می کند.

input[type=text] {
    background-color: #9476f7;
    background-image: url('search-icon.png');
    background-position: 9px 10px;
    background-repeat: no-repeat;
    padding-left: 50px;  
}

• با اضافه کردن ویژگی پس زمینه ، موقعیت را برای تصاویر نشان می دهید. مطمئن شوید که تصویر به درستی با متن متناسب باشد.
• برای اطمینان از اینکه تصویر فقط یک بار ظاهر می شود ، باید تکرار پس زمینه را بر روی “تکرار” تنظیم کنید.

ورودی جستجوی متحرک

ویژگی انتقال هنگامی که کاربران بر روی آن کلیک می کنند ، عرض قسمت ورودی را متحرک می کند. برای انجام این کار ، باید ویژگی های width را برای فرم های CSS دو بار تعریف کنیم.

input[type=text] {
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

input[type=text]:focus {
    width: 80%;
}

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

مناطق متن

خصوصیات برای فرم های CSS می توانند مناطق متنی را که شامل چندین خط داده نیز استایل دهند. برای طراحی منظم مناطق متن می توانید padding ، حاشیه ها ، عرض ، ارتفاع و سایر قوانین CSS را تنظیم کنید.

این مثال یک متن را سبک می کند و از تغییر اندازه کاربران جلوگیری می کند:

textarea {
    width: 80%;
    height: 200px;
    padding: 15px 22px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    border-radius: 5px;
    background-color: gray;
    resize: none;  
}

به یاد داشته باشید که عنصر <textarea> به طور پیش فرض قابل تغییر اندازه مجدد است. کاربران می توانند از گراببر در گوشه پایین سمت راست استفاده کرده و اندازه جعبه را تغییر دهند. با استفاده از خاصیت تغییر اندازه که روی هیچ تنظیم نشده است می توانید این ویژگی را غیرفعال کنید.

textarea {       
    resize: none;
}

انتخاب منوها

عناصر<select> و <option> منوهای کشویی ساده را ایجاد می کنند.

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

select {
    width: 80%;
    padding: 18px 22px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: #8842d5;  
}

دکمه های ورودی فرم CSS

یک مرحله مهم از یک ظاهر طراحی فرم CSS تنظیم نحوه نگاه کردن دکمه های فرم است.

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

input[type=button], input[type=reset], input[type=submit] {
    background-color: #8842d5;
    border: none;
    color: white;
    padding: 18px 36px;
    text-decoration: none;
    margin: 5px 4px;
    cursor: pointer;  
}

نکات مهم فرم CSS:

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

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