آموزش JavaScript برای ساخت فرم های ساده سایت

در این آموزش، نحوه ساخت فرم های ساده وب سایت با استفاده از جاوااسکریپت را به صورت گام به گام یاد خواهید گرفت. ما از HTML برای ساختار فرم و از JavaScript برای افزودن قابلیت های تعاملی و اعتبارسنجی استفاده خواهیم کرد.

مقدمه: چرا JavaScript برای فرم ها مهم است؟

فرم ها یکی از اجزای اساسی هر وب سایتی هستند. آن ها به کاربران اجازه می دهند تا اطلاعات خود را وارد کنند، نظرات خود را ثبت کنند، و با وب سایت تعامل داشته باشند. جاوااسکریپت نقش مهمی در بهبود تجربه کاربری فرم ها ایفا می کند:

• اعتبارسنجی داده ها: بررسی کنید که اطلاعات وارد شده توسط کاربر صحیح و معتبر باشد.
• ارائه بازخورد فوری: به کاربر اطلاع دهید که آیا اطلاعات را به درستی وارد کرده اند یا خیر.
• بهبود تعامل: افزودن قابلیت های تعاملی مانند تکمیل خودکار و نمایش پیام های پویا.
• ارسال داده ها به سرور: ارسال اطلاعات فرم به سرور برای پردازش.

گام اول: ساختار HTML فرم

ابتدا باید ساختار HTML فرم خود را ایجاد کنیم. یک فرم ساده می تواند شامل فیلدهای زیر باشد:

• نام و نام خانوادگی
• ایمیل
• پیام

کد HTML زیر را در نظر بگیرید:

        
            <form id="myForm" style="margin-bottom: 20px;">
                <label for="name" style="display: block; margin-bottom: 5px;">نام و نام خانوادگی:</label>
                <input type="text" id="name" name="name" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px;">

                <label for="email" style="display: block; margin-bottom: 5px;">ایمیل:</label>
                <input type="email" id="email" name="email" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px;">

                <label for="message" style="display: block; margin-bottom: 5px;">پیام:</label>
                <textarea id="message" name="message" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; height: 100px;"></textarea>

                <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1em;">ارسال</button>
            </form>
        
    

گام دوم: افزودن JavaScript برای اعتبارسنجی

حالا باید JavaScript را برای اعتبارسنجی فیلدها اضافه کنیم. می خواهیم مطمئن شویم که:

• نام و نام خانوادگی خالی نباشد.
• ایمیل معتبر باشد.
• پیام خالی نباشد.

کد JavaScript زیر را به صفحه HTML خود اضافه کنید (ترجیحاً قبل از تگ </body>):

        
            <script>
                const form = document.getElementById('myForm');

                form.addEventListener('submit', function(event) {
                    event.preventDefault(); // جلوگیری از ارسال فرم به صورت پیش فرض

                    const name = document.getElementById('name').value.trim();
                    const email = document.getElementById('email').value.trim();
                    const message = document.getElementById('message').value.trim();

                    let isValid = true;

                    if (name === '') {
                        alert('لطفاً نام و نام خانوادگی خود را وارد کنید.');
                        isValid = false;
                    }

                    if (email === '') {
                        alert('لطفاً ایمیل خود را وارد کنید.');
                        isValid = false;
                    } else if (!isValidEmail(email)) {
                        alert('لطفاً یک ایمیل معتبر وارد کنید.');
                        isValid = false;
                    }

                    if (message === '') {
                        alert('لطفاً پیام خود را وارد کنید.');
                        isValid = false;
                    }

                    if (isValid) {
                        alert('فرم با موفقیت ارسال شد!');
                        // اینجا می توانید کد ارسال فرم به سرور را اضافه کنید
                    }
                });

                function isValidEmail(email) {
                    const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
                    return emailRegex.test(email);
                }
            </script>
        
    

توضیحات کد JavaScript

• document.getElementById('myForm'): فرم را با استفاده از ID آن پیدا می کند.
• form.addEventListener('submit', function(event) { ... }): یک رویداد listener به فرم اضافه می کند که هنگام ارسال فرم اجرا می شود.
• event.preventDefault(): از ارسال فرم به صورت پیش فرض جلوگیری می کند.
• name.trim(): فضاهای خالی ابتدا و انتهای رشته را حذف می کند.
• isValidEmail(email): تابعی که با استفاده از regex یک ایمیل معتبر را بررسی می کند.
• alert('فرم با موفقیت ارسال شد!'): در صورت معتبر بودن فرم، یک پیام موفقیت نمایش می دهد.

گام سوم: ارسال داده ها به سرور (اختیاری)

برای ارسال داده ها به سرور، می توانید از AJAX استفاده کنید. کد زیر یک مثال ساده از نحوه ارسال داده ها با استفاده از AJAX است:

        
            <script>
                // ... کد اعتبارسنجی قبلی ...

                if (isValid) {
                    const formData = new FormData(form);

                    fetch('/submit-form.php', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.text())
                    .then(data => {
                        alert(data); // نمایش پاسخ سرور
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('خطا در ارسال فرم.');
                    });
                }
            </script>
        
    

در این مثال، داده های فرم با استفاده از FormData جمع آوری می شوند و سپس با استفاده از fetch به آدرس /submit-form.php ارسال می شوند. توجه داشته باشید که باید یک فایل submit-form.php در سرور خود داشته باشید که داده ها را دریافت و پردازش کند.

سوالات متداول (FAQ)

نتیجه گیری

در این آموزش، نحوه ساخت فرم های ساده وب سایت با استفاده از HTML و JavaScript را یاد گرفتید. شما می توانید این دانش را برای ساخت فرم های پیچیده تر و افزودن قابلیت های تعاملی بیشتر به وب سایت خود استفاده کنید.

آیا به دنبال بهبود سئو وب سایت خود هستید؟ با ما تماس بگیرید: 09190994063 - 09376846692