Skip to content

Commit 480887c

Browse files
d3j1xd3j1x
committed
١. العمل مع النماذج أ. كيف تعمل النماذج Forms والتسميات Labels وحقول الإدخال Inputs في لغة اتش.تي.إم.إل HTML ؟
1 parent 1045b53 commit 480887c

1 file changed

Lines changed: 138 additions & 1 deletion

File tree

‎forms-tables/forms-tables1.html‎

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,150 @@ <h1>نماذج وجداول اتش.تي.إم.إل</h1>
2929
<div class="sub-title">
3030
<h2>١. العمل مع النماذج</h2>
3131
<span class="hint">نظري</span>
32-
<p>قريبًا</p>
32+
<p></p>
3333
</div>
3434

3535
<section id="1">
3636
<h3>أ. كيف تعمل النماذج Forms والتسميات Labels وحقول الإدخال Inputs في لغة اتش.تي.إم.إل HTML ؟</h3>
37+
38+
<p>يُستخدم عنصر النموذج <code class="br">form</code> في لغة HTML لجمع معلومات المستخدم <em>user information</em> ، مثل الأسماء وعناوين البريد الإلكتروني.</p>
39+
<h4>إليك مثال على عنصر <code class="br">form</code> :</h4>
40+
41+
<div class="code-block"><pre><code>
42+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">"يوضع الرابط هنا"</span>&gt;</span>
43+
<span class="value">&lt;!-- عناصر الإدخال توضع هنا --&gt;</span>
44+
<span class="tag">&lt;/form&gt;</span>
45+
</code></pre></div>
46+
47+
<p>تحدد خاصية <code class="br">form</code> وجهة إرسال بيانات النموذج عند إرساله. ولجمع معلومات محددة، مثل الأسماء وعناوين البريد الإلكتروني، يمكنك استخدام عنصر الإدخال <code class="br">input</code>.</p>
48+
<h4>إليك مثال على استخدام عنصر <code class="br">input</code> :</h4>
49+
50+
<div class="code-block"><pre><code>
51+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
52+
<span class="tag">&lt;input <span class="attr">type=</span><span class="value">"text"</span> /&gt;</span>
53+
<span class="tag">&lt;/form&gt;</span>
54+
</code></pre></div>
55+
56+
<div class="preview">
57+
<form action="">
58+
<input type="text" />
59+
</form>
60+
</div>
61+
62+
<br />
63+
64+
<p>عناصر الإدخال <code class="br">input</code> هي عناصر فارغة ولا تحتوي على وسوم إغلاق. تحدد السمة <code class="br">type</code> نوع البيانات المتوقعة من المستخدم. في هذه الحالة، ستكون البيانات نصًا عاديًا. لإضافة تسمية لعنصر الإدخال <em>input</em> ، يمكنك استخدام عنصر <code class="br">label</code>.</p>
65+
66+
<h4>فيما يلي مثال على استخدام عنصر التسمية <code class="br">label</code> مع نص <code class="br">الاسم الكامل:</code> .</h4>
67+
68+
<div class="code-block"><pre><code>
69+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
70+
<span class="tag">&lt;label&gt;</span>
71+
:الاسم الكامل
72+
<span class="tag">&lt;input <span class="attr">type=</span><span class="value">"text"</span> /&gt;</span>
73+
<span class="tag">&lt;/label&gt;</span>
74+
<span class="tag">&lt;/form&gt;</span>
75+
</code></pre></div>
76+
77+
<h5>انقر على النص <code class="br">الاسم الكامل:</code> في نافذة المعاينة وسترى حقل الإدخال يصبح واضحًا.</h5>
78+
79+
<div class="preview">
80+
<form action="">
81+
<label>
82+
الاسم الكامل:
83+
<input type="text" />
84+
</label>
85+
</form>
86+
</div>
87+
88+
<br />
89+
90+
<p>بوضع حقل إدخال <code class="br">input</code> داخل عنصر تسمية <code class="br">label</code>، تُنشئ ارتباطًا ضمنيًا بين التسمية <code class="br">label</code> وحقل الإدخال <code class="br">input</code>. يشير مصطلح "ضمني" <em>"implicit"</em> إلى شيء مفهوم أو مُستنتج دون الحاجة إلى ذكره صراحةً أو تعريفه بخصائص أو عناصر إضافية. لربط تسمية <code class="br">label</code> بحقل إدخال <code class="br">input</code> بشكل صريح، يمكنك استخدام الخاصية <code class="br">for</code>.</p>
91+
92+
<h4>فيما يلي مثال على استخدام السمة <code class="br">for</code> لتسمية عنوان البريد الإلكتروني :</h4>
93+
94+
<div class="code-block"><pre><code>
95+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
96+
<span class="tag">&lt;label <span class="attr">for=</span><span class="value">"email"</span>&gt; <span class="txt">:البريد الإلكتروني</span> &lt;/label&gt;</span>
97+
<span class="tag">&lt;input <span class="attr">type=</span><span class="value">"email"</span> <span class="attr">id=</span><span class="value">"email"</span> /&gt;</span>
98+
<span class="tag">&lt;/form&gt;</span>
99+
</code></pre></div>
100+
101+
<h5>تفاعل مع عنصر الإدخال <code class="br">input</code> في نافذة المعاينة عن طريق كتابة عنوان بريد إلكتروني وهمي مثل: <code class="br">jane@example.com</code>.</h5>
102+
103+
<div class="preview">
104+
<form action="">
105+
<label for="email">البريد الإلكتروني:</label>
106+
<input type="email" id="email" />
107+
</form>
108+
</div>
109+
110+
<br />
111+
112+
<p>عند استخدام ربط صريح، يجب أن تتطابق قيم سمة <code class="br">for</code> و <code class="br">id</code>. في هذه الحالة، تم تعيين كلتا القيمتين إلى <code class="br">email</code>. يوفر نوع <em>type</em> البريد الإلكتروني <code class="br">email</code> في حقل الإدخال <em>input</em> تحققًا أساسيًا من صحة تنسيق <em>formatted</em> عناوين البريد الإلكتروني. إذا كنت ترغب في عرض تلميحات <b>hints</b> إضافية للمستخدمين حول المدخلات المتوقعة، يمكنك استخدام سمة <code class="br">placeholder</code>.</p>
113+
<h4>إليك مثال على استخدام خاصية <code class="br">placeholder</code> داخل حقل إدخال البريد الإلكتروني:</h4>
114+
115+
<div class="code-block"><pre><code>
116+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
117+
<span class="tag">&lt;label <span class="attr">for=</span><span class="value">"email"</span>&gt; <span class="txt">:البريد الإلكتروني</span> &lt;/label&gt;</span>
118+
<span class="tag">&lt;input <span class="attr">type=</span><span class="value">"email"</span> <span class="attr">id=</span><span class="value">"email"</span> <span class="attr">placeholder=</span><span class="value">"example@email.com"</span> /&gt;</span>
119+
<span class="tag">&lt;/form&gt;</span>
120+
</code></pre></div>
121+
122+
<h5>انقر على حقل إدخال البريد الإلكتروني وابدأ في كتابة البريد الإلكتروني وسترى النص التوضيحي <em>The placeholder text</em> يختفي.</h5>
123+
124+
<div class="preview">
125+
<form action="">
126+
<label for="email">البريد الإلكتروني:</label>
127+
<input type="email" id="email" placeholder="example@email.com" />
128+
</form>
129+
</div>
130+
131+
<br />
132+
133+
<p>بالنسبة للنص التوضيحي <em>The placeholder</em>، عليك تقديم نص قصير ومفيد لتوضيح تنسيق ونوع البيانات التي تتوقعها من المستخدمين. في هذه الحالة، يُظهر النص التوضيحي، <code class="br">example@email.com</code>، للمستخدم ضرورة إدخال عنوان بريد إلكتروني بتنسيق صحيح.</p>
134+
135+
136+
<!-- QUESTIONS -->
137+
<div class="questions">
138+
<h4>أسئلة :</h4>
139+
140+
141+
<h5>ما هو دور السمة <code class="br">for</code> داخل عنصر التسمية <code class="br">label</code> ؟</h5>
142+
143+
144+
<p> ١. يُحدد لون نص التسمية <code class="br">label</code>. ❌</p>
145+
<p><mark> ٢. يُستخدم لربط التسمية <code class="br">label</code> بحقل الإدخال <code class="br">input</code> بشكلٍ صريح. ✅</mark></p>
146+
<p> ٣. يُحدد محاذاة التسمية <code class="br">label</code> داخل حاويتها. ❌</p>
147+
<p> ٤. يُعرّف دالة جافا سكريبت <em>a JavaScript function</em> لتُنفّذ عند النقر على التسمية <code class="br">label</code>. ❌</p>
148+
149+
150+
<br>
151+
152+
153+
<h5>أي من القيم التالية تمثل القيمة الصحيحة لخاصية <code class="br">type</code> المستخدمة داخل المدخلات <em>inputs</em> ؟</h5>
154+
155+
156+
<p> ١. <code class="br">choice</code> ❌</p>
157+
<p> ٢. <code class="br">text-box</code> ❌</p>
158+
<p> ٣. <code class="br">numberinput</code> ❌</p>
159+
<p><mark> ٤. <code class="br">text</code> ✅</mark></p>
160+
161+
162+
<br>
163+
164+
<h5>ما هو دور سمة <code class="br">placeholder</code> داخل عنصر الإدخال <code class="br">input</code> ؟</h5>
165+
166+
<p><mark> ١. يُستخدم هذا الخيار لعرض تلميح <em>hint</em> أو نص توضيحي داخل حقل الإدخال <em>in the input field</em>. ✅</mark></p>
167+
<p> ٢. يُحدد نوع حقل الإدخال <em>the type of input field</em>. ❌</p>
168+
<p> ٣. يُحدد القيمة الأولية <em>the initial value</em> المعروضة في حقل الإدخال <em>in the input field</em>. ❌</p>
169+
<p> ٤. يُشير إلى الحد الأقصى لعدد الأحرف <em>the maximum length of characters</em> المسموح به في حقل الإدخال <em>in the input field</em>. ❌</p>
170+
171+
</div>
172+
37173
</section>
38174

175+
39176
<section id="2">
40177
<h3>ب. ما هي أنواع الأزرار Buttons المختلفة، ومتى يُنصح باستخدامها؟</h3>
41178
</section>

0 commit comments

Comments
 (0)