سی ایس ایس فرم
- پچھلے پیج سی ایس ایس پراپرٹی انتخاب کنندگان
- آئندہ پیج سی ایس ایس شمارش
CSS کی مدد سے، HTML فرم کی نظر انداز میں بہت سے بہتریاں لائی جاسکتی ہیں:
انٹرپوٹ فیلڈ کا استایل سیٹ کریں
استفاده کنید width کو استعمال کرکے انٹرپوٹ فیلڈ کی چوڑائی طے کریں
مثال
input {
width: 100%;
}
مذکورہ مثال، تمام <input> عناصر کے لئے اہم ہے۔ اگر صرف کسی خاص انٹرپوٹ کی نوعیت کا استایل سیٹ کرنا چاہئیں تو، آپ کو اپنے منتخب کی ویژگی کا استعمال کریں:
input[type=text]- صرف متن والا فیلڈ منتخب کریںinput[type=password]- صرف پاسورڈ والا فیلڈ منتخب کریںinput[type=number]- صرف نمبر والا فیلڈ منتخب کریں- وغیرہ...
پینلنگ انٹرپوٹ فیلڈ
استفاده کنید padding کو استعمال کرکے، انٹرپوٹ فیلڈ میں خالی جگہ اضافہ کریں
توضیح:اگر بہت سے انٹرپوٹ فیلڈز موجود ہیں تو، آپ کو ممکن ہوگا کہ آپ کو بیرونی پینلنگ کو بڑھانے کی ضرورت ہوگی تاکہ ان کے باہر بہت سے فضائیں کا حصول کیا جاسکے:
مثال
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
توجہ دیں، ہم نے box-sizing کو فیکٹری سیٹ کریں border-boxجیسا کہ اس طرح سے، عناصر کی کل چوڑائی اور اونچائی میں، پینلنگ (پادھ) اور فینل بوردر شامل کی جاتی ہیں۔
آپ کا استعمال کریں CSS بکس سائزنگ اس باب میں سیکھنے کا آغاز کریں box-sizing کا ویژگی کا مزید معلومات
بوردر والا انٹرپوٹ فیلڈ
آپ کا استعمال کریں border کو استعمال کرکے بوردر کی فطرت اور رنگ بدل سکتا ہیں، اور border-radius کو استعمال کرکے بوردر کا کونوئر دکھایا جاسکتا ہے:
مثال
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
اگر صرف نیچل بوردر چاہئیں تو border-bottom کوئی ویژگی:
مثال
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
رنگی انٹرپوٹ فیلڈ
آپ کا استعمال کریں background-color کو استعمال کرکے انٹرپوٹ فیلڈ پر پس منظر کا رنگ دکھایا جاسکتا ہے، اور color کو استعمال کرکے متن کا رنگ بدل سکتا ہیں:
مثال
input[type=text] {
background-color: #3CBC8D;
color: white;
}
جب ان کا فوجوس کیا جاتا ہے تو
جیب کئی براوزرز کی صورت میں، کسی انٹرپوٹ فیلڈ کو فوجوس کیا جاتا ہے تو ان کے اطراف میں نیلا اور دائرہ دیکھنے کو ملتی ہے۔ آپ ان انٹرپوٹ فیلڈ پر outline: none; اس رجحان کو ختم کرنے کے لئے استعمال کیا جاتا ہے。
استفاده کنید :focus چونسکتار کا استایل جیسی کا مقام آپنا رکھ سکتا ہے جب وہ انٹرپوٹ فیلڈ پر فوجوس کیا جاتا ہے:
مثال 1
input[type=text]:focus {
background-color: lightblue;
}
لطفاً در فیلد متنی کلیک کنید:
مثال 2
input[type=text]:focus {
border: 3px solid #555;
}
لطفاً در فیلد متنی کلیک کنید:
ورودیهای با آیکون/تصویر
اگر میخواهید در فیلد ورودی آیکون/تصویر قرار دهید، از background-image ویژگی و آن را با background-position ویژگیها با یکدیگر تنظیم شوند. همچنین توجه داشته باشید که ما یک حاشیه چپ بزرگتر (padding-left) اضافه کردهایم تا فضای آیکون را فراهم کنیم:
مثال
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
ورودیهای جستجو با انیمیشن
در این مثال از CSS transition ویژگی برای تنظیم تغییرات عرض فیلدهای ورودی در حالت تمرکز با انیمیشن تنظیم میشود. بعداً، در CSS تبدیل در فصل بعدی بیشتر در مورد transition دانستن ویژگیها.
مثال
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
طراحی شکل فیلدهای متنی را تنظیم کنید
توضیح:استفاده کنید resize این ویژگی جلوگیری از تغییر اندازه textareas را میکند (بازدارنده از تغییر اندازه در گوشههای پایین سمت راست):
مثال
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
طراحی شکل منوهای انتخابی را تنظیم کنید
مثال
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
طراحی شکل ورودی را تنظیم کنید
مثال
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* تذکرہ: width: 100% استعمال کرکے پورا پتھر دکھانچہ بنائیں */
CSS کا دکھانچہ کا استایل بنانے کا بارے میں مزید معلومات ملنے کے لئے اپنے درس CSS دکھانچہ درس
ریسپانسیو منو
TIY ایڈیٹر ویندوز کا سائز بدل دیئے اور اثرات دیکھئے جو اسکریپٹ کا سائز کم سے کم 600 پیکسل تک ہو تو دو ستون سمت چپ سمت کی طرح ساتھ ساتھ نہ کہ سمت بالا سمت نیچی کی طرح ساتھ ساتھ چھپ جائیں گے۔
اعلیٰ: اگلے مثال میں استعمال کیا جاتا ہے میڈیا کوئری ریسپانسیو فارم بنائیں جو آئندہ فصلی میں زیادہ معلومات مل جائیں گی۔
- پچھلے پیج سی ایس ایس پراپرٹی انتخاب کنندگان
- آئندہ پیج سی ایس ایس شمارش
