میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

فرم ها (Forms) در CSS

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

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

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

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

input[type=Element_Name]

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

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

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

 

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

 

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

 


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

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

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

مثال شماره ۱

 

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

 

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

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

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

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

 

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

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


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

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

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

 

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

در مثال بالا با کلیک بر روی input عرض input در عرض ۴٫ تغغیر خواهد کرد


امیدواریم آموزش فرم ها (Forms) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssforms cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsفرم ها (Forms) در CSSفرم ها در cssکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟