جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگاننحوه کار با فرم ها در CSS

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

3 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
265 بازدید
css

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

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

فرم ها در CSS

فهرست عناوین

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

ما در سری آموزش های قدم به قدم زبان 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 یعنی چه ؟! واکنش گرایی یعنی اینکه یک صفحه وب بتونه در دستگاهای مختلف مثله ( تبلت ، گوشی های موبایل ) به بهترین حالت ممکن نمایش داده شود.

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

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

  • آموزش کار با جداول در CSS
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
  • دانلود افزونه فرم ساز گرویتی فرمز نسخه 2.5.7.3 | Gravity Forms
  • آموزش کار با عناصر Block و Inline در CSS
  • راهنمای قرار دادن نقشه گوگل در سایت
  • آموزش رایگان HTML مقدماتی تا پیشرفته
اشتراک گذاری:
برچسب ها: CSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش رایگان html همیارمنفرم ها در CSSکار با فرم ها یا Forms در CSSنحوه استایل دادن به تگ Input در فرم هانحوه کار با فرم ها یا Forms در CSS
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

لوگو ادمین سایت

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

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

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

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

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

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

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

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

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

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت