يمكن تحسين مظهر نماذج HTML بشكل كبير باستخدام CSS. إليك كيفية البدء:
تنسيق حقول الإدخال
- خاصية العرض (width):
تستخدم خاصية width لتحديد عرض حقل الإدخال. على سبيل المثال:
input {
width: 100%;
}
في حين أن المثال السابق ينطبق على جميع عناصر <input>, يمكنك استخدام مُحددات السمات (attribute selectors) لاستهداف وتنسيق أنواع معينة من حقول الإدخال:
input[type=text]: سيؤثر هذا المُحدد على حقول النص فقط.input[type=password]: سيؤثر هذا المُحدد على حقول كلمة المرور فقط.input[type=number]: سيؤثر هذا المُحدد على حقول الأرقام فقط.
يمكنك استخدام نفس المنطق لاستهداف أنواع أخرى من حقول الإدخال، مثل email للبريد الإلكتروني، و date للتاريخ، و checkbox لمربعات الاختيار، وهكذا.
ملخص:
تتيح لك مُحددات السمات في CSS استهداف عناصر معينة بناءً على قيم سمة معينة. هذا مفيد لتنسيق أنواع مختلفة من حقول الإدخال بشكل مستقل والحصول على تحكم أكبر في مظهر نموذج HTML الخاص بك.
حقول إدخال مُبطنة (Padded Inputs)
استخدم خاصية padding في CSS لإضافة مسافة داخل حقول النص.
ملاحظة: عند وجود العديد من حقول الإدخال بجوار بعضها البعض، يُوصى باستخدام خاصية margin لإضافة مسافة إضافية خارجها، مما يوفر تحكمًا أفضل في تباعد عناصر النموذج.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
ملاحظة حول خاصية box-sizing
لقد قمنا بتعيين قيمة border-box لخاصية box-sizing. تضمن هذه القيمة احتساب التبطين (padding) والحدود (borders) ضمن العرض والارتفاع الكليين للعنصر.
حقول إدخال محددة (Bordered Inputs)
استخدم خاصية border في CSS لتغيير حجم ولون حد حقول الإدخال. كما يمكنك استخدام خاصية border-radius لإضافة زوايا مستديرة.
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
إضافة حد سفلي فقط إلى حقول الإدخال
إذا كنت ترغب في إضافة حد سفلي فقط إلى حقول الإدخال، يمكنك استخدام خاصية border-bottom في CSS. على سبيل المثال:
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
حقول إدخال ملونة
- الخاصية
background-color:
تُستخدم خاصية background-color لتعيين لون خلفية حقل الإدخال. على سبيل المثال:
input[type=text] {
background-color: #3CBC8D;
color: white;
}
حقول الإدخال عند تفعيلها (Focused Inputs)
- إزالة إطار التحديد الأزرق الافتراضي:
بشكل افتراضي، تضيف بعض المتصفحات إطار تحديد باللون الأزرق حول حقول الإدخال عند تفعيلها (عند النقر عليها). يمكنك إزالة هذا السلوك باستخدام الخاصية outline: none; على حقل الإدخال.
input[type=text]:focus {
background-color: lightblue;
}
input[type=text]:focus {
border: 3px solid #555;
}
حقول إدخال مع أيقونة/صورة
إذا كنت تريد وضع أيقونة أو صورة داخل حقل الإدخال، يمكنك استخدام الخاصيتين التاليتين في CSS:
- الخاصية
background-image:
تُستخدم خاصية background-image لتعيين صورة أو أيقونة كخلفية لحقل الإدخال. على سبيل المثال:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
حقل بحث متحرك
في هذا المثال، نستخدم خاصية transition في CSS لتحريك عرض حقل البحث عند تفعيله (عند النقر عليه). ستتعلم المزيد عن خاصية transition لاحقًا في فصلنا حول انتقالات CSS (CSS Transitions).
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
تنسيق حقول النص المتعددة (Textareas)
نصيحة: استخدم خاصية resize لمنع تغيير حجم حقول النص المتعددة (تعطيل “المقبض” في الركن الأيمن السفلي):
- خاصية
resizeفي CSS تتحكم بإمكانية تغيير حجم عنصر ما من قبل المستخدم. - باستخدام القيمة
resize: none;على حقل النص المتعدد، يمكنك منع المستخدم من تغيير حجمه عن طريق سحب المقبض في الركن الأيمن السفلي.
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 Menus)
تُستخدم قوائم الإختيار (Select Menus) لعرض قائمة من الخيارات للمستخدمين لاختيار واحد منها. يمكنك تخصيص مظهرها باستخدام CSS لتحسين تجربة المستخدم وتناسبها مع تصميم موقعك الويب.
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
تنسيق أزرار الإدخال (Input Buttons)
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
نموذج استجابة للعرض (Responsive Form)
جرب تغيير عرض نافذة المتصفح:
سترى أن شكل نموذج يتغير اعتمادًا على عرض النافذة. فعندما يكون عرض الشاشة أقل من 600 بكسل، سيتم ترتيب حقول النموذج فوق بعضها البعض بدلاً من عرضها جنبًا إلى جنب.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
