diff options
Diffstat (limited to 'files/ar/learn/html/forms/index.html')
| -rw-r--r-- | files/ar/learn/html/forms/index.html | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/html/forms/index.html @@ -0,0 +1,114 @@ +--- +title: نماذج HTML +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<div style="direction: rtl;">{{LearnSidebar}}</div> + +<p class="summary" style="direction: rtl;">توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.</p> + +<h2 id="المتطلبات_الأساسية" style="direction: rtl;">المتطلبات الأساسية</h2> + +<p style="direction: rtl;">قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">أدوات النماذج الأصلية</a>.</p> + +<p style="direction: rtl;">ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض <a href="/ar/docs/Learn/CSS">CSS</a> و <a href="/ar/docs/Web/JavaScript/About_JavaScript">JavaScript</a> أولاً.</p> + +<div class="note"> +<p style="direction: rtl;"><strong>ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://glitch.com/">Glitch</a>.</strong></p> +</div> + +<h2 id="أدلة_أساسية" style="direction: rtl;">أدلة أساسية</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">أول نموذج HTML خاص بك </a></strong></div> + +<div style="direction: rtl;"><span style="">تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.</span></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">كيفية بناء نموذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.</span></div> + +<h2 id="ما_هو_شكل_الحاجيات_المتاحة؟" style="direction: rtl;">ما هو شكل الحاجيات المتاحة؟</h2> + + + +<div style="direction: rtl;"><strong><span style="">حاجيات النموذج الأصلي</span></strong></div> + +<div style="direction: rtl;"><span style="">نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.</span></div> + +<h2 id="التحقق_من_صحة_بيانات_النموذج_وإرسالها" style="direction: rtl;">التحقق من صحة بيانات النموذج وإرسالها</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">إرسال بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">التحقق من صحة بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.</span></div> + +<h2 id="أدلة_متقدمة" style="direction: rtl;">أدلة متقدمة</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">كيفية بناء الحاجيات النموذجية المخصصة</a></strong></div> + +<div style="direction: rtl;"><span style="">ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">إرسال النماذج من خلال JavaScript</a></strong></div> + +<div style="direction: rtl;"><span style="">تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData</a>.)</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">نماذج HTML في المتصفحات القديمة</a></strong></div> + +<div style="direction: rtl;"><span style="">اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.</span></div> + +<h2 id="أدلة_تصميم_النموذج" style="direction: rtl;">أدلة تصميم النموذج</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">تصميم نماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">التصميم المتقدم لنماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML </a>| <a href="https://developer.mozilla.org/en-US/Learn/HTML">تعلم HTML </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5 </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">دليل المطور </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">مرجع العنصر </a>| <a href="https://orientdetectors.com/ar/" rel="noopener">المرجع</a></div> + +<h2 id="إقرأ_أيضا" style="direction: rtl;">إقرأ أيضا</h2> + +<ul> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element#Forms">مرجع عنصر نماذج HTML</a></li> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element/input">مرجع أنواع <input> HTML</a></li> +</ul> |