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

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

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

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

• اعتبارسنجی ورودی های کاربر (مثلاً بررسی صحت ایمیل یا شماره تلفن)
• نمایش و پنهان کردن فیلدها بر اساس انتخاب کاربر
• ارسال اطلاعات فرم به صورت آسنکرون (بدون بارگذاری مجدد صفحه)
• ارائه بازخورد فوری به کاربر
• بهبود تجربه کاربری و افزایش نرخ تبدیل

مقدمات JavaScript

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

• متغیرها و انواع داده
• عملگرها
• ساختارهای کنترلی (if، else، switch)
• حلقه ها (for، while)
• توابع
• DOM (Document Object Model)
• رویدادها (events)

ایجاد یک فرم HTML ساده

ابتدا یک فرم HTML ساده ایجاد می کنیم. این فرم شامل فیلدهای نام، ایمیل و پیام است.

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

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

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

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

اعتبارسنجی فرم با JavaScript

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

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

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

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

   let errors = [];

   if (name === '') {
    errors.push('لطفاً نام خود را وارد کنید.');
   }

   if (email === '') {
    errors.push('لطفاً ایمیل خود را وارد کنید.');
   } else if (!isValidEmail(email)) {
    errors.push('ایمیل وارد شده معتبر نیست.');
   }

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

   if (errors.length > 0) {
    alert(errors.join('\
')); // نمایش خطاها
   } else {
    alert('فرم با موفقیت ارسال شد!'); // ارسال فرم
    // در اینجا می توانید کد مربوط به ارسال فرم به سرور را قرار دهید
   }
  });

  function isValidEmail(email) {
   // یک تابع ساده برای اعتبارسنجی ایمیل
   const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
   return emailRegex.test(email);
  }
 </script>
            
        

در این کد، ابتدا فرم را با استفاده از `document.getElementById()` انتخاب می کنیم. سپس یک رویداد `submit` به فرم اضافه می کنیم. هنگامی که کاربر دکمه ارسال را کلیک می کند، این رویداد فعال می شود. ما از `event.preventDefault()` برای جلوگیری از ارسال فرم به صورت پیش فرض استفاده می کنیم. سپس، مقدار هر فیلد را دریافت کرده و اعتبارسنجی می کنیم. در صورت وجود خطا، یک پیام خطا نمایش می دهیم. در غیر این صورت، یک پیام موفقیت نمایش می دهیم و می توانیم کد مربوط به ارسال فرم به سرور را قرار دهیم.

نمایش و پنهان کردن فیلدها

گاهی اوقات، می خواهید فیلدهایی را بر اساس انتخاب کاربر نمایش یا پنهان کنید. به عنوان مثال، اگر کاربر گزینه "دارای حساب کاربری" را انتخاب کند، فیلدهای مربوط به ورود به سیستم را نمایش می دهید. در غیر این صورت، فیلدهای مربوط به ثبت نام را نمایش می دهید.

            
 <form id="myForm2">
  <label for="accountType">نوع حساب:</label>
  <select id="accountType" name="accountType">
   <option value="existing">دارای حساب کاربری</option>
   <option value="new">حساب جدید</option>
  </select><br><br>

  <div id="loginFields" style="display: none;">
   <label for="username">نام کاربری:</label>
   <input type="text" id="username" name="username"><br><br>

   <label for="password">رمز عبور:</label>
   <input type="password" id="password" name="password"><br><br>
  </div>

  <div id="registerFields">
   <label for="newUsername">نام کاربری جدید:</label>
   <input type="text" id="newUsername" name="newUsername"><br><br>

   <label for="newPassword">رمز عبور جدید:</label>
   <input type="password" id="newPassword" name="newPassword"><br><br>
  </div>

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

 <script>
  const accountType = document.getElementById('accountType');
  const loginFields = document.getElementById('loginFields');
  const registerFields = document.getElementById('registerFields');

  accountType.addEventListener('change', function() {
   if (accountType.value === 'existing') {
    loginFields.style.display = 'block';
    registerFields.style.display = 'none';
   } else {
    loginFields.style.display = 'none';
    registerFields.style.display = 'block';
   }
  });
 </script>
            
        

در این کد، ابتدا فیلد `select` و دو `div` مربوط به فیلدهای ورود و ثبت نام را انتخاب می کنیم. سپس یک رویداد `change` به فیلد `select` اضافه می کنیم. هنگامی که کاربر یک گزینه را انتخاب می کند، این رویداد فعال می شود. اگر کاربر گزینه "دارای حساب کاربری" را انتخاب کند، فیلدهای ورود به سیستم نمایش داده می شوند و فیلدهای ثبت نام پنهان می شوند. در غیر این صورت، فیلدهای ورود به سیستم پنهان می شوند و فیلدهای ثبت نام نمایش داده می شوند.

ارسال فرم به صورت آسنکرون (AJAX)

به جای بارگذاری مجدد صفحه پس از ارسال فرم، می توانید از AJAX (Asynchronous JavaScript and XML) برای ارسال فرم به صورت آسنکرون استفاده کنید. این کار باعث بهبود تجربه کاربری می شود.

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

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

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

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

 <script>
  const form3 = document.getElementById('myForm3');

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

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

   const formData = new FormData();
   formData.append('name', name);
   formData.append('email', email);
   formData.append('message', message);

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

در این کد، از `fetch` API برای ارسال فرم به صورت آسنکرون استفاده می کنیم. ابتدا یک شیء `FormData` ایجاد می کنیم و مقادیر فیلدها را به آن اضافه می کنیم. سپس یک درخواست `POST` به آدرس `/submit-form.php` ارسال می کنیم. پس از دریافت پاسخ از سرور، آن را نمایش می دهیم.

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

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

همین امروز با ما تماس بگیرید و از مشاوره رایگان ما بهره مند شوید! 09190994063 - 09376846692