نحوه کار با فرم ها در 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
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> |
تنظیم خط دور لبه یا 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> |
تنظیم رنگ پس زمینه برای تگ Input
در جلسات قبل از سری آموزش های قدم به قدم زبان 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> |
تنظیم حالت فوکوس برای تگ Input
حالت فوکوس یا Focus
یعنی اون حالت یا موقعی که کلیک ماوس بروی یک عنصر انجام میشه، یعنی دقیقا موقعی که ماوس بروی یک عنصر کلیک میشه بهش میگیم حالت فوکوس.
فوکوس یا Focus یکی از شبه کلاس های CSS می باشد که با استفاده از آن میتوان لحظه کلیک ( فوکوس ) شدن یک عنصر را مشخص کرد.
مثال شماره ۱
1 2 3 4 5 6 7 8 |
<style> input[type="text"]:focus{ background-color:#2196F3; color:#fff; } </style> |
قرار دادن عکس / تصویر در تگ Input
در این مثال میخوایم با استفاده از ویژگی background-image
یک تصویر / عکس را در پس زمینه تگ Input قرار دهیم، در صورت تمایل میتوانید آموزش کامل کار با ویژگی background-image را مشاهده نمایید.
مثال شماره ۱ : قرار دادن عکس در موقعیت خاص
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> |
متحرک سازی تگ 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> |
ایجاد یک فرم واکنش گرا یا ( Responsive )
اصلا واکنش گرا یا Responsive یعنی چه ؟! واکنش گرایی یعنی اینکه یک صفحه وب بتونه در دستگاهای مختلف مثله ( تبلت ، گوشی های موبایل ) به بهترین حالت ممکن نمایش داده شود.
در مثال بالا ممکن است برخی حالت ها یا اینجوری بگم برخی از دستورات را ببینید که براتون کمی پیچیده و سخت بنظر بیایند ولی اصلا نگران نباشید، این یک مثال کلی است که یک فرم واکنش گرا را نشان میدهد.
بیشتر بخوانید:
دیدگاهتان را بنویسید