كيفية إنشاء قائمة منسدلة باستخدام HTML: دليل شامل
محتويات
تُعد القوائم المنسدلة من العناصر الأساسية في تصميم واجهات المستخدم الحديثة، فهي تسهم في تنظيم المحتوى وتقديم خيارات متعددة للمستخدمين بشكل مدمج ومرتب. في هذا المقال، سنتناول كيفية إنشاء قائمة منسدلة باستخدام HTML، وسنتعرف على بعض الأمثلة والتقنيات لتحسين تجربة المستخدم.
ما هي القائمة المنسدلة؟
القائمة المنسدلة هي عنصر واجهة المستخدم الذي يُظهر قائمة من الخيارات عند النقر عليها أو تمرير المؤشر فوقها. تُستخدم في نماذج الإدخال، وتحديد الفئات، واختيارات المستخدم في التطبيقات والمواقع الإلكترونية.
إنشاء قائمة منسدلة بسيطة باستخدام HTML
لإنشاء قائمة منسدلة بسيطة، نستخدم عنصر <select> مع عناصر <option>. فيما يلي نموذج أساسي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>قائمة منسدلة بسيطة</title>
</head>
<body>
<form>
<label for="fruits">اختر فاكهة:</label>
<select id="fruits" name="fruits">
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="cherry">كرز</option>
<option value="date">تمر</option>
</select>
</form>
</body>
</html>
تحسين القائمة المنسدلة باستخدام CSS
لتحسين مظهر القائمة المنسدلة، يمكننا استخدام CSS لتخصيص التصميم. يمكننا تغيير الألوان، والخطوط، والأبعاد، والهوامش لتتناسب مع تصميم الموقع:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>قائمة منسدلة بتصميم مخصص</title>
<style>
body {
font-family: Arial, sans-serif;
}
select {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
font-size: 16px;
}
select:focus {
border-color: #4a90e2;
outline: none;
}
</style>
</head>
<body>
<form>
<label for="fruits">اختر فاكهة:</label>
<select id="fruits" name="fruits">
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="cherry">كرز</option>
<option value="date">تمر</option>
</select>
</form>
</body>
</html>
إضافة قائمة منسدلة متعددة الخيارات
يمكننا السماح للمستخدمين باختيار أكثر من خيار من القائمة المنسدلة عن طريق إضافة خاصية multiple لعنصر <select>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>قائمة منسدلة متعددة الخيارات</title>
<style>
select {
width: 200px;
height: 150px; /* لتناسب قائمة الخيارات المتعددة */
}
</style>
</head>
<body>
<form>
<label for="fruits">اختر فواكه (يمكن اختيار أكثر من واحدة):</label>
<select id="fruits" name="fruits" multiple>
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="cherry">كرز</option>
<option value="date">تمر</option>
</select>
</form>
</body>
</html>
استخدام JavaScript لتغيير محتويات القائمة المنسدلة
يمكنك استخدام JavaScript لتغيير محتويات القائمة المنسدلة بناءً على تفاعل المستخدم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تغيير محتويات القائمة المنسدلة باستخدام JavaScript</title>
</head>
<body>
<form>
<label for="category">اختر فئة:</label>
<select id="category" name="category" onchange="updateOptions()">
<option value="fruits">فاكهة</option>
<option value="vegetables">الخضروات</option>
</select>
<label for="items">اختر عنصر:</label>
<select id="items" name="items">
<!-- سيتم ملؤها باستخدام JavaScript -->
</select>
</form><script>
function updateOptions() {
var category = document.getElementById('category').value;
var items = document.getElementById('items');
items.innerHTML = ''; // مسح الخيارات السابقة
var options = [];
if (category === 'fruits') {
options = ['تفاح', 'موز', 'كرز', 'تمر'];
} else if (category === 'vegetables') {
options = ['جزر', 'بطاطس', 'طماطم', 'خيار'];
}
options.forEach(function(option) {
var opt = document.createElement('option');
opt.value = option;
opt.textContent = option;
items.appendChild(opt);
});
}
</script>
</body>
</html>
؟.jpg)
.png)
