تحسين تجربة المستخدم باستخدام Bootstrap في تحقيق تلوين حقول الإدخال

في هذا السياق، يظهر استخدام فئات Bootstrap كـ has-success و has-error كأدوات فعّالة لتعزيز تجربة المستخدم وتوفير إشارات بصرية حول صحة البيانات التي يدخلها المستخدم. عندما يتم إدخال بيانات صحيحة، يمكن تغيير خلفية الحقل إلى لون أخضر باستخدام فئة has-success، وفي حالة بيانات غير صحيحة، يمكن تعيين خلفية الحقل إلى لون أحمر باستخدام فئة has-error.

لتحقيق هذا الهدف، يمكنك استخدام HTML DOM Method بما يُعرف بـ getElementsByClassName() في جافا سكريبت. على سبيل المثال، إذا كان لديك حقل إدخال نصي (text box) وتريد تغيير لون خلفيته بناءً على صحة البيانات، يمكنك استخدام الكود التالي:

html
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>تحديد لون خلفية الحقل بواسطة Bootstrap Classestitle>
    <style>
        /* أسلوب إضافي لتحسين التصميم */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 40px;
        }
    style>
head>
<body>

    <label for="dataInput">البيانات:label>
    <input type="text" id="dataInput" class="form-control">

    <script>
        // احصل على عنصر الإدخال
        var dataInput = document.getElementById("dataInput");

        // مراقبة التغيير في قيمة الإدخال
        dataInput.addEventListener("input", function() {
            // قم بفحص صحة البيانات هنا (يمكنك استبداله بشروطك الخاصة)

            // على سبيل المثال، افترض أن البيانات صحيحة
            var isValidData = true;

            // قم بتحديد الفئة بناءً على صحة البيانات
            if (isValidData) {
                dataInput.classList.remove("has-error");
                dataInput.classList.add("has-success");
            } else {
                dataInput.classList.remove("has-success");
                dataInput.classList.add("has-error");
            }
        });
    script>

body>
html>

في هذا الكود، يتم استخدام Bootstrap CSS لتحسين تصميم الصفحة، ويتم إنشاء حقل إدخال نصي بواسطة وتعيين له فئة Bootstrap form-control. ثم يتم استخدام جافا سكريبت للتحقق من صحة البيانات وتعيين فئات Bootstrap المناسبة (has-success أو has-error) بناءً على الحالة.

المزيد من المعلومات