نحوه کار با فرم ها در CSS

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

آنچه در این جلسه میخوانید :

فرم ها در CSS

فهرست عناوین

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

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

برای زیباسازی ظاهر فرممون دیگه نمیتونیم از HTML استفاده کنیم چون HTML قدرتشو نداره ، به همین خاطر میایم و از زبان CSS استفاده میکنیم.

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

کار با فرم ها یا Forms در CSS

در این جلسه یعنی ( آموزش کار با فرم ها یا Forms در CSS ) و در ادامه میخوایم با ویژگی هایی زیر که در زبان CSS هستند با فرم ها کار کنیم و آنها را از نظر ظاهری جذاب و زیباتر کنیم.

استایل دادن به تگ Input در فرم ها
تنظیم خط دور لبه یا Border برای تگ Input
تنظیم رنگ پس زمینه برای تگ Input
تنظیم حالت فوکوس (موقعی که ماوس بروی تگ Input فوکوس می شود)
قرار دادن عکس/تصویر در تگ Input و تنظیم آن
متحرک سازی تگ Input با استفاده از ویژگی Transition در CSS
ایجاد یک فرم واکنش گرا یا ( Responsive ) – تا در دستگاه های مختلف مثه (تلفن همراه و..) فرم به درستی نمایش داده شود.

نحوه استایل دادن به تگ Input در فرم ها

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

این حالت های مختلف که میگم یعنی مثلا ما میتونیم با استفاده از این تگ یک باکس برای دریافت نام کاربر ایجاد نماییم و یک باکس دیگر برای دریافت مثلا رمز ورودی کاربر و…

پس همونطور که در HTML با استفاده از صفت Type در درون تگ Input نوع ورودی را مشخص میکنیم، در CSS نیز با استفاده از ویژگی زیر ما میتونیم نوع ورودی تگ Input را انتخاب کنیم سپس ویژگی های مورد نظرمون رو روش اعمال کنیم.

شکل کلی برای انتخاب نوع ورودی تگ Input در CSS

input[type=Element_Name]

1	input[type=Element_Name]

که بجای Element_Name باید اون نوع ورودی مون (یا در واقع نوع تگ Input که توسط صفت Type مشخص شده) را بنویسیم. ( لطفا به مثال زیر توجه نمایید )

مثال شماره ۱ : انتخاب نوع Text از تگ Input – در مثال زیر مثلا من اومدم نوع ورودی از نوع متن رو بهش رنگ پس زمینه دادم یا اومدم یک خط به دور لبه ش کشیدم.

<style>

input[type="text"]{
 background-color:#5db616;
 color:#fff;
 padding:5px;
 border:2px solid #000;
}

</style>

<style>

input[type="text"]{

background-color:#5db616;

color:#fff;

padding:5px;

border:2px solid #000;

}

</style>

مثال شماره ۲ : انتخاب نوع Password از تگ Input

<style>

input[type="password"]{
 background-color:#00b185;
 color:#fff;
 padding:5px;
 border:2px solid #000;
}

</style>

<style>

input[type="password"]{

background-color:#00b185;

color:#fff;

padding:5px;

border:2px solid #000;

}

</style>

تنظیم خط دور لبه یا Border برای تگ Input

همونطور که میدونید ما با استفاده از ویژگی Border میتونیم یک خط به دور لبه های یک عنصر بکشیم، حال در این قسمت میخوایم با استفاده از این ویژگی تگ Input مون رو آرایش کنیم.

مثال شماره ۱ : حذف border پیش فرض تگ Input

<style>

input[type="text"]{
 border:none;
}

</style>

<style>

input[type="text"]{

border:none;

}

</style>

مثال شماره ۲ : سفارشی سازی border تگ Input

<style>

input[type="text"]{
 border:2px solid blue;
}

</style>

<style>

input[type="text"]{

border:2px solid blue;

}

</style>

تنظیم رنگ پس زمینه برای تگ Input

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

مثال شماره ۱

<style>

input[type="text"]{
 background-color:#F44336;
 color:#fff;
 border:2px solid #000;
}

</style>

<style>

input[type="text"]{

background-color:#F44336;

color:#fff;

border:2px solid #000;

}

</style>

تنظیم حالت فوکوس برای تگ Input

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

فوکوس یا Focus یکی از شبه کلاس های CSS می باشد که با استفاده از آن میتوان لحظه کلیک ( فوکوس ) شدن یک عنصر را مشخص کرد.

مثال شماره ۱

<style>

input[type="text"]:focus{
 background-color:#2196F3;
 color:#fff;
}

</style>

<style>

input[type="text"]:focus{

background-color:#2196F3;

color:#fff;

}

</style>

قرار دادن عکس / تصویر در تگ Input

در این مثال میخوایم با استفاده از ویژگی background-image یک تصویر / عکس را در پس زمینه تگ Input قرار دهیم، در صورت تمایل میتوانید آموزش کامل کار با ویژگی background-image را مشاهده نمایید.

مثال شماره ۱ : قرار دادن عکس در موقعیت خاص

<style>

input[type=text]{
 width: 100%;
 box-sizing: border-box;
 border: 3px solid #f2f2f2;
 border-radius: 15px;
 font-size: 16px;
 background-color: white;
 background-image: url('images/sico.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
}

</style>

<style>

input[type=text]{

width: 100%;

box-sizing: border-box;

border: 3px solid #f2f2f2;

border-radius: 15px;

font-size: 16px;

background-color: white;

background-image: url('images/sico.png');

background-position: 10px 10px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

}

</style>

مثال شماره ۲ : گذاشتن تصویر در پس زمینه تگ Input بصورت کامل

<style>

input[type=text]{
 width: 100%;
 box-sizing: border-box;
 border: 3px solid #FF5722;
 border-radius: 5px;
 background-color: white;
 color:#fff;
 background-image: url('images/bg-input.jpg');
 background-position: 5px; 
 padding: 12px;
}

</style>

<style>

input[type=text]{

width: 100%;

box-sizing: border-box;

border: 3px solid #FF5722;

border-radius: 5px;

background-color: white;

color:#fff;

background-image: url('images/bg-input.jpg');

background-position: 5px;

padding: 12px;

}

</style>

متحرک سازی تگ Input با کلیک ماوس بروی آن

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

مثال شماره ۱ : تمام عرض شدن باکس، وقتی ماوس بروی عنصر فوکوس می شود

<style>

input[type=text]{
 width: 150px;
 box-sizing: border-box;
 border: 3px solid #f2f2f2;
 border-radius: 15px;
 font-size: 16px;
 background-color: #607D8B;
 color:#fff;
 padding: 12px;
 -webkit-transition: width 0.4s ease-in-out;
 transition: width 0.4s ease-in-out;
}

input[type="text"]:focus{
 width:100%;
 background-color:#607D8B;
 color:#fff;
}

</style>

<style>

input[type=text]{

width: 150px;

box-sizing: border-box;

border: 3px solid #f2f2f2;

border-radius: 15px;

font-size: 16px;

background-color: #607D8B;

color:#fff;

padding: 12px;

-webkit-transition: width 0.4s ease-in-out;

transition: width 0.4s ease-in-out;

}

input[type="text"]:focus{

width:100%;

background-color:#607D8B;

color:#fff;

}

</style>

ایجاد یک فرم واکنش گرا یا ( Responsive )

اصلا واکنش گرا یا Responsive یعنی چه ؟! واکنش گرایی یعنی اینکه یک صفحه وب بتونه در دستگاهای مختلف مثله ( تبلت ، گوشی های موبایل ) به بهترین حالت ممکن نمایش داده شود.

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

بیشتر بخوانید:

نحوه کار با فرم ها در CSS

فرم ها در CSS

کار با فرم ها یا Forms در CSS

نحوه استایل دادن به تگ Input در فرم ها

تنظیم خط دور لبه یا Border برای تگ Input

تنظیم رنگ پس زمینه برای تگ Input

تنظیم حالت فوکوس برای تگ Input

قرار دادن عکس / تصویر در تگ Input

متحرک سازی تگ Input با کلیک ماوس بروی آن

ایجاد یک فرم واکنش گرا یا ( Responsive )

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

فرم ها در CSS

کار با فرم ها یا Forms در CSS

نحوه استایل دادن به تگ Input در فرم ها

تنظیم خط دور لبه یا Border برای تگ Input

تنظیم رنگ پس زمینه برای تگ Input

تنظیم حالت فوکوس برای تگ Input

قرار دادن عکس / تصویر در تگ Input

متحرک سازی تگ Input با کلیک ماوس بروی آن

ایجاد یک فرم واکنش گرا یا ( Responsive )

مطالب زیر را حتما مطالعه کنید

آموزش انیمیشن‌سازی با CSS

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

DOM چیست و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ