جدول المحتوى

الاستمارات (Forms) في متصفح الويب وكيفية التعامل معها في جافاسكربت

تُعد الاستمارات (Forms) من أهم العناصر في صفحات الويب الحديثة، إذ تمثل الجسر الأساسي الذي يسمح للمستخدمين بالتفاعل مع الموقع وإرسال البيانات، سواء لتسجيل الدخول، أو الاشتراك، أو تعبئة استبيان، أو تنفيذ عمليات شراء، وغيرها من المهام. من الناحية البرمجية، تأتي لغة JavaScript في مقدمة الأدوات المستخدمة للتحكم بسلوك هذه الاستمارات، التحقق من صحة البيانات، إرسالها عبر الشبكة، والتفاعل مع المستخدم بطريقة ديناميكية.

هذا المقال يعرض شرحًا شاملاً وعميقًا حول الاستمارات في متصفح الويب وكيفية التعامل معها باستخدام JavaScript، متناولاً مختلف الجوانب الفنية والتقنية بدءًا من تركيب الاستمارة الأساسي، وصولاً إلى التحقق المتقدم من صحة البيانات، وإرسالها باستخدام تقنيات حديثة كـ Fetch API وAJAX، مع مراعاة قواعد الكتابة الحديثة وتحسين محركات البحث (SEO).

أولاً: مفهوم الاستمارات في HTML

تُكتب الاستمارات في HTML باستخدام عنصر

. وهي تُستخدم لتجميع مدخلات المستخدمين، ويتم تحديد طريقة الإرسال والوجهة من خلال خصائص هذا العنصر.

البنية الأساسية للاستمارة:

html
<form action="/submit" method="POST">
  <label for="username">اسم المستخدم:label>
  <input type="text" id="username" name="username">

  <label for="email">البريد الإلكتروني:label>
  <input type="email" id="email" name="email">

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

الخصائص الأساسية لعنصر :

الخاصية	الوصف
`action`	تحدد عنوان URL الذي تُرسل إليه البيانات عند الإرسال
`method`	تحدد طريقة الإرسال: `GET` أو `POST`
`enctype`	تحدد ترميز البيانات عند الإرسال، وتُستخدم غالبًا مع الملفات

ثانياً: عناصر إدخال البيانات (Form Controls)

تحتوي الاستمارات على مجموعة من العناصر الخاصة بإدخال البيانات. تختلف هذه العناصر حسب نوع البيانات المطلوبة، وهي تشمل:

بأنواعه المختلفة (text, email, password, checkbox, radio, file, وغيرها)
</code> لإدخال نصوص طويلة</p> </li> <li data-start="1909" data-end="1957"> <p data-start="1911" data-end="1957"><code data-start="1911" data-end="1921"><select></code> مع <code data-start="1925" data-end="1935"><option></code> لاختيار عنصر من قائمة</p> </li> <li data-start="1958" data-end="2008"> <p data-start="1960" data-end="2008"><code data-start="1960" data-end="1970"><button></code> لإرسال الاستمارة أو تنفيذ وظائف محددة</p> </li> </ul> <h3 data-start="2010" data-end="2036"><span class="ez-toc-section" id="%D9%85%D8%AB%D8%A7%D9%84_%D8%B9%D9%84%D9%89_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D9%85%D8%AA%D8%B9%D8%AF%D8%AF%D8%A9"></span>مثال على عناصر متعددة:<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="2038" data-end="2460"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">form</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"text"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"name"</span></span><span> </span><span><span class="hljs-attr">placeholder</span></span><span>=</span><span><span class="hljs-string">"الاسم الكامل"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"email"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"email"</span></span><span> </span><span><span class="hljs-attr">placeholder</span></span><span>=</span><span><span class="hljs-string">"البريد الإلكتروني"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"checkbox"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"subscribe"</span></span><span> </span><span><span class="hljs-attr">checked</span></span><span>> اشترك في النشرة البريدية </span><span><span class="hljs-tag"><<span class="hljs-name">select</span></span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"country"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">option</span></span></span><span> </span><span><span class="hljs-attr">value</span></span><span>=</span><span><span class="hljs-string">"ma"</span></span><span>>المغرب</span><span><span class="hljs-tag"></<span class="hljs-name">option</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">option</span></span></span><span> </span><span><span class="hljs-attr">value</span></span><span>=</span><span><span class="hljs-string">"dz"</span></span><span>>الجزائر</span><span><span class="hljs-tag"></<span class="hljs-name">option</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">option</span></span></span><span> </span><span><span class="hljs-attr">value</span></span><span>=</span><span><span class="hljs-string">"eg"</span></span><span>>مصر</span><span><span class="hljs-tag"></<span class="hljs-name">option</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">select</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">button</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"submit"</span></span><span>>أرسل</span><span><span class="hljs-tag"></<span class="hljs-name">button</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">form</span></span></span><span>> </span></span></code></div></div></pre> <hr data-start="2462" data-end="2465"> <h2 data-start="2467" data-end="2513"><span class="ez-toc-section" id="%D8%AB%D8%A7%D9%84%D8%AB%D8%A7%D9%8B_%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA_%D9%81%D9%8A_JavaScript"></span>ثالثاً: التعامل مع الاستمارات في JavaScript<span class="ez-toc-section-end"></span></h2> <h3 data-start="2515" data-end="2548"><span class="ez-toc-section" id="1_%D8%A7%D9%84%D8%AD%D8%B5%D9%88%D9%84_%D8%B9%D9%84%D9%89_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A9"></span>1. الحصول على عناصر الاستمارة<span class="ez-toc-section-end"></span></h3> <p data-start="2550" data-end="2612">للتعامل مع الاستمارات برمجيًا، يجب أولاً الوصول إليها عبر DOM.</p> <pre class="overflow-visible!" data-start="2614" data-end="2735"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-keyword">const</span></span><span> form = </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'form'</span></span><span>); </span><span><span class="hljs-keyword">const</span></span><span> usernameInput = </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'#username'</span></span><span>); </span></span></code></div></div></pre> <h3 data-start="2737" data-end="2766"><span class="ez-toc-section" id="2_%D8%A7%D8%B9%D8%AA%D8%B1%D8%A7%D8%B6_%D8%A5%D8%B1%D8%B3%D8%A7%D9%84_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A9"></span>2. اعتراض إرسال الاستمارة<span class="ez-toc-section-end"></span></h3> <p data-start="2768" data-end="2890">يمكن استخدام الحدث <code data-start="2787" data-end="2795">submit</code> لاعتراض إرسال الاستمارة وتنفيذ مهام معينة قبل الإرسال أو منع الإرسال تمامًا في حال وجود أخطاء.</p> <pre class="overflow-visible!" data-start="2892" data-end="3096"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span>form.</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'submit'</span></span><span>, </span><span><span class="hljs-keyword">function</span></span><span>(</span><span><span class="hljs-params">event</span></span><span>) { event.</span><span><span class="hljs-title function_">preventDefault</span></span><span>(); </span><span><span class="hljs-comment">// يمنع الإرسال التلقائي</span></span><span> </span><span><span class="hljs-keyword">const</span></span><span> username = usernameInput.</span><span><span class="hljs-property">value</span></span><span>; </span><span><span class="hljs-variable language_">console</span></span><span>.</span><span><span class="hljs-title function_">log</span></span><span>(</span><span><span class="hljs-string">'اسم المستخدم:'</span></span><span>, username); }); </span></span></code></div></div></pre> <h3 data-start="3098" data-end="3140"><span class="ez-toc-section" id="3_%D8%A7%D9%84%D8%AA%D8%AD%D9%82%D9%82_%D9%85%D9%86_%D8%B5%D8%AD%D8%A9_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA_Validation"></span>3. التحقق من صحة البيانات (Validation)<span class="ez-toc-section-end"></span></h3> <p data-start="3142" data-end="3185">يمكن تنفيذ التحقق من صحة البيانات بطريقتين:</p> <h4 data-start="3187" data-end="3218"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AA%D8%AD%D9%82%D9%82_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_%D8%AE%D8%B5%D8%A7%D8%A6%D8%B5_HTML"></span>التحقق باستخدام خصائص HTML<span class="ez-toc-section-end"></span></h4> <pre class="overflow-visible!" data-start="3220" data-end="3261"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"email"</span></span><span> </span><span><span class="hljs-attr">required</span></span><span>> </span></span></code></div></div></pre> <h4 data-start="3263" data-end="3294"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AA%D8%AD%D9%82%D9%82_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_JavaScript"></span>التحقق باستخدام JavaScript<span class="ez-toc-section-end"></span></h4> <pre class="overflow-visible!" data-start="3296" data-end="3580"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span>form.</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'submit'</span></span><span>, </span><span><span class="hljs-keyword">function</span></span><span>(</span><span><span class="hljs-params">event</span></span><span>) { event.</span><span><span class="hljs-title function_">preventDefault</span></span><span>(); </span><span><span class="hljs-keyword">const</span></span><span> email = </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'#email'</span></span><span>).</span><span><span class="hljs-property">value</span></span><span>; </span><span><span class="hljs-keyword">if</span></span><span> (!email.</span><span><span class="hljs-title function_">includes</span></span><span>(</span><span><span class="hljs-string">'@'</span></span><span>)) { </span><span><span class="hljs-title function_">alert</span></span><span>(</span><span><span class="hljs-string">'يرجى إدخال بريد إلكتروني صحيح'</span></span><span>); </span><span><span class="hljs-keyword">return</span></span><span>; } </span><span><span class="hljs-comment">// إرسال البيانات أو تنفيذ منطق آخر</span></span><span> }); </span></span></code></div></div></pre> <hr data-start="3582" data-end="3585"> <h2 data-start="3587" data-end="3631"><span class="ez-toc-section" id="%D8%B1%D8%A7%D8%A8%D8%B9%D8%A7%D9%8B_%D8%A5%D8%B1%D8%B3%D8%A7%D9%84_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_Fetch_API"></span>رابعاً: إرسال البيانات باستخدام Fetch API<span class="ez-toc-section-end"></span></h2> <p data-start="3633" data-end="3748">بدلاً من إرسال البيانات مباشرة عبر الخادم، يمكن استخدام <code data-start="3689" data-end="3698">fetch()</code> لإرسالها بطريقة ديناميكية دون إعادة تحميل الصفحة.</p> <pre class="overflow-visible!" data-start="3750" data-end="4123"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span>form.</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'submit'</span></span><span>, </span><span><span class="hljs-keyword">function</span></span><span>(</span><span><span class="hljs-params">event</span></span><span>) { event.</span><span><span class="hljs-title function_">preventDefault</span></span><span>(); </span><span><span class="hljs-keyword">const</span></span><span> formData = </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">FormData</span></span><span>(form); </span><span><span class="hljs-title function_">fetch</span></span><span>(</span><span><span class="hljs-string">'/submit'</span></span><span>, { </span><span><span class="hljs-attr">method</span></span><span>: </span><span><span class="hljs-string">'POST'</span></span><span>, </span><span><span class="hljs-attr">body</span></span><span>: formData }) .</span><span><span class="hljs-title function_">then</span></span><span>(</span><span><span class="hljs-function"><span class="hljs-params">response</span></span></span><span> => response.</span><span><span class="hljs-title function_">json</span></span><span>()) .</span><span><span class="hljs-title function_">then</span></span><span>(</span><span><span class="hljs-function"><span class="hljs-params">data</span></span></span><span> => { </span><span><span class="hljs-variable language_">console</span></span><span>.</span><span><span class="hljs-title function_">log</span></span><span>(</span><span><span class="hljs-string">'تم الاستلام:'</span></span><span>, data); }) .</span><span><span class="hljs-title function_">catch</span></span><span>(</span><span><span class="hljs-function"><span class="hljs-params">error</span></span></span><span> => { </span><span><span class="hljs-variable language_">console</span></span><span>.</span><span><span class="hljs-title function_">error</span></span><span>(</span><span><span class="hljs-string">'خطأ في الإرسال:'</span></span><span>, error); }); }); </span></span></code></div></div></pre> <hr data-start="4125" data-end="4128"> <h2 data-start="4130" data-end="4171"><span class="ez-toc-section" id="%D8%AE%D8%A7%D9%85%D8%B3%D8%A7%D9%8B_%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_FormData_%D9%84%D8%AC%D9%85%D8%B9_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA"></span>خامساً: استخدام FormData لجمع البيانات<span class="ez-toc-section-end"></span></h2> <p data-start="4173" data-end="4279">تعتبر <code data-start="4179" data-end="4189">FormData</code> واجهة مريحة لإنشاء مجموعات بيانات يمكن إرسالها إلى الخادم، كما أنها تدعم الملفات المرفقة.</p> <pre class="overflow-visible!" data-start="4281" data-end="4371"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-keyword">const</span></span><span> formData = </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">FormData</span></span><span>(form); formData.</span><span><span class="hljs-title function_">append</span></span><span>(</span><span><span class="hljs-string">'token'</span></span><span>, </span><span><span class="hljs-string">'XYZ123'</span></span><span>); </span></span></code></div></div></pre> <p data-start="4373" data-end="4411">يمكنك أيضًا الاطلاع على القيم المخزنة:</p> <pre class="overflow-visible!" data-start="4413" data-end="4512"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-keyword">for</span></span><span> (</span><span><span class="hljs-keyword">let</span></span><span> pair </span><span><span class="hljs-keyword">of</span></span><span> formData.</span><span><span class="hljs-title function_">entries</span></span><span>()) { </span><span><span class="hljs-variable language_">console</span></span><span>.</span><span><span class="hljs-title function_">log</span></span><span>(</span><span><span class="hljs-string">`<span class="hljs-subst">${pair[<span class="hljs-number">0</span></span></span></span><span>]}: </span><span><span class="hljs-subst">${pair[<span class="hljs-number">1</span></span></span><span>]}`); } </span></span></code></div></div></pre> <hr data-start="4514" data-end="4517"> <h2 data-start="4519" data-end="4574"><span class="ez-toc-section" id="%D8%B3%D8%A7%D8%AF%D8%B3%D8%A7%D9%8B_%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1_%D9%88%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9_%D8%A7%D9%84%D8%B1%D8%A7%D8%AC%D8%B9%D8%A9_%D9%84%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85"></span>سادساً: التعامل مع الأخطاء والتغذية الراجعة للمستخدم<span class="ez-toc-section-end"></span></h2> <p data-start="4576" data-end="4673">توفير رسائل تغذية راجعة جيدة عند حدوث خطأ في إدخال البيانات أو أثناء الإرسال يعزز تجربة المستخدم.</p> <pre class="overflow-visible!" data-start="4675" data-end="5112"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span>form.</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'submit'</span></span><span>, </span><span><span class="hljs-keyword">async</span></span><span> </span><span><span class="hljs-keyword">function</span></span><span>(</span><span><span class="hljs-params">event</span></span><span>) { event.</span><span><span class="hljs-title function_">preventDefault</span></span><span>(); </span><span><span class="hljs-keyword">try</span></span><span> { </span><span><span class="hljs-keyword">const</span></span><span> response = </span><span><span class="hljs-keyword">await</span></span><span> </span><span><span class="hljs-title function_">fetch</span></span><span>(</span><span><span class="hljs-string">'/submit'</span></span><span>, { </span><span><span class="hljs-attr">method</span></span><span>: </span><span><span class="hljs-string">'POST'</span></span><span>, </span><span><span class="hljs-attr">body</span></span><span>: </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">FormData</span></span><span>(form) }); </span><span><span class="hljs-keyword">if</span></span><span> (!response.</span><span><span class="hljs-property">ok</span></span><span>) { </span><span><span class="hljs-keyword">throw</span></span><span> </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">Error</span></span><span>(</span><span><span class="hljs-string">'فشل في الاتصال بالخادم'</span></span><span>); } </span><span><span class="hljs-keyword">const</span></span><span> result = </span><span><span class="hljs-keyword">await</span></span><span> response.</span><span><span class="hljs-title function_">json</span></span><span>(); </span><span><span class="hljs-title function_">alert</span></span><span>(</span><span><span class="hljs-string">'تم الإرسال بنجاح'</span></span><span>); } </span><span><span class="hljs-keyword">catch</span></span><span> (error) { </span><span><span class="hljs-title function_">alert</span></span><span>(</span><span><span class="hljs-string">`حدث خطأ: <span class="hljs-subst">${error.message}</span></span></span><span>`); } }); </span></span></code></div></div></pre> <hr data-start="5114" data-end="5117"> <h2 data-start="5119" data-end="5159"><span class="ez-toc-section" id="%D8%B3%D8%A7%D8%A8%D8%B9%D8%A7%D9%8B_%D9%85%D9%82%D8%A7%D8%B1%D9%86%D8%A9_%D8%A8%D9%8A%D9%86_%D8%B7%D8%B1%D9%82_%D8%A5%D8%B1%D8%B3%D8%A7%D9%84_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA"></span>سابعاً: مقارنة بين طرق إرسال البيانات<span class="ez-toc-section-end"></span></h2> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="5161" data-end="5573" class="w-fit min-w-(--thread-content-width)"> <thead data-start="5161" data-end="5236"> <tr data-start="5161" data-end="5236"> <th data-start="5161" data-end="5178" data-col-size="sm">التقنية</th> <th data-start="5178" data-end="5199" data-col-size="sm">يعيد تحميل الصفحة؟</th> <th data-start="5199" data-end="5219" data-col-size="sm">يدعم إرسال ملفات؟</th> <th data-start="5219" data-end="5236" data-col-size="sm">مرونة التفاعل</th> </tr> </thead> <tbody data-start="5316" data-end="5573"> <tr data-start="5316" data-end="5401"> <td data-start="5316" data-end="5339" data-col-size="sm">إرسال مباشر عبر HTML</td> <td data-col-size="sm" data-start="5339" data-end="5361">نعم</td> <td data-col-size="sm" data-start="5361" data-end="5382">نعم</td> <td data-col-size="sm" data-start="5382" data-end="5401">محدود</td> </tr> <tr data-start="5402" data-end="5487"> <td data-start="5402" data-end="5425" data-col-size="sm">استخدام AJAX (XHR)</td> <td data-col-size="sm" data-start="5425" data-end="5447">لا</td> <td data-col-size="sm" data-start="5447" data-end="5468">نعم</td> <td data-col-size="sm" data-start="5468" data-end="5487">جيد</td> </tr> <tr data-start="5488" data-end="5573"> <td data-start="5488" data-end="5511" data-col-size="sm">استخدام Fetch API</td> <td data-col-size="sm" data-start="5511" data-end="5533">لا</td> <td data-col-size="sm" data-start="5533" data-end="5554">نعم</td> <td data-col-size="sm" data-start="5554" data-end="5573">ممتاز</td> </tr> </tbody> </table> <div class="sticky end-(--thread-content-margin) h-0 self-end select-none"> <div class="absolute end-0 flex items-end" style="height: 33px;"><span class="" data-state="closed"><button class="bg-token-bg-primary hover:bg-token-bg-tertiary text-token-text-secondary my-1 rounded-sm p-1 transition-opacity group-[:not(:hover):not(:focus-within)]:pointer-events-none group-[:not(:hover):not(:focus-within)]:opacity-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md-heavy"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg></button></span></div> </div> </div> </div> <hr data-start="5575" data-end="5578"> <h2 data-start="5580" data-end="5625"><span class="ez-toc-section" id="%D8%AB%D8%A7%D9%85%D9%86%D8%A7%D9%8B_%D8%A3%D8%B3%D8%A7%D9%84%D9%8A%D8%A8_%D9%85%D8%AA%D9%82%D8%AF%D9%85%D8%A9_%D9%84%D9%84%D8%AA%D8%AD%D9%83%D9%85_%D9%81%D9%8A_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA"></span>ثامناً: أساليب متقدمة للتحكم في الاستمارات<span class="ez-toc-section-end"></span></h2> <h3 data-start="5627" data-end="5664"><span class="ez-toc-section" id="1_%D8%AA%D9%81%D8%B9%D9%8A%D9%84_%D8%AA%D8%B9%D8%B7%D9%8A%D9%84_%D8%A7%D9%84%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1_%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A%D9%8B%D8%A7"></span>1. تفعيل / تعطيل الأزرار تلقائيًا<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="5666" data-end="5862"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-keyword">const</span></span><span> submitButton = form.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'button[type="submit"]'</span></span><span>); usernameInput.</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'input'</span></span><span>, </span><span><span class="hljs-keyword">function</span></span><span> (</span><span><span class="hljs-params"></span></span><span>) { submitButton.</span><span><span class="hljs-property">disabled</span></span><span> = !usernameInput.</span><span><span class="hljs-property">value</span></span><span>.</span><span><span class="hljs-title function_">trim</span></span><span>(); }); </span></span></code></div></div></pre> <h3 data-start="5864" data-end="5897"><span class="ez-toc-section" id="2_%D8%B9%D8%B1%D8%B6_%D8%B1%D8%B3%D8%A7%D8%A6%D9%84_%D8%AE%D8%B7%D8%A3_%D8%A8%D8%AC%D9%88%D8%A7%D8%B1_%D8%A7%D9%84%D8%AD%D9%82%D9%88%D9%84"></span>2. عرض رسائل خطأ بجوار الحقول<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="5899" data-end="6126"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-keyword">function</span></span><span> </span><span><span class="hljs-title function_">showError</span></span><span>(</span><span><span class="hljs-params">input, message</span></span><span>) { </span><span><span class="hljs-keyword">const</span></span><span> errorSpan = </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">createElement</span></span><span>(</span><span><span class="hljs-string">'span'</span></span><span>); errorSpan.</span><span><span class="hljs-property">className</span></span><span> = </span><span><span class="hljs-string">'error-message'</span></span><span>; errorSpan.</span><span><span class="hljs-property">textContent</span></span><span> = message; input.</span><span><span class="hljs-property">parentNode</span></span><span>.</span><span><span class="hljs-title function_">appendChild</span></span><span>(errorSpan); } </span></span></code></div></div></pre> <h3 data-start="6128" data-end="6183"><span class="ez-toc-section" id="3_%D8%A7%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA_%D9%85%D9%86_%D8%A7%D9%84%D8%B3%D9%8A%D8%B1%D9%81%D8%B1_%D9%88%D9%85%D9%84%D8%A1_%D8%A7%D9%84%D8%AD%D9%82%D9%88%D9%84_%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A%D9%8B%D8%A7"></span>3. استرجاع البيانات من السيرفر وملء الحقول تلقائيًا<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="6185" data-end="6396"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-title function_">fetch</span></span><span>(</span><span><span class="hljs-string">'/api/user/123'</span></span><span>) .</span><span><span class="hljs-title function_">then</span></span><span>(</span><span><span class="hljs-function"><span class="hljs-params">res</span></span></span><span> => res.</span><span><span class="hljs-title function_">json</span></span><span>()) .</span><span><span class="hljs-title function_">then</span></span><span>(</span><span><span class="hljs-function"><span class="hljs-params">data</span></span></span><span> => { </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'#username'</span></span><span>).</span><span><span class="hljs-property">value</span></span><span> = data.</span><span><span class="hljs-property">username</span></span><span>; </span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">querySelector</span></span><span>(</span><span><span class="hljs-string">'#email'</span></span><span>).</span><span><span class="hljs-property">value</span></span><span> = data.</span><span><span class="hljs-property">email</span></span><span>; }); </span></span></code></div></div></pre> <hr data-start="6398" data-end="6401"> <h2 data-start="6403" data-end="6467"><span class="ez-toc-section" id="%D8%AA%D8%A7%D8%B3%D8%B9%D8%A7%D9%8B_%D8%AA%D8%AD%D8%B3%D9%8A%D9%86_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA_%D9%88%D9%81%D9%82%D9%8B%D8%A7_%D9%84%D9%85%D8%B9%D8%A7%D9%8A%D9%8A%D8%B1_%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84_Accessibility"></span>تاسعاً: تحسين الاستمارات وفقًا لمعايير الوصول (Accessibility)<span class="ez-toc-section-end"></span></h2> <p data-start="6469" data-end="6583">من المهم جدًا أن تكون الاستمارات قابلة للوصول من قِبل جميع المستخدمين، بما فيهم ذوي الاحتياجات الخاصة. لتحقيق ذلك:</p> <ul data-start="6585" data-end="6736"> <li data-start="6585" data-end="6643"> <p data-start="6587" data-end="6643">يجب ربط كل عنصر إدخال بـ <code data-start="6612" data-end="6621"><label></code> باستخدام خاصية <code data-start="6637" data-end="6642">for</code>.</p> </li> <li data-start="6644" data-end="6675"> <p data-start="6646" data-end="6675">استخدام سمات ARIA عند الحاجة.</p> </li> <li data-start="6676" data-end="6736"> <p data-start="6678" data-end="6736">التأكد من أن التنقل يتم بشكل طبيعي باستخدام لوحة المفاتيح.</p> </li> </ul> <hr data-start="6738" data-end="6741"> <h2 data-start="6743" data-end="6793"><span class="ez-toc-section" id="%D8%B9%D8%A7%D8%B4%D8%B1%D8%A7%D9%8B_%D8%A3%D9%81%D8%B6%D9%84_%D8%A7%D9%84%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A7%D8%AA_%D9%81%D9%8A_%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA"></span>عاشراً: أفضل الممارسات في التعامل مع الاستمارات<span class="ez-toc-section-end"></span></h2> <ul data-start="6795" data-end="7092"> <li data-start="6795" data-end="6863"> <p data-start="6797" data-end="6863">عدم الاعتماد الكلي على التحقق من صحة البيانات من جهة المستخدم فقط.</p> </li> <li data-start="6864" data-end="6933"> <p data-start="6866" data-end="6933">استخدام طرق إرسال غير متزامنة (asynchronous) لتحسين تجربة المستخدم.</p> </li> <li data-start="6934" data-end="6994"> <p data-start="6936" data-end="6994">الحفاظ على بساطة التصميم والتنظيم البصري لعناصر الاستمارة.</p> </li> <li data-start="6995" data-end="7025"> <p data-start="6997" data-end="7025">عرض رسائل خطأ واضحة ومباشرة.</p> </li> <li data-start="7026" data-end="7092"> <p data-start="7028" data-end="7092">التعامل الآمن مع البيانات على مستوى الخادم (backend validation).</p> </li> </ul> <hr data-start="7094" data-end="7097"> <h2 data-start="7099" data-end="7138"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AD%D8%A7%D8%AF%D9%8A_%D8%B9%D8%B4%D8%B1_%D8%A3%D9%85%D8%AB%D9%84%D8%A9_%D8%B9%D9%84%D9%89_%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA_%D9%88%D8%A7%D9%82%D8%B9%D9%8A%D8%A9"></span>الحادي عشر: أمثلة على تطبيقات واقعية<span class="ez-toc-section-end"></span></h2> <h3 data-start="7140" data-end="7162"><span class="ez-toc-section" id="%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A9_%D8%AA%D8%B3%D8%AC%D9%8A%D9%84_%D8%AF%D8%AE%D9%88%D9%84"></span>استمارة تسجيل دخول<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="7164" data-end="7402"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">form</span></span></span><span> </span><span><span class="hljs-attr">id</span></span><span>=</span><span><span class="hljs-string">"loginForm"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"text"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"username"</span></span><span> </span><span><span class="hljs-attr">required</span></span><span> </span><span><span class="hljs-attr">placeholder</span></span><span>=</span><span><span class="hljs-string">"اسم المستخدم"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"password"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"password"</span></span><span> </span><span><span class="hljs-attr">required</span></span><span> </span><span><span class="hljs-attr">placeholder</span></span><span>=</span><span><span class="hljs-string">"كلمة المرور"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">button</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"submit"</span></span><span>>تسجيل الدخول</span><span><span class="hljs-tag"></<span class="hljs-name">button</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">form</span></span></span><span>> </span></span></code></div></div></pre> <pre class="overflow-visible!" data-start="7404" data-end="7813"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">javascript</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-javascript"><span><span><span class="hljs-variable language_">document</span></span><span>.</span><span><span class="hljs-title function_">getElementById</span></span><span>(</span><span><span class="hljs-string">'loginForm'</span></span><span>).</span><span><span class="hljs-title function_">addEventListener</span></span><span>(</span><span><span class="hljs-string">'submit'</span></span><span>, </span><span><span class="hljs-keyword">async</span></span><span> (e) => { e.</span><span><span class="hljs-title function_">preventDefault</span></span><span>(); </span><span><span class="hljs-keyword">const</span></span><span> form = e.</span><span><span class="hljs-property">target</span></span><span>; </span><span><span class="hljs-keyword">const</span></span><span> data = </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">FormData</span></span><span>(form); </span><span><span class="hljs-keyword">const</span></span><span> res = </span><span><span class="hljs-keyword">await</span></span><span> </span><span><span class="hljs-title function_">fetch</span></span><span>(</span><span><span class="hljs-string">'/login'</span></span><span>, { </span><span><span class="hljs-attr">method</span></span><span>: </span><span><span class="hljs-string">'POST'</span></span><span>, </span><span><span class="hljs-attr">body</span></span><span>: data }); </span><span><span class="hljs-keyword">const</span></span><span> result = </span><span><span class="hljs-keyword">await</span></span><span> res.</span><span><span class="hljs-title function_">json</span></span><span>(); </span><span><span class="hljs-keyword">if</span></span><span> (result.</span><span><span class="hljs-property">success</span></span><span>) { </span><span><span class="hljs-variable language_">window</span></span><span>.</span><span><span class="hljs-property">location</span></span><span>.</span><span><span class="hljs-property">href</span></span><span> = </span><span><span class="hljs-string">'/dashboard'</span></span><span>; } </span><span><span class="hljs-keyword">else</span></span><span> { </span><span><span class="hljs-title function_">alert</span></span><span>(</span><span><span class="hljs-string">'بيانات غير صحيحة'</span></span><span>); } }); </span></span></code></div></div></pre> <hr data-start="7815" data-end="7818"> <h2 data-start="7820" data-end="7864"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AB%D8%A7%D9%86%D9%8A_%D8%B9%D8%B4%D8%B1_%D8%AA%D9%86%D8%B3%D9%8A%D9%82_%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_CSS"></span>الثاني عشر: تنسيق الاستمارات باستخدام CSS<span class="ez-toc-section-end"></span></h2> <pre class="overflow-visible!" data-start="7866" data-end="8084"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">css</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span><span class="hljs-selector-tag">form</span></span><span> { </span><span><span class="hljs-attribute">max-width</span></span><span>: </span><span><span class="hljs-number">500px</span></span><span>; </span><span><span class="hljs-attribute">margin</span></span><span>: auto; } </span><span><span class="hljs-selector-tag">input</span></span><span>, select, </span><span><span class="hljs-selector-tag">textarea</span></span><span> { </span><span><span class="hljs-attribute">width</span></span><span>: </span><span><span class="hljs-number">100%</span></span><span>; </span><span><span class="hljs-attribute">margin-bottom</span></span><span>: </span><span><span class="hljs-number">1em</span></span><span>; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span>; </span><span><span class="hljs-attribute">box-sizing</span></span><span>: border-box; } </span><span><span class="hljs-selector-class">.error-message</span></span><span> { </span><span><span class="hljs-attribute">color</span></span><span>: red; </span><span><span class="hljs-attribute">font-size</span></span><span>: </span><span><span class="hljs-number">0.9em</span></span><span>; } </span></span></code></div></div></pre> <hr data-start="8086" data-end="8089"> <h2 data-start="8091" data-end="8101"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AE%D8%A7%D8%AA%D9%85%D8%A9"></span>الخاتمة<span class="ez-toc-section-end"></span></h2> <p data-start="8103" data-end="8453">يمثل التعامل مع الاستمارات في متصفح الويب باستخدام JavaScript أحد الركائز الأساسية في تطوير واجهات المستخدم التفاعلية. إذ تسمح هذه التقنية بجمع البيانات، التحقق من صحتها، إرسالها بطرق مرنة، وعرض التغذية الراجعة بشكل ديناميكي. مع التطورات الحديثة في المتصفحات، أصبح بإمكان المطورين تقديم تجربة أكثر سلاسة وذكاءً للمستخدم، دون المساس بالأداء أو الأمان.</p> <hr data-start="8455" data-end="8458"> <p data-start="8460" data-end="8472"><strong data-start="8460" data-end="8471">المصادر</strong>:</p> <ol data-start="8474" data-end="8627" data-is-last-node="" data-is-only-node=""> <li data-start="8474" data-end="8556"> <p data-start="8477" data-end="8556">MDN Web Docs – HTML Forms: <a data-start="8504" data-end="8556" rel="noopener" target="_new" class="" href="https://developer.mozilla.org/en-US/docs/Learn/Forms">https://developer.mozilla.org/en-US/docs/Learn/Forms</a></p> </li> <li data-start="8557" data-end="8627" data-is-last-node=""> <p data-start="8560" data-end="8627" data-is-last-node="">JavaScript Info – Working with forms: <a data-start="8598" data-end="8627" data-is-last-node="" rel="noopener" target="_new" class="cursor-pointer">https://javascript.info/forms</a></p> </li> </ol> </div> </div> </div> </p> </div> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">اخر تحديث 01/06/2025</span><div class="tie-alignright"><span class="meta-views meta-item warm"><span class="tie-icon-fire" aria-hidden="true"></span> 28 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> تمت قراءة 4 دقيقة</span> </div></div> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="‫X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">‫X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&name=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">‏Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&description=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">‏Reddit</span> </a> <a href="https://web.skype.com/share?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="سكايب" target="_blank" class="skype-share-btn " data-raw="https://web.skype.com/share?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-skype"></span> <span class="screen-reader-text">سكايب</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> <a href="mailto:?subject=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&body=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="المشاركة عبر البريد الألكتروني" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">المشاركة عبر البريد الألكتروني</span> </a> <a href="#" rel="external noopener nofollow" title="طباعة" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">طباعة</span> </a> </div> </div> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2025-06-01T20:33:03+03:00","datePublished":"2025-06-01T20:33:03+03:00","dateModified":"2025-06-01T20:33:03+03:00","headline":"\u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0628\u062c\u0627\u0641\u0627\u0633\u0643\u0631\u0628\u062a","name":"\u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0628\u062c\u0627\u0641\u0627\u0633\u0643\u0631\u0628\u062a","keywords":[],"url":"https:\/\/mwade3.com\/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa\/","description":"\u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a (Forms) \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628 \u0648\u0643\u064a\u0641\u064a\u0629 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639\u0647\u0627 \u0641\u064a \u062c\u0627\u0641\u0627\u0633\u0643\u0631\u0628\u062a \u062a\u064f\u0639\u062f \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a (Forms) \u0645\u0646 \u0623\u0647\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0625\u0630 \u062a\u0645\u062b\u0644 \u0627\u0644\u062c\u0633\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0630\u064a \u064a\u0633\u0645\u062d \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646 \u0628\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0625\u0631\u0633\u0627\u0644 \u0627","copyrightYear":"2025","articleSection":"\u0627\u0644\u0628\u0631\u0645\u062c\u0629","articleBody":"\u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a (Forms) \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628 \u0648\u0643\u064a\u0641\u064a\u0629 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639\u0647\u0627 \u0641\u064a \u062c\u0627\u0641\u0627\u0633\u0643\u0631\u0628\u062a\n\u062a\u064f\u0639\u062f \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a (Forms) \u0645\u0646 \u0623\u0647\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0625\u0630 \u062a\u0645\u062b\u0644 \u0627\u0644\u062c\u0633\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0630\u064a \u064a\u0633\u0645\u062d \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646 \u0628\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0633\u0648\u0627\u0621 \u0644\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644\u060c \u0623\u0648 \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643\u060c \u0623\u0648 \u062a\u0639\u0628\u0626\u0629 \u0627\u0633\u062a\u0628\u064a\u0627\u0646\u060c \u0623\u0648 \u062a\u0646\u0641\u064a\u0630 \u0639\u0645\u0644\u064a\u0627\u062a \u0634\u0631\u0627\u0621\u060c \u0648\u063a\u064a\u0631\u0647\u0627 \u0645\u0646 \u0627\u0644\u0645\u0647\u0627\u0645. \u0645\u0646 \u0627\u0644\u0646\u0627\u062d\u064a\u0629 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629\u060c \u062a\u0623\u062a\u064a \u0644\u063a\u0629 JavaScript \u0641\u064a \u0645\u0642\u062f\u0645\u0629 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0644\u0644\u062a\u062d\u0643\u0645 \u0628\u0633\u0644\u0648\u0643 \u0647\u0630\u0647 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a\u060c \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0639\u0628\u0631 \u0627\u0644\u0634\u0628\u0643\u0629\u060c \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0628\u0637\u0631\u064a\u0642\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629.\n\u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644 \u064a\u0639\u0631\u0636 \u0634\u0631\u062d\u064b\u0627 \u0634\u0627\u0645\u0644\u0627\u064b \u0648\u0639\u0645\u064a\u0642\u064b\u0627 \u062d\u0648\u0644 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628 \u0648\u0643\u064a\u0641\u064a\u0629 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639\u0647\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript\u060c \u0645\u062a\u0646\u0627\u0648\u0644\u0627\u064b \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u062c\u0648\u0627\u0646\u0628 \u0627\u0644\u0641\u0646\u064a\u0629 \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0628\u062f\u0621\u064b\u0627 \u0645\u0646 \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u060c \u0648\u0635\u0648\u0644\u0627\u064b \u0625\u0644\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0648\u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u062d\u062f\u064a\u062b\u0629 \u0643\u0640 Fetch API \u0648AJAX\u060c \u0645\u0639 \u0645\u0631\u0627\u0639\u0627\u0629 \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0648\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b (SEO).\n\n\u0623\u0648\u0644\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0641\u064a HTML\n\u062a\u064f\u0643\u062a\u0628 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0641\u064a HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u0646\u0635\u0631 . \u0648\u0647\u064a \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u062c\u0645\u064a\u0639 \u0645\u062f\u062e\u0644\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646\u060c \u0648\u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0648\u0627\u0644\u0648\u062c\u0647\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062e\u0635\u0627\u0626\u0635 \u0647\u0630\u0627 \u0627\u0644\u0639\u0646\u0635\u0631.\n\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629:\nhtmlCopyEdit\n \u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645:\n \n\n \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a:\n \n\n \u0625\u0631\u0633\u0627\u0644\n\n\n\u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0639\u0646\u0635\u0631 :\n\u0627\u0644\u062e\u0627\u0635\u064a\u0629\u0627\u0644\u0648\u0635\u0641action\u062a\u062d\u062f\u062f \u0639\u0646\u0648\u0627\u0646 URL \u0627\u0644\u0630\u064a \u062a\u064f\u0631\u0633\u0644 \u0625\u0644\u064a\u0647 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0646\u062f \u0627\u0644\u0625\u0631\u0633\u0627\u0644method\u062a\u062d\u062f\u062f \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644: GET \u0623\u0648 POSTenctype\u062a\u062d\u062f\u062f \u062a\u0631\u0645\u064a\u0632 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0646\u062f \u0627\u0644\u0625\u0631\u0633\u0627\u0644\u060c \u0648\u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u063a\u0627\u0644\u0628\u064b\u0627 \u0645\u0639 \u0627\u0644\u0645\u0644\u0641\u0627\u062a\n\n\u062b\u0627\u0646\u064a\u0627\u064b: \u0639\u0646\u0627\u0635\u0631 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a (Form Controls)\n\u062a\u062d\u062a\u0648\u064a \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0639\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a. \u062a\u062e\u062a\u0644\u0641 \u0647\u0630\u0647 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u062d\u0633\u0628 \u0646\u0648\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629\u060c \u0648\u0647\u064a \u062a\u0634\u0645\u0644:\n\n\n \u0628\u0623\u0646\u0648\u0627\u0639\u0647 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 (text, email, password, checkbox, radio, file, \u0648\u063a\u064a\u0631\u0647\u0627)\n\n\n \u0644\u0625\u062f\u062e\u0627\u0644 \u0646\u0635\u0648\u0635 \u0637\u0648\u064a\u0644\u0629\n\n\n \u0645\u0639 \u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0639\u0646\u0635\u0631 \u0645\u0646 \u0642\u0627\u0626\u0645\u0629\n\n\n \u0644\u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0623\u0648 \u062a\u0646\u0641\u064a\u0630 \u0648\u0638\u0627\u0626\u0641 \u0645\u062d\u062f\u062f\u0629\n\n\n\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u0639\u062f\u062f\u0629:\nhtmlCopyEdit\n \n \n \u0627\u0634\u062a\u0631\u0643 \u0641\u064a \u0627\u0644\u0646\u0634\u0631\u0629 \u0627\u0644\u0628\u0631\u064a\u062f\u064a\u0629\n \n \u0627\u0644\u0645\u063a\u0631\u0628\n \u0627\u0644\u062c\u0632\u0627\u0626\u0631\n \u0645\u0635\u0631\n \n \u0623\u0631\u0633\u0644\n\n\n\n\u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0641\u064a JavaScript\n1. \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629\n\u0644\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0628\u0631\u0645\u062c\u064a\u064b\u0627\u060c \u064a\u062c\u0628 \u0623\u0648\u0644\u0627\u064b \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u064a\u0647\u0627 \u0639\u0628\u0631 DOM.\njavascriptCopyEditconst form = document.querySelector('form');\nconst usernameInput = document.querySelector('#username');\n\n2. \u0627\u0639\u062a\u0631\u0627\u0636 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629\n\u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u062d\u062f\u062b submit \u0644\u0627\u0639\u062a\u0631\u0627\u0636 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0648\u062a\u0646\u0641\u064a\u0630 \u0645\u0647\u0627\u0645 \u0645\u0639\u064a\u0646\u0629 \u0642\u0628\u0644 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0623\u0648 \u0645\u0646\u0639 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0645\u0627\u0645\u064b\u0627 \u0641\u064a \u062d\u0627\u0644 \u0648\u062c\u0648\u062f \u0623\u062e\u0637\u0627\u0621.\njavascriptCopyEditform.addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ \u064a\u0645\u0646\u0639 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\n const username = usernameInput.value;\n console.log('\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645:', username);\n});\n\n3. \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a (Validation)\n\u064a\u0645\u0643\u0646 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0637\u0631\u064a\u0642\u062a\u064a\u0646:\n\u0627\u0644\u062a\u062d\u0642\u0642 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0635\u0627\u0626\u0635 HTML\nhtmlCopyEdit\n\n\u0627\u0644\u062a\u062d\u0642\u0642 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript\njavascriptCopyEditform.addEventListener('submit', function(event) {\n event.preventDefault();\n\n const email = document.querySelector('#email').value;\n\n if (!email.includes('@')) {\n alert('\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0635\u062d\u064a\u062d');\n return;\n }\n\n \/\/ \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0623\u0648 \u062a\u0646\u0641\u064a\u0630 \u0645\u0646\u0637\u0642 \u0622\u062e\u0631\n});\n\n\n\u0631\u0627\u0628\u0639\u0627\u064b: \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Fetch API\n\u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0628\u0631 \u0627\u0644\u062e\u0627\u062f\u0645\u060c \u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 fetch() \u0644\u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0628\u0637\u0631\u064a\u0642\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 \u062f\u0648\u0646 \u0625\u0639\u0627\u062f\u0629 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629.\njavascriptCopyEditform.addEventListener('submit', function(event) {\n event.preventDefault();\n\n const formData = new FormData(form);\n\n fetch('\/submit', {\n method: 'POST',\n body: formData\n })\n .then(response => response.json())\n .then(data => {\n console.log('\u062a\u0645 \u0627\u0644\u0627\u0633\u062a\u0644\u0627\u0645:', data);\n })\n .catch(error => {\n console.error('\u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644:', error);\n });\n});\n\n\n\u062e\u0627\u0645\u0633\u0627\u064b: \u0627\u0633\u062a\u062e\u062f\u0627\u0645 FormData \u0644\u062c\u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\n\u062a\u0639\u062a\u0628\u0631 FormData \u0648\u0627\u062c\u0647\u0629 \u0645\u0631\u064a\u062d\u0629 \u0644\u0625\u0646\u0634\u0627\u0621 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0628\u064a\u0627\u0646\u0627\u062a \u064a\u0645\u0643\u0646 \u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0625\u0644\u0649 \u0627\u0644\u062e\u0627\u062f\u0645\u060c \u0643\u0645\u0627 \u0623\u0646\u0647\u0627 \u062a\u062f\u0639\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0645\u0631\u0641\u0642\u0629.\njavascriptCopyEditconst formData = new FormData(form);\nformData.append('token', 'XYZ123');\n\n\u064a\u0645\u0643\u0646\u0643 \u0623\u064a\u0636\u064b\u0627 \u0627\u0644\u0627\u0637\u0644\u0627\u0639 \u0639\u0644\u0649 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0645\u062e\u0632\u0646\u0629:\njavascriptCopyEditfor (let pair of formData.entries()) {\n console.log(`${pair[0]}: ${pair[1]}`);\n}\n\n\n\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0623\u062e\u0637\u0627\u0621 \u0648\u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0627\u0644\u0631\u0627\u062c\u0639\u0629 \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645\n\u062a\u0648\u0641\u064a\u0631 \u0631\u0633\u0627\u0626\u0644 \u062a\u063a\u0630\u064a\u0629 \u0631\u0627\u062c\u0639\u0629 \u062c\u064a\u062f\u0629 \u0639\u0646\u062f \u062d\u062f\u0648\u062b \u062e\u0637\u0623 \u0641\u064a \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0623\u0648 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u064a\u0639\u0632\u0632 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645.\njavascriptCopyEditform.addEventListener('submit', async function(event) {\n event.preventDefault();\n\n try {\n const response = await fetch('\/submit', {\n method: 'POST',\n body: new FormData(form)\n });\n\n if (!response.ok) {\n throw new Error('\u0641\u0634\u0644 \u0641\u064a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u062e\u0627\u062f\u0645');\n }\n\n const result = await response.json();\n alert('\u062a\u0645 \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0628\u0646\u062c\u0627\u062d');\n } catch (error) {\n alert(`\u062d\u062f\u062b \u062e\u0637\u0623: ${error.message}`);\n }\n});\n\n\n\u0633\u0627\u0628\u0639\u0627\u064b: \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u064a\u0646 \u0637\u0631\u0642 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\n\u0627\u0644\u062a\u0642\u0646\u064a\u0629\u064a\u0639\u064a\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\u061f\u064a\u062f\u0639\u0645 \u0625\u0631\u0633\u0627\u0644 \u0645\u0644\u0641\u0627\u062a\u061f\u0645\u0631\u0648\u0646\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0625\u0631\u0633\u0627\u0644 \u0645\u0628\u0627\u0634\u0631 \u0639\u0628\u0631 HTML\u0646\u0639\u0645\u0646\u0639\u0645\u0645\u062d\u062f\u0648\u062f\u0627\u0633\u062a\u062e\u062f\u0627\u0645 AJAX (XHR)\u0644\u0627\u0646\u0639\u0645\u062c\u064a\u062f\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Fetch API\u0644\u0627\u0646\u0639\u0645\u0645\u0645\u062a\u0627\u0632\n\n\u062b\u0627\u0645\u0646\u0627\u064b: \u0623\u0633\u0627\u0644\u064a\u0628 \u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a\n1. \u062a\u0641\u0639\u064a\u0644 \/ \u062a\u0639\u0637\u064a\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627\njavascriptCopyEditconst submitButton = form.querySelector('button[type=\"submit\"]');\nusernameInput.addEventListener('input', function () {\n submitButton.disabled = !usernameInput.value.trim();\n});\n\n2. \u0639\u0631\u0636 \u0631\u0633\u0627\u0626\u0644 \u062e\u0637\u0623 \u0628\u062c\u0648\u0627\u0631 \u0627\u0644\u062d\u0642\u0648\u0644\njavascriptCopyEditfunction showError(input, message) {\n const errorSpan = document.createElement('span');\n errorSpan.className = 'error-message';\n errorSpan.textContent = message;\n input.parentNode.appendChild(errorSpan);\n}\n\n3. \u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0633\u064a\u0631\u0641\u0631 \u0648\u0645\u0644\u0621 \u0627\u0644\u062d\u0642\u0648\u0644 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627\njavascriptCopyEditfetch('\/api\/user\/123')\n .then(res => res.json())\n .then(data => {\n document.querySelector('#username').value = data.username;\n document.querySelector('#email').value = data.email;\n });\n\n\n\u062a\u0627\u0633\u0639\u0627\u064b: \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0648\u0641\u0642\u064b\u0627 \u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0648\u0635\u0648\u0644 (Accessibility)\n\u0645\u0646 \u0627\u0644\u0645\u0647\u0645 \u062c\u062f\u064b\u0627 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0648\u0635\u0648\u0644 \u0645\u0646 \u0642\u0650\u0628\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646\u060c \u0628\u0645\u0627 \u0641\u064a\u0647\u0645 \u0630\u0648\u064a \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629. \u0644\u062a\u062d\u0642\u064a\u0642 \u0630\u0644\u0643:\n\n\n\u064a\u062c\u0628 \u0631\u0628\u0637 \u0643\u0644 \u0639\u0646\u0635\u0631 \u0625\u062f\u062e\u0627\u0644 \u0628\u0640 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 for.\n\n\n\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0645\u0627\u062a ARIA \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629.\n\n\n\u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u062a\u0646\u0642\u0644 \u064a\u062a\u0645 \u0628\u0634\u0643\u0644 \u0637\u0628\u064a\u0639\u064a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d.\n\n\n\n\u0639\u0627\u0634\u0631\u0627\u064b: \u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0641\u064a \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a\n\n\n\u0639\u062f\u0645 \u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0644\u0643\u0644\u064a \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0641\u0642\u0637.\n\n\n\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0637\u0631\u0642 \u0625\u0631\u0633\u0627\u0644 \u063a\u064a\u0631 \u0645\u062a\u0632\u0627\u0645\u0646\u0629 (asynchronous) \u0644\u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645.\n\n\n\u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0628\u0633\u0627\u0637\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0628\u0635\u0631\u064a \u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629.\n\n\n\u0639\u0631\u0636 \u0631\u0633\u0627\u0626\u0644 \u062e\u0637\u0623 \u0648\u0627\u0636\u062d\u0629 \u0648\u0645\u0628\u0627\u0634\u0631\u0629.\n\n\n\u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0627\u0644\u0622\u0645\u0646 \u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062e\u0627\u062f\u0645 (backend validation).\n\n\n\n\u0627\u0644\u062d\u0627\u062f\u064a \u0639\u0634\u0631: \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0627\u0642\u0639\u064a\u0629\n\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u062a\u0633\u062c\u064a\u0644 \u062f\u062e\u0648\u0644\nhtmlCopyEdit\n \n \n \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644\n\n\njavascriptCopyEditdocument.getElementById('loginForm').addEventListener('submit', async (e) => {\n e.preventDefault();\n const form = e.target;\n const data = new FormData(form);\n\n const res = await fetch('\/login', {\n method: 'POST',\n body: data\n });\n\n const result = await res.json();\n if (result.success) {\n window.location.href = '\/dashboard';\n } else {\n alert('\u0628\u064a\u0627\u0646\u0627\u062a \u063a\u064a\u0631 \u0635\u062d\u064a\u062d\u0629');\n }\n});\n\n\n\u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631: \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\ncssCopyEditform {\n max-width: 500px;\n margin: auto;\n}\n\ninput, select, textarea {\n width: 100%;\n margin-bottom: 1em;\n padding: 10px;\n box-sizing: border-box;\n}\n\n.error-message {\n color: red;\n font-size: 0.9em;\n}\n\n\n\u0627\u0644\u062e\u0627\u062a\u0645\u0629\n\u064a\u0645\u062b\u0644 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0627\u062a \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript \u0623\u062d\u062f \u0627\u0644\u0631\u0643\u0627\u0626\u0632 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629. \u0625\u0630 \u062a\u0633\u0645\u062d \u0647\u0630\u0647 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0628\u062c\u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u062a\u0647\u0627\u060c \u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0628\u0637\u0631\u0642 \u0645\u0631\u0646\u0629\u060c \u0648\u0639\u0631\u0636 \u0627\u0644\u062a\u063a\u0630\u064a\u0629 \u0627\u0644\u0631\u0627\u062c\u0639\u0629 \u0628\u0634\u0643\u0644 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a. \u0645\u0639 \u0627\u0644\u062a\u0637\u0648\u0631\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a\u060c \u0623\u0635\u0628\u062d \u0628\u0625\u0645\u0643\u0627\u0646 \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062a\u0642\u062f\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0623\u0643\u062b\u0631 \u0633\u0644\u0627\u0633\u0629 \u0648\u0630\u0643\u0627\u0621\u064b \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u062f\u0648\u0646 \u0627\u0644\u0645\u0633\u0627\u0633 \u0628\u0627\u0644\u0623\u062f\u0627\u0621 \u0623\u0648 \u0627\u0644\u0623\u0645\u0627\u0646.\n\n\u0627\u0644\u0645\u0635\u0627\u062f\u0631:\n\n\nMDN Web Docs \u2013 HTML Forms: https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Forms\n\n\nJavaScript Info \u2013 Working with forms: https:\/\/javascript.info\/forms\n\n","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u0645\u0648\u0627\u0636\u064a\u0639","logo":{"@type":"ImageObject","url":"https:\/\/mwade3.com\/wp-content\/uploads\/2023\/09\/logo-Black.png"},"sameAs":["https:\/\/www.facebook.com\/mwadee33","https:\/\/www.pinterest.com\/Mwade3com\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/mwade3.com\/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Mwade3","url":"https:\/\/mwade3.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/mwade3.com\/wp-content\/uploads\/logo.png","width":1200,"height":718}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="‫X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">‫X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&name=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">‏Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&description=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">‏Reddit</span> </a> <a href="https://vk.com/share.php?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="‏VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">‏VKontakte</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> <a href="mailto:?subject=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&body=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="المشاركة عبر البريد الألكتروني" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">المشاركة عبر البريد الألكتروني</span> </a> <a href="#" rel="external noopener nofollow" title="طباعة" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">طباعة</span> </a> </div> </div> </article> <div class="post-components"> <div id="read-next-block" class="container-wrapper read-next-slider-50"> <h2 class="read-next-block-title">اقرأ التالي</h2> <section id="tie-read-next" class="slider-area mag-box"> <div class="slider-area-inner"> <div id="tie-main-slider-50-read-next" class="tie-main-slider main-slider wide-slider-with-navfor-wrapper wide-slider-wrapper slider-vertical-navigation tie-slick-slider-wrapper" data-slider-id="50" data-autoplay="true" data-speed="3000"> <div class="main-slider-inner"> <div class="container slider-main-container"> <div class="tie-slick-slider"> <ul class="tie-slider-nav"></ul> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3017387 tie-slide-1 tie-standard"> <a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-2/" class="all-over-thumb-link" aria-label="تعلم الآلة: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-2/">تعلم الآلة: المفاهيم والتطبيقات</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3013217 tie-slide-2 tie-standard"> <a href="https://mwade3.com/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9-%d8%a7%d9%84%d9%83%d8%a7%d8%a6%d9%86%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7/" class="all-over-thumb-link" aria-label="البرمجة الكائنية: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9-%d8%a7%d9%84%d9%83%d8%a7%d8%a6%d9%86%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7/">البرمجة الكائنية: المفاهيم والتطبيقات</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3018237 tie-slide-3 tie-standard"> <a href="https://mwade3.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%b9%d9%84%d9%88%d9%85-%d8%a7%d9%84%d8%ad%d8%a7%d8%b3%d9%88%d8%a8-%d8%a7%d9%84%d8%ad%d8%af%d9%8a%d8%ab%d8%a9/" class="all-over-thumb-link" aria-label="أساسيات علوم الحاسوب الحديثة"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%b9%d9%84%d9%88%d9%85-%d8%a7%d9%84%d8%ad%d8%a7%d8%b3%d9%88%d8%a8-%d8%a7%d9%84%d8%ad%d8%af%d9%8a%d8%ab%d8%a9/">أساسيات علوم الحاسوب الحديثة</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3011931 tie-slide-4 tie-standard"> <a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/" class="all-over-thumb-link" aria-label="تعلم الآلة: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تعلم الآلة: المفاهيم والتطبيقات</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3017731 tie-slide-5 tie-standard"> <a href="https://mwade3.com/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d8%b4%d8%a7%d8%a6%d8%b9%d8%a9-%d9%81%d9%8a-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/" class="all-over-thumb-link" aria-label="أخطاء شائعة في بايثون"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d8%b4%d8%a7%d8%a6%d8%b9%d8%a9-%d9%81%d9%8a-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/">أخطاء شائعة في بايثون</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3023317 tie-slide-6 tie-standard"> <a href="https://mwade3.com/php-%d9%88node-js-%d9%85%d9%82%d8%a7%d8%b1%d9%86%d8%a9-%d8%b4%d8%a7%d9%85%d9%84%d8%a9/" class="all-over-thumb-link" aria-label="PHP وNode.js: مقارنة شاملة"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/php-%d9%88node-js-%d9%85%d9%82%d8%a7%d8%b1%d9%86%d8%a9-%d8%b4%d8%a7%d9%85%d9%84%d8%a9/">PHP وNode.js: مقارنة شاملة</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3110613 tie-slide-1 tie-standard"> <a href="https://mwade3.com/%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%ab%d9%86%d8%a7%d8%a1%d8%a7%d8%aa-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/" class="all-over-thumb-link" aria-label="الاستثناءات في دوت نت"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%ab%d9%86%d8%a7%d8%a1%d8%a7%d8%aa-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/">الاستثناءات في دوت نت</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3015889 tie-slide-2 tie-standard"> <a href="https://mwade3.com/git-%d9%88%d8%a3%d9%87%d9%85%d9%8a%d8%aa%d9%87-%d9%81%d9%8a-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/" class="all-over-thumb-link" aria-label="Git وأهميته في مشاريع بايثون"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/git-%d9%88%d8%a3%d9%87%d9%85%d9%8a%d8%aa%d9%87-%d9%81%d9%8a-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/">Git وأهميته في مشاريع بايثون</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3020329 tie-slide-3 tie-standard"> <a href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-%d8%a7%d9%84%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-go/" class="all-over-thumb-link" aria-label="معالجة الأخطاء في لغة Go"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-%d8%a7%d9%84%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-go/">معالجة الأخطاء في لغة Go</a></h2> </div> </div> </div> </div> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3015129 tie-slide-4 tie-standard"> <a href="https://mwade3.com/laravel-%d8%a3%d9%82%d9%88%d9%89-%d8%a5%d8%b7%d8%a7%d8%b1-php-%d8%ad%d8%af%d9%8a%d8%ab/" class="all-over-thumb-link" aria-label="Laravel: أقوى إطار PHP حديث"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/laravel-%d8%a3%d9%82%d9%88%d9%89-%d8%a5%d8%b7%d8%a7%d8%b1-php-%d8%ad%d8%af%d9%8a%d8%ab/">Laravel: أقوى إطار PHP حديث</a></h2> </div> </div> </div> </div> </div> </div> </div> </div> <div class="wide-slider-nav-wrapper vertical-slider-nav "> <ul class="tie-slider-nav"></ul> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="tie-slick-slider"> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">تعلم الآلة: المفاهيم والتطبيقات</h3> </div> </div> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">البرمجة الكائنية: المفاهيم والتطبيقات</h3> </div> </div> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">أساسيات علوم الحاسوب الحديثة</h3> </div> </div> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">تعلم الآلة: المفاهيم والتطبيقات</h3> </div> </div> <div class="slide tie-slide-3"> <div class="slide-overlay"> <h3 class="thumb-title">أخطاء شائعة في بايثون</h3> </div> </div> <div class="slide tie-slide-4"> <div class="slide-overlay"> <h3 class="thumb-title">PHP وNode.js: مقارنة شاملة</h3> </div> </div> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">الاستثناءات في دوت نت</h3> </div> </div> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Git وأهميته في مشاريع بايثون</h3> </div> </div> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">معالجة الأخطاء في لغة Go</h3> </div> </div> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Laravel: أقوى إطار PHP حديث</h3> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> <div class="prev-next-post-nav container-wrapper media-overlay"> <div class="tie-col-xs-6 prev-post"> <a href="https://mwade3.com/%d9%81%d9%88%d8%a7%d8%a6%d8%af-%d8%a7%d9%84%d9%83%d8%aa%d8%a8-%d8%a7%d9%84%d8%b5%d9%88%d8%aa%d9%8a%d8%a9-%d9%84%d9%84%d8%b5%d8%ad%d8%a9-%d8%a7%d9%84%d8%b9%d9%82%d9%84%d9%8a%d8%a9/" style="background-image: url(https://mwade3.com/wp-content/uploads/logo-390x220.png)" class="post-thumb" rel="prev"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> <span class="screen-reader-text">فوائد الكتب الصوتية للصحة العقلية</span> </div> </div> </a> <a href="https://mwade3.com/%d9%81%d9%88%d8%a7%d8%a6%d8%af-%d8%a7%d9%84%d9%83%d8%aa%d8%a8-%d8%a7%d9%84%d8%b5%d9%88%d8%aa%d9%8a%d8%a9-%d9%84%d9%84%d8%b5%d8%ad%d8%a9-%d8%a7%d9%84%d8%b9%d9%82%d9%84%d9%8a%d8%a9/" rel="prev"> <h3 class="post-title">فوائد الكتب الصوتية للصحة العقلية</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://mwade3.com/%d8%a7%d9%84%d9%81%d8%b1%d8%ad-%d9%88%d8%a7%d9%84%d8%a3%d9%85%d9%84-%d9%85%d9%81%d8%aa%d8%a7%d8%ad-%d8%a7%d9%84%d8%ad%d9%8a%d8%a7%d8%a9/" style="background-image: url(https://mwade3.com/wp-content/uploads/logo-390x220.png)" class="post-thumb" rel="next"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> <span class="screen-reader-text">الفرح والأمل: مفتاح الحياة</span> </div> </div> </a> <a href="https://mwade3.com/%d8%a7%d9%84%d9%81%d8%b1%d8%ad-%d9%88%d8%a7%d9%84%d8%a3%d9%85%d9%84-%d9%85%d9%81%d8%aa%d8%a7%d8%ad-%d8%a7%d9%84%d8%ad%d9%8a%d8%a7%d8%a9/" rel="next"> <h3 class="post-title">الفرح والأمل: مفتاح الحياة</h3> </a> </div> </div> <div id="related-posts" class="container-wrapper"> <div class="mag-box-title the-global-title"> <h3>مواضيع ذات صلة</h3> </div> <div class="related-posts-list"> <div class="related-item tie-standard"> <a aria-label="تهجير قواعد البيانات في Laravel" href="https://mwade3.com/%d8%aa%d9%87%d8%ac%d9%8a%d8%b1-%d9%82%d9%88%d8%a7%d8%b9%d8%af-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d9%81%d9%8a-laravel-2/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" fetchpriority="high" /></a> <h3 class="post-title"><a href="https://mwade3.com/%d8%aa%d9%87%d8%ac%d9%8a%d8%b1-%d9%82%d9%88%d8%a7%d8%b9%d8%af-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d9%81%d9%8a-laravel-2/">تهجير قواعد البيانات في Laravel</a></h3> <div class="post-meta clearfix"></div> </div> <div class="related-item tie-standard"> <a aria-label="إنشاء مدونة باستخدام Node.js" href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/">إنشاء مدونة باستخدام Node.js</a></h3> <div class="post-meta clearfix"></div> </div> <div class="related-item tie-standard"> <a aria-label="تحويل HTML إلى قالب ووردبريس" href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">تحويل HTML إلى قالب ووردبريس</a></h3> <div class="post-meta clearfix"></div> </div> <div class="related-item tie-standard"> <a aria-label="تنظيم الشيفرة في JavaScript" href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/">تنظيم الشيفرة في JavaScript</a></h3> <div class="post-meta clearfix"></div> </div> </div> </div> </div> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div> </div> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Copyright 2025, جميع الحقوق محفوظة لمنصة مواضيع | <span style="color:red;" class="tie-icon-heart"></span> <a href="https://mwade3.com/about-us/">من نحن</a> | <a href="https://mwade3.com/privacy-policy/">إتفاقية الخصوصية</a> | <a href="https://mwade3.com/terms/">الشروط والأحكام</a> | <a href="https://mwade3.com/report/">الإبلاغ عن مشكلة</a> | <a href="https://mwade3.com/contact-us/">اتصل بنا</a> | <a href="https://mwade3.com/faq/">الأسئلة الشائعة</a> | <a href="https://mwade3.com/disclaimer/">إخلاء المسؤولية</a> </footer> </div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/mwadee33"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">فيسبوك</span></a></li><li class="social-icons-item"><a class="social-link pinterest-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.pinterest.com/Mwade3com/"><span class="tie-social-icon tie-icon-pinterest"></span><span class="screen-reader-text">بينتيريست</span></a></li></ul> </div> </div> </div> </div> </footer> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="‫X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">‫X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&name=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">‏Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&description=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&title=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="‏Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">‏Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&redirect_uri=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/&text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%20%D8%A8%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA%20https://mwade3.com/%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85-%d9%81%d9%8a-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d9%85%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a8%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> </div> </div> <div class="mobile-share-buttons-spacer"></div> </div> <aside class=" side-aside normal-side dark-skin dark-widgetized-area slide-sidebar-desktop is-fullwidth appear-from-right" aria-label="القائمة الجانبية الثانوية" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">إغلاق</span> </a> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://mwade3.com/"> <label> <span class="screen-reader-text">البحث عن:</span> <input type="search" class="search-field" placeholder="بحث …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="بحث" /> </form> </div> <div id="mobile-menu" class=""> </div> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/mwadee33"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">فيسبوك</span></a></li><li class="social-icons-item"><a class="social-link pinterest-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.pinterest.com/Mwade3com/"><span class="tie-social-icon tie-icon-pinterest"></span><span class="screen-reader-text">بينتيريست</span></a></li></ul> </div> </div> </div> </aside> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/jannah\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="تفضيلات الموافقة" style="background-color:#F1C40F"> <button class="cky-btn-revisit" aria-label="تفضيلات الموافقة"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#121212;border-color:#2a2a2a"> <button class="cky-banner-btn-close" data-cky-tag="close-button" aria-label="Close"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#F1C40F">منصة مواضيع تقدر مستوى الخصوصية لديك</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#F1C40F"> <p>نحن نستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح الخاصة بك، وتقديم إعلانات أو محتوى مخصص، وتحليل حركة المرور لدينا. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="تخصيص" data-cky-tag="settings-button" style="color:#000000;background-color:#F1C40F;border-color:#90750A">تخصيص</button> <button class="cky-btn cky-btn-reject" aria-label="رفض الكل" data-cky-tag="reject-button" style="color:#0C0000;background-color:#F1C40F;border-color:#5C4B06">رفض الكل</button> <button class="cky-btn cky-btn-accept" aria-label="الموافقة على الكل" data-cky-tag="accept-button" style="color:#000000;background-color:#F1C40F;border-color:#AF8D04">الموافقة على الكل</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#F1C40F;background-color:#121212;border-color:#2A2A2A"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#F1C40F">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#F1C40F"> <p>نحن نستخدم ملفات تعريف الارتباط لمساعدتك على التنقل بكفاءة وأداء وظائف معينة. ستجد معلومات تفصيلية حول جميع ملفات تعريف الارتباط ضمن كل فئة موافقة أدناه.</p> <p>يتم تخزين ملفات تعريف الارتباط المصنفة على أنها "ضرورية" على متصفحك لأنها ضرورية لتمكين الوظائف الأساسية للموقع.</p> <p>نستخدم أيضًا ملفات تعريف الارتباط التابعة لجهات خارجية والتي تساعدنا في تحليل كيفية استخدامك لهذا الموقع وتخزين تفضيلاتك وتوفير المحتوى والإعلانات ذات الصلة بك. لن يتم تخزين ملفات تعريف الارتباط هذه في متصفحك إلا بموافقتك المسبقة.</p> <p>يمكنك اختيار تمكين أو تعطيل بعض أو كل ملفات تعريف الارتباط هذه ولكن تعطيل بعضها قد يؤثر على تجربة التصفح لديك.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#F1C40F">Necessary</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#F1C40F">Functional</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#F1C40F">Analytics</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#F1C40F">Performance</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#F1C40F">Advertisement</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="رفض الكل" data-cky-tag="detail-reject-button" style="color:#0C0000;background-color:#F1C40F;border-color:#5C4B06"> رفض الكل </button> <button class="cky-btn cky-btn-preferences" aria-label="حفظ تفضيلاتي" data-cky-tag="detail-save-button" style="color:#000000;background-color:#F1C40F;border-color:#A58609"> حفظ تفضيلاتي </button> <button class="cky-btn cky-btn-accept" aria-label="الموافقة على الكل" data-cky-tag="detail-accept-button" style="color:#000000;background-color:#F1C40F;border-color:#AF8D04"> الموافقة على الكل </button> </div></div></div></div></script><div id="reading-position-indicator"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">إغلاق</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="بحث"> <form method="get" class="tie-popup-search-form" action="https://mwade3.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="البحث عن" autocomplete="off" placeholder="البحث عن" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">البحث عن</span> </button> </form> </div> </div> </div> <script type="text/javascript" src="https://mwade3.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.4" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/mwade3.com\/wp-json\/", "namespace": "contact-form-7\/v1" }, "cached": 1 }; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.4" id="contact-form-7-js"></script> <script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra"> /* <![CDATA[ */ var eztoc_smooth_local = {"scroll_offset":"0","add_request_uri":"","add_self_reference_link":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.78" id="ez-toc-scroll-scriptjs-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"0","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.78-1764573461" id="ez-toc-js-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-consent-mode-bc2e26cfa69fcd4a8261.js" id="googlesitekit-consent-mode-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"1","ajaxurl":"https:\/\/mwade3.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_2","mobile_menu_parent":"true","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"true","select_share_facebook":"true","select_share_linkedin":"true","select_share_email":"true","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"default","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\">\n\t\t\t\t<div class=\"spinner\">\n\t\t\t\t\t<div class=\"bounce1\"><\/div>\n\t\t\t\t\t<div class=\"bounce2\"><\/div>\n\t\t\t\t\t<div class=\"bounce3\"> <\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>","type_to_search":"","lang_no_results":"\u0644\u0627 \u064a\u0648\u062c\u062f \u0634\u064a\u0621","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.2.0" id="tie-scripts-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.2.0" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.2.0" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.2.0" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.2.0" id="tie-js-single-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/mailcheck.min.js?ver=2.3.3" id="mailcheck-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/jquery.email-autocomplete.min.js?ver=2.3.3" id="autocomplete-email-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="mystickyelements-fronted-js-js-extra"> /* <![CDATA[ */ var mystickyelements = {"ajaxurl":"https:\/\/mwade3.com\/wp-admin\/admin-ajax.php","ajax_nonce":"2151467fae"}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/mystickyelements-fronted.min.js?ver=2.3.3" id="mystickyelements-fronted-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="intl-tel-input-js-js-extra"> /* <![CDATA[ */ var mystickyelement_obj = {"plugin_url":"https:\/\/mwade3.com\/wp-content\/plugins\/mystickyelements\/"}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/intl-tel-input-src/build/js/intlTelInput.js?ver=2.3.3" id="intl-tel-input-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="wp-consent-api-js-extra"> /* <![CDATA[ */ var consent_api = {"consent_type":"","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.0.0" id="wp-consent-api-js"></script> <div class="mystickyelements-fixed mystickyelements-position-left mystickyelements-position-screen-center mystickyelements-position-mobile-left mystickyelements-on-hover mystickyelements-size-medium mystickyelements-mobile-size-medium mystickyelements-entry-effect-slide-in mystickyelements-templates-default"> <div class="mystickyelement-lists-wrap"> <ul class="mystickyelements-lists mysticky"> <li class="mystickyelements-minimize "> <span class="mystickyelements-minimize minimize-position-left minimize-position-mobile-left" style="background: #000000" > ← </span> </li> <li id="mystickyelements-social-facebook" class="mystickyelements-social-icon-li mystickyelements- mystickyelements-social-facebook element-desktop-on element-mobile-on"> <style> </style> <span class="mystickyelements-social-icon social-facebook social-custom" data-tab-setting = 'hover' data-click = "0"data-mobile-behavior="disable" data-flyout="disable" style="background: #4267B2" > <a class="social-link-facebook" href="https://www.facebook.com/mwadee33/" target="_blank" rel="noopener nofollow" data-url="https://www.facebook.com/mwadee33/" data-tab-setting = 'hover' data-mobile-behavior="disable" data-flyout="disable" title="Facebook"> <i class="fab fa-facebook-f" ></i> </a> </span> <span class="mystickyelements-social-text " style= "background: #4267B2;" > <a class="social-link-facebook" href="https://www.facebook.com/mwadee33/" target="_blank" rel="noopener nofollow" data-tab-setting = 'hover' data-flyout="disable" title="Facebook" data-url="https://www.facebook.com/mwadee33/" > Facebook </a> </span> </li> </ul> </div> </div> <script type="text/javascript"> jQuery.ajax({ type : "GET", url : "https://mwade3.com/wp-admin/admin-ajax.php", data : "postviews_id=3104379&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); </script> </body> </html>  <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="c918950bed0796251560f3b9-|49" defer></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

تشاد: كل ما تحتاج معرفته

مفهوم الدولة المدينة وأثرها

الفساد وأثره على الفقر

الإنترنت وتطور العالم الرقمي

التبادل التجاري: الأنواع والأثر الاقتصادي

الإرشاد التربوي وأهميته التعليمية

فحص المنافذ المفتوحة بـNmap

عيد استقلال موريتانيا: تاريخ وفخر

باريس باس: لاعب كرة السلة

جهاد النفس في القرآن الكريم

التحكم في الاستمارات بجافاسكربت

الاستمارات (Forms) في متصفح الويب وكيفية التعامل معها في جافاسكربت

أولاً: مفهوم الاستمارات في HTML

البنية الأساسية للاستمارة:

الخصائص الأساسية لعنصر :

ثانياً: عناصر إدخال البيانات (Form Controls)