این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با فرم ها یا Forms در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فرم ها یا Forms در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با فرم ها یا Forms در CSS
ما در سری آموزش های قدم به قدم زبان HTML بطور کامل با آموزش کار با فرم ها در HTML آشنا شدیم که در صورت تمایل میتوانید با کلیک بروی لینک زیر این آموزش را مشاهده نمایید.
آموزش کار با فرم ها یا Forms در HTML را مشاهده نمایید.
همونطور که میدونید ما با استفاده از زبان HTML میتونیم عناصر رو ایجاد کنیم، یعنی اینکه مثلا اگه یک فرم ورود بخوایم داشته باشیم باید با استفاده از تگ های Form و Input و دیگر تگ های مرتبط با فرم ها، این فرم را ایجاد کنیم، بعدش دیگه کلا هرچیزی در حوزه استایل باشه باید از زبان CSS استفاده کنیم.
در ادامه میخوایم با موارد زیر کار کنیم :
- نحوه فراخوانی Input ها در CSS
- تنظیم رنگ زمینه Input
- تنظیم حالت فوکوس ( لحظه کلیک بروی Input )
- تنظیم تصویر زمینه Input
Free-Learn
نحوه فراخوانی Input ها در CSS
اگه آموزش های زبان HTML رو یادتون باشه میدونید که تگ Input دارای نوع ( Type ) های مختلفی می باشد، ( مثلا نوع متنی ، پسورد ، ایمیل و… ) حال ما در زبان CSS باید بتونیم هریک از این نوع هارو انتخاب کنیم و حالا بعدش مثلا براش استایل تعریف کنیم.
شکل کلی برای انتخاب نوع Input در CSS
|
1 |
input[type = Type_Name] |
که بجای Type_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:3px 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:3px solid #000; } </style> |
Free-Learn
تنظیم رنگ زمینه Input
در جلسات قبل از سری آموزش های مقدماتی زبان CSS ما کار با پس زمینه ها یا Backgrounds در CSS را بطور کامل یاد گرفتیم، که در صورت تمایل میتوانید از طریق لینک زیر این آموزش را مشاهده نمایید.
پیشنهاد میکنم حتما آموزش کار با پس زمینه ها یا Backgrounds در CSS را مشاهده نمایید.
مثال شماره ۱ : مشخص کردن رنگ زمینه تگ Input
|
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 را مشاهده نمایید )
مثال شماره ۱ : با کلیک بروی Input اندازه عرض %۱۰۰ میشه
|
1 2 3 4 5 6 |
input[type="text"]:focus{ background-color:#2196F3; color:#fff; border:2px solid #fff; width:100%; } |
Free-Learn
تنظیم تصویر زمینه Input
در این مثال میخوایم با استفاده از ویژگی background-image یک تصویر زمینه برای Input مشخص نماییم.
پیشنهاد میکنم آموزش کار با پس زمینه ها در CSS را مشاهده نمایید.
مثال شماره ۱ : قرار دادن عکس در موقعیت خاص ( مثلا در سمت چپ )
|
1 2 3 4 5 |
input[type=text]{ background-image:url("files/search-icon.png"); background-position:10px 12px; background-repeat:no-repeat; } |
مثال شماره ۲ : گذاشتن تصویر در زمینه Input بصورت کامل
|
1 2 3 |
input[type=text]{ background-image:url("files/bg-input.jpg"); } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : یک فرم ساده ورود به سایت
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <div class="MyBox"> <h2 class="login_title">فرم ورود به سایت</h2> <form action="#"> <label for="Email">آدرس ایمیل</label> <input type="text" id="Email" name="UserEmail" placeholder="Email@gmail.com"> <label for="Password">رمز عبور</label> <input type="password" id="Password" name="UserPassword"> <input type="submit" value="ورود"> </form> </div> </body> |
