blob: 3c8f44947651a02ccad7815111559adb65b6b661 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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>
|
