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

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

چرا JavaScript برای فرم ها؟

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

• اعتبارسنجی داده ها (Validation): بررسی کنید که داده های وارد شده توسط کاربر معتبر و درست باشند.
• بهبود تجربه کاربری: با نمایش پیام های خطا و راهنمایی های تعاملی، تجربه کاربری را بهبود ببخشید.
• ارسال داده ها به سرور: اطلاعات فرم را به صورت آسنکرون (بدون بارگذاری مجدد صفحه) به سرور ارسال کنید.
• انجام محاسبات: محاسبات ساده و پیچیده را بر روی داده های فرم انجام دهید.

مراحل ساخت یک فرم ساده با JavaScript

1. ایجاد ساختار HTML

ابتدا باید ساختار HTML فرم خود را ایجاد کنید. به عنوان مثال، یک فرم ساده با فیلدهای نام، ایمیل و پیام:

        
<form id="myForm">
    <label for="name">نام:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">ایمیل:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="message">پیام:</label><br>
    <textarea id="message" name="message"></textarea><br><br>

    <button type="submit">ارسال</button>
</form>

<p id="result"></p>
        
    

2. افزودن JavaScript برای اعتبارسنجی

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

        
<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault(); // جلوگیری از ارسال پیش فرض فرم

        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var message = document.getElementById("message").value;
        var result = document.getElementById("result");

        if (name === "") {
            result.textContent = "لطفاً نام خود را وارد کنید.";
            result.style.color = "red";
            return;
        }

        if (email === "") {
            result.textContent = "لطفاً ایمیل خود را وارد کنید.";
            result.style.color = "red";
            return;
        }

        // اعتبارسنجی ایمیل با استفاده از یک عبارت منظم
        var emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
        if (!emailRegex.test(email)) {
            result.textContent = "ایمیل نامعتبر است.";
            result.style.color = "red";
            return;
        }

        // اگر همه چیز درست بود
        result.textContent = "فرم با موفقیت ارسال شد!";
        result.style.color = "green";

        // در اینجا می توانید کد ارسال داده به سرور را اضافه کنید
    });
</script>
        
    

3. ارسال داده ها به سرور (اختیاری)

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

        
<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault(); // جلوگیری از ارسال پیش فرض فرم

        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var message = document.getElementById("message").value;
        var result = document.getElementById("result");

        if (name === "") {
            result.textContent = "لطفاً نام خود را وارد کنید.";
            result.style.color = "red";
            return;
        }

        if (email === "") {
            result.textContent = "لطفاً ایمیل خود را وارد کنید.";
            result.style.color = "red";
            return;
        }

        // اعتبارسنجی ایمیل با استفاده از یک عبارت منظم
        var emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
        if (!emailRegex.test(email)) {
            result.textContent = "ایمیل نامعتبر است.";
            result.style.color = "red";
            return;
        }

         var xhr = new XMLHttpRequest();
        xhr.open("POST", "your-server-endpoint", true); // جایگزین کنید
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onload = function() {
            if (xhr.status === 200) {
                result.textContent = "فرم با موفقیت ارسال شد!";
                result.style.color = "green";
            } else {
                result.textContent = "خطا در ارسال فرم.";
                result.style.color = "red";
            }
        };

        xhr.send(JSON.stringify({name:name,email:email,message:message}));

    });
</script>
        
    

توجه داشته باشید که باید `your-server-endpoint` را با آدرس واقعی سرور خود جایگزین کنید و منطق سمت سرور را برای پردازش داده ها پیاده سازی کنید.

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

نیاز به کمک در زمینه سئو و توسعه وب دارید؟

ساخت فرم های زیبا و کارآمد تنها بخشی از یک وب سایت موفق است. اگر به دنبال بهبود سئو سایت خود و جذب مخاطبان بیشتر هستید، با ما تماس بگیرید! ما با ارائه خدمات سئو حرفه ای و توسعه وب سایت های مدرن، به شما کمک می کنیم تا به اهداف خود برسید.

با ما تماس بگیرید: 09190994063 - 09376846692