آموزش کار با فرم ها یا 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
|
1 |
input[type=Element_Name] |
که بجای Element_Name باید اون نوع ورودی مون (یا در واقع نوع تگ Input که توسط صفت Type مشخص شده) را بنویسیم. ( لطفا به مثال زیر توجه نمایید )
مثال شماره ۱ : انتخاب نوع Text از تگ Input – در مثال زیر مثلا من اومدم نوع ورودی از نوع متن رو بهش رنگ پس زمینه دادم یا اومدم یک خط به دور لبه ش کشیدم.
|
1 2 3 4 5 6 7 8 9 10 |
<style> input[type="text"]{ background-color:#5db616; color:#fff; padding:5px; border:2px solid #000; } </style> |
مثال شماره ۲ : انتخاب نوع Password از تگ Input
|
1 2 3 4 5 6 7 8 9 10 |
<style> input[type="password"]{ background-color:#00b185; color:#fff; padding:5px; border:2px solid #000; } </style> |
Free-Learn
تنظیم خط دور لبه یا Border برای تگ Input
همونطور که میدونید ما با استفاده از ویژگی Border میتونیم یک خط به دور لبه های یک عنصر بکشیم، حال در این قسمت میخوایم با استفاده از این ویژگی تگ Input مون رو آرایش کنیم.
مثال شماره ۱ : حذف border پیش فرض تگ Input
|
1 2 3 4 5 6 7 |
<style> input[type="text"]{ border:none; } </style> |
مثال شماره ۲ : سفارشی سازی border تگ Input
|
1 2 3 4 5 6 7 |
<style> input[type="text"]{ border:2px solid blue; } </style> |
Free-Learn
تنظیم رنگ پس زمینه برای تگ Input
در جلسات قبل از سری آموزش های قدم به قدم زبان CSS ما کار با پس زمینه ها یا Backgrounds در CSS را بطور کامل یاد گرفتیم، که در صورت تمایل میتوانید از طریق لینک زیر این آموزش را مشاهده نمایید.
پیشنهاد میکنم حتما آموزش کار با پس زمینه ها یا Backgrounds در CSS را مشاهده نمایید.
مثال شماره ۱
|
1 2 3 4 5 6 7 8 9 |
<style> input[type="text"]{ background-color:#F44336; color:#fff; border:2px solid #000; } </style> |
Free-Learn
تنظیم حالت فوکوس برای تگ Input
حالت فوکوس یا Focus یعنی اون حالت یا موقعی که کلیک ماوس بروی یک عنصر انجام میشه، یعنی دقیقا موقعی که ماوس بروی یک عنصر کلیک میشه بهش میگیم حالت فوکوس.
فوکوس یا Focus یکی از شبه کلاس های CSS می باشد که با استفاده از آن میتوان لحظه کلیک ( فوکوس ) شدن یک عنصر را مشخص کرد. ( آموزش کامل شبه کلاس های CSS را مشاهده نمایید )
مثال شماره ۱
|
1 2 3 4 5 6 7 8 |
<style> input[type="text"]:focus{ background-color:#2196F3; color:#fff; } </style> |
Free-Learn
قرار دادن عکس / تصویر در تگ Input
در این مثال میخوایم با استفاده از ویژگی background-image یک تصویر / عکس را در پس زمینه تگ Input قرار دهیم، در صورت تمایل میتوانید آموزش کامل کار با ویژگی background-image را مشاهده نمایید.
پیشنهاد میکنم آموزش کار با پس زمینه ها در CSS را مشاهده نمایید.
مثال شماره ۱ : قرار دادن عکس در موقعیت خاص
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 بصورت کامل
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 داریم که با استفاده از آن میتوانیم عمل انتقال یا متحرک سازی عناصر را انجام دهیم، مثلا میتونیم کاری کنیم که وقتی ماوس رفت بروی یک عنصر، اون عنصر از نقطه ای به نقطه ی دیگر منتقل شود.
مثال شماره ۱ : تمام عرض شدن باکس، وقتی ماوس بروی عنصر فوکوس می شود
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 آشنا خواهید شد، جوری که کمی بعد به راحتی دستورات موجود در مثال بالا را درک خواهید کرد.
خب دوستان خسته نباشید، میدونم یکمی طولانی شد، به پایان آموزش کار با فرم ها یا Forms در CSS رسیدیم، امیدوارم که در این جلسه هیچ مشکلی نداشته باشید.
