خانه آموزش CSS آموزش CSS مقدماتی آموزش کار با فرم ها یا Forms در CSS

آموزش کار با فرم ها یا Forms در CSS

توسط

۱۳۹۸-۰۷-۲۷

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

آموزش کار با فرم ها یا Forms در CSS

Free-Learn

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

1 فرم ها در CSS
2 کار با فرم ها یا Forms در CSS
3 نحوه استایل دادن به تگ Input در فرم ها
4 تنظیم خط دور لبه یا Border برای تگ Input
5 تنظیم رنگ پس زمینه برای تگ Input
6 تنظیم حالت فوکوس برای تگ Input
7 قرار دادن عکس / تصویر در تگ Input
8 متحرک سازی تگ Input با کلیک ماوس بروی آن
9 ایجاد یک فرم واکنش گرا یا ( Responsive )

فرم ها در CSS

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

آموزش کار با فرم ها یا Forms در HTML را مشاهده نمایید.

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

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

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

Free-Learn

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

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

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

Free-Learn

نحوه استایل دادن به تگ 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>

امتحان کنید

Free-Learn

تنظیم خط دور لبه یا 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>

امتحان کنید

Free-Learn

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

در جلسات قبل از سری آموزش های قدم به قدم زبان CSS ما کار با پس زمینه ها یا Backgrounds در 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>

امتحان کنید

Free-Learn

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

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

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

مثال شماره ۱

<style>

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

</style>

<style>

input[type="text"]:focus{

background-color:#2196F3;

color:#fff;

}

</style>

امتحان کنید

Free-Learn

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

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

پیشنهاد میکنم آموزش کار با پس زمینه ها در CSS را مشاهده نمایید.

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

<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>

امتحان کنید

Free-Learn

متحرک سازی تگ 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>

امتحان کنید

Free-Learn

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

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

حال در مثال زیر میتوانید نحوه واکنش گرا یا Responsive کردن یک فرم را در صفحه وب مشاهده نمایید.

برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید

1	برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید

امتحان کنید

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

در ادامه و در جلسات بعدی شما با تک تک ویژگی های CSS آشنا خواهید شد، جوری که کمی بعد به راحتی دستورات موجود در مثال بالا را درک خواهید کرد.

Free-Learn

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

دریافت PDF یا پرینت این مطلب