إنشاء واجهة مستخدم باستخدام HTML وJavaScript

إنشاء واجهة مستخدم تفاعلية وجذابة باستخدام HTML وJavaScript هو أساس تطوير الويب الأمامي. HTML يوفر الهيكل، بينما JavaScript يضيف التفاعلية والديناميكية للصفحات. سنستعرض كيفية إنشاء واجهة مستخدم بسيطة تشمل نموذج تسجيل دخول وقائمة تنقل.

الخطوة 1: إنشاء الهيكل باستخدام HTML

أولًا، سنقوم بإنشاء ملف HTML يحتوي على نموذج لتسجيل الدخول وقائمة تنقل.

مثال على ملف HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form id="loginForm">
            <h2>Login</h2>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>

            <button type="submit">Login</button>
        </form>
    </main>
    <script src="script.js"></script>
</body>
</html>

الخطوة 2: تصميم واجهة المستخدم باستخدام CSS

لجعل واجهة المستخدم أكثر جاذبية، نحتاج إلى إضافة بعض التصميم باستخدام CSS. يمكن وضع CSS في ملف منفصل وربطه بالملف HTML.

مثال على ملف CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header nav ul {
    list-style: none;
    background-color: #333;
    text-align: center;
    padding: 0;
}

header nav ul li {
    display: inline;
}

header nav ul li a {
    text-decoration: none;
    color: white;
    padding: 15px 20px;
    display: inline-block;
}

form {
    background: white;
    padding: 20px;
    margin: 50px auto;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="password"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 10px 0;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #449d44;
}

الخطوة 3: إضافة التفاعلية باستخدام JavaScript

JavaScript يُستخدم لإضافة التفاعلية لنموذج تسجيل الدخول. يمكننا منع النموذج من إرسال البيانات بشكل افتراضي وإجراء التحقق من البيانات أ

ولاً.

مثال على ملف JavaScript (script.js):

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    console.log('Username:', username, 'Password:', password);

    // هنا يمكن إضافة التحقق من صحة البيانات أو إرسالها إلى الخادم
});

خلاصة

إنشاء واجهة مستخدم باستخدام HTML وJavaScript يتيح للمطورين بناء تطبيقات ويب تفاعلية وجذابة. من خلال الجمع بين هياكل HTML، تصاميم CSS، وبرمجيات JavaScript، يمكن تطوير تجربة مستخدم غنية وممتعة.