Skip to content

Commit 1e12dd8

Browse files
d3j1xd3j1x
committed
١. العمل مع النماذج ب. ما هي أنواع الأزرار Buttons المختلفة، ومتى يُنصح باستخدامها؟
1 parent 480887c commit 1e12dd8

2 files changed

Lines changed: 187 additions & 0 deletions

File tree

‎forms-tables/forms-tables1.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,183 @@ <h5>ما هو دور سمة <code class="br">placeholder</code> داخل عنص
175175

176176
<section id="2">
177177
<h3>ب. ما هي أنواع الأزرار Buttons المختلفة، ومتى يُنصح باستخدامها؟</h3>
178+
179+
<p>يُستخدم عنصر <code class="br">button</code> لتنفيذ إجراء معين عند تنشيطه <i>activated</i> .</p>
180+
<h4>إليك مثال على عنصر <code class="br">button</code> مع نص الزر <code class="br">ابدأ اللعبة</code>.</h4>
181+
182+
<div class="code-block"><pre><code>
183+
<span class="tag">&lt;button&gt;<span class="txt">ابدأ اللعبة</span>&lt;/button&gt;</span>
184+
</code></pre></div>
185+
<br />
186+
187+
<p>من الأمثلة الأخرى لاستخدام عنصر <code class="br">button</code>: إرسال نموذج <em>submitting a form</em> ، أو عرض نافذة منبثقة <em>showing a modal</em> ، أو تبديل <em>toggling</em> فتح وإغلاق قائمة جانبية <em>a side menu</em> . يحتوي عنصر <code class="br">button</code> على سمة "النوع" <code class="br">type</code> التي تتحكم في سلوك الزر عند تفعيله. القيمة الأولى الممكنة لسمة "النوع" هي نوع <code class="br">button</code>.</p>
188+
<h4>فيما يلي مثال على استخدام عنصر <code class="br">button</code> مع النوع <em>type</em> زر <code class="br">button</code> ونص <code class="br">إظهار التنبيه</code> :</h4>
189+
190+
<div class="code-block"><pre><code>
191+
<span class="tag">&lt;button <span class="attr">type=</span><span class="value">"button"</span>&gt;<span class="txt">إظهار التنبيه</span>&lt;/button&gt;</span>
192+
</code></pre></div>
193+
<br />
194+
195+
<p>افتراضياً، لن يقوم الزر <em>The button</em> بأي إجراء عند تفعيله. مع ذلك، يمكنك إضافة بعض أكواد جافا سكريبت <em>JavaScript code</em> لجعل الزر تفاعلياً <i>interactive</i> ، كعرض تنبيه <b>alert</b> في هذه الحالة.</p>
196+
<h4>انقر على زر <code class="br">إظهار التنبيه</code> لعرض تنبيه منبثق <i>an alert pop up</i> على الشاشة. للتفاعل مع المثال :</h4>
197+
198+
<div class="code-block"><pre><code>
199+
<span class="tag">&lt;button <span class="attr">type=</span><span class="value">"button"</span>&gt;<span class="txt">إظهار التنبيه</span>&lt;/button&gt;</span>
200+
201+
<span class="tag">&lt;script&gt;</span>
202+
<span class="jsblue">const</span> btn = document.<span class="jsblue">querySelector</span><span class="jsyellow">(<span class="jsgreen">"button"</span>);</span>
203+
btn.<span class="jsblue">addEventListener</span><span class="jsyellow">(<span class="jsgreen">"click"</span>, () <span class="jsblue">=> alert</span> (<span class="jsgreen">"لقد نقرت على زر التنبيه"</span>));</span>
204+
<span class="tag">&lt;/script&gt;</span>
205+
</code></pre></div>
206+
207+
<h5>ملاحظة: يستخدم هذا المثال التفاعلي لغة جافا سكريبت <em>JavaScript</em> ، ولكن لا داعي للقلق بشأن فهم كود جافا سكريبت. ستتعلم جافا سكريبت في وحدات لاحقة.</h5>
208+
209+
<div class="preview">
210+
<button type="button">إظهار التنبيه</button>
211+
<script>
212+
const btn = document.querySelector("button");
213+
btn.addEventListener("click", () => alert ("لقد نقرت على زر التنبيه"));
214+
</script>
215+
</div>
216+
<br />
217+
218+
<p>قيمة أخرى محتملة لخاصية النوع <code class="br">type</code> هي قيمة الإرسال <code class="br">submit</code>.</p>
219+
<h4>إليك مثال على استخدام عنصر <code class="br">button</code> من نوع <code class="br">submit</code> :</h4>
220+
221+
<div class="code-block"><pre><code>
222+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
223+
<span class="tag">&lt;label <span class="attr">for=</span><span class="value">"email"</span>&gt;<span class="txt">:البريد الإلكتروني</span>&lt;/label&gt;</span>
224+
<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">name=</span><span class="value">"email"</span> /&gt;</span>
225+
<span class="tag">&lt;button <span class="attr">type=</span><span class="value">"submit"</span>&gt;<span class="txt">إرسال النموذج</span>&lt;/button&gt;</span>
226+
<span class="tag">&lt;/form&gt;</span>
227+
</code></pre></div>
228+
229+
<div class="preview">
230+
<form action="">
231+
<label for="email">البريد الإلكتروني:</label>
232+
<input type="email" id="email" name="email" />
233+
<button type="submit">إرسال النموذج</button>
234+
</form>
235+
</div>
236+
<br />
237+
238+
<p>يحتوي عنصر النموذج <code class="br">form</code> هذا على تسمية <code class="br">label</code> وحقل إدخال <code class="br">input</code> لعنوان البريد الإلكتروني للمستخدم. عند النقر على زر الإرسال <em>The submit button</em> ، تُرسل بيانات المستخدم إلى الخادم <em>The server</em> وتُعالج <i>be processed</i> . القيمة الثالثة الممكنة لخاصية النوع <code class="br">type</code> هي قيمة إعادة التعيين <code class="br">reset</code>.</p>
239+
<h4>إليك مثال على عنصر نموذج <code class="br">form</code> يحتوي على زري إعادة التعيين <em>reset</em> والإرسال <em>submit</em> :</h4>
240+
241+
<div class="code-block"><pre><code>
242+
<span class="tag">&lt;form <span class="attr">action=</span><span class="value">""</span>&gt;</span>
243+
<span class="tag">&lt;label <span class="attr">for=</span><span class="value">"email"</span>&gt;<span class="txt">:البريد الإلكتروني</span>&lt;/label&gt;</span>
244+
<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">name=</span><span class="value">"email"</span> /&gt;</span>
245+
<span class="tag">&lt;button <span class="attr">type=</span><span class="value">"reset"</span>&gt;<span class="txt">إعادة تعيين النموذج</span>&lt;/button&gt;</span>
246+
<span class="tag">&lt;button <span class="attr">type=</span><span class="value">"submit"</span>&gt;<span class="txt">إرسال النموذج</span>&lt;/button&gt;</span>
247+
<span class="tag">&lt;/form&gt;</span>
248+
</code></pre></div>
249+
250+
<h5>تفاعل مع حقل إدخال البريد الإلكتروني في نافذة المعاينة بإدخال عنوان بريد إلكتروني وهمي. ثم انقر على زر إعادة التعيين لمشاهدة بريدك الإلكتروني يختفي من الحقل.</h5>
251+
252+
<div class="preview">
253+
<form action="">
254+
<label for="email">البريد الإلكتروني:</label>
255+
<input type="email" id="email" name="email" />
256+
<button type="reset">إعادة تعيين النموذج</button>
257+
<button type="submit">إرسال النموذج</button>
258+
</form>
259+
</div>
260+
<br />
261+
262+
<p>في هذا المثال المُعدَّل، يُستخدم عنصران، أحدهما مُسمّى <code class="br">label</code> والآخر مُدخل <code class="br">input</code> ، لجمع عنوان البريد الإلكتروني للمستخدم. عند النقر على زر إعادة التعيين <em>The reset button</em> ، سيتم مسح جميع بياناته المُدخلة. من المهم ملاحظة أن أزرار إعادة التعيين ليست الخيار الأمثل عادةً، لأنها قد تؤدي إلى قيام المستخدمين بإعادة تعيين بياناتهم عن طريق الخطأ. كما أن وجود أزرار متعددة <i>multiple buttons</i> في النموذج <em>form</em> قد يُسبب ازدحامًا <i>clutter up</i> في واجهة المستخدم <em>the user interface</em>.</p>
263+
264+
<p>هناك طريقة أخرى لإنشاء أزرار في لغة HTML وهي استخدام عنصر الإدخال <code class="br">input</code>. يحتوي عنصر الإدخال أيضًا على سمة النوع <code class="br">type</code> التي تتضمن القيم الممكنة التالية: إرسال <code class="br">submit</code>، إعادة تعيين <code class="br">reset</code>، وزر <code class="br">button</code>.</p>
265+
266+
<h4>فيما يلي مثال على استخدام عنصر الإدخال <code class="br">input</code> مع تعيين النوع <code class="br">type</code> إلى زر <code class="br">button</code> :</h4>
267+
268+
<div class="code-block"><pre><code>
269+
<span class="tag">&lt;input <span class="attr">class=</span><span class="value">"start-btn"</span> <span class="attr">type=</span><span class="value">"button"</span> <span class="attr">value=</span><span class="value">"ابدأ اللعبة"</span> /&gt;</span>
270+
271+
<span class="tag">&lt;script&gt;</span>
272+
document.<span class="jsblue">addEventListener</span><span class="jsyellow">(<span class="jsgreen">"DOMContentLoaded"</span>, () <span class="jsblue">=></span> {</span>
273+
<span class="jsblue">const</span> btn = document.<span class="jsblue">querySelector</span><span class="jsyellow">(<span class="jsgreen">".start-btn"</span>);</span>
274+
btn.<span class="jsblue">addEventListener</span><span class="jsyellow">(<span class="jsgreen">"click"</span>, () <span class="jsblue">=></span> {</span>
275+
<span class="jsblue">const</span> paraEl = document.<span class="jsblue">createElement</span><span class="jsyellow">(<span class="jsgreen">"p"</span>);</span>
276+
<span class="jsblue">const</span> bodyEl = document.<span class="jsblue">querySelector</span><span class="jsyellow">(<span class="jsgreen">"body"</span>);</span>
277+
278+
bodyEl.<span class="jsblue">appendChild</span><span class="jsyellow">(<span class="txt">paraEl</span>);</span>
279+
paraEl.textContent = <span class="jsgreen">"!!!لقد بدأت اللعبة"</span><span class="jsyellow">;</span>
280+
<span class="jsyellow">});</span>
281+
<span class="jsyellow">});</span>
282+
<span class="tag">&lt;/script&gt;</span>
283+
</code></pre></div>
284+
285+
<div class="preview previewDiv">
286+
<input class="start-btn" type="button" value="ابدأ اللعبة" />
287+
288+
<script>
289+
document.addEventListener("DOMContentLoaded", () => {
290+
const btn = document.querySelector(".start-btn");
291+
btn.addEventListener("click", () => {
292+
const paraEl = document.createElement("p");
293+
const previewEl = document.querySelector(".previewDiv");
294+
295+
previewEl.appendChild(paraEl);
296+
paraEl.textContent = "لقد بدأت اللعبة!!!";
297+
});
298+
});
299+
</script>
300+
</div>
301+
<br />
302+
303+
<p>تُستخدم خاصية "القيمة" <code class="br">value</code> لعرض نص الزر <i>the button text</i> . إذن، ما الفرق بين استخدام عنصر الإدخال <code class="br">input</code> وعنصر الزر <code class="br">button</code> ؟ عناصر الإدخال <code class="br">input</code> هي عناصر فارغة <b>void elements</b> ، أي لا يمكن أن تحتوي على عناصر فرعية <em>child nodes</em> ، مثل النص <em>as text</em> ، ولا يمكن أن تحتوي إلا على وسم بداية. من ناحية أخرى، يوفر عنصر الزر <code class="br">button</code> مرونة أكبر لأنه يمكنك تضمين النصوص والصور والأيقونات بداخله.</p>
304+
305+
306+
307+
<!-- QUESTIONS -->
308+
<div class="questions">
309+
<h4>أسئلة :</h4>
310+
311+
312+
<h5>أي من القيم التالية ليست قيمة صالحة لخاصية "النوع" <code class="br">type</code> داخل الأزرار <em>buttons</em> ؟</h5>
313+
314+
<p><mark> ١. <code class="br">src</code> ✅</mark></p>
315+
<p> ٢. <code class="br">button</code> ❌</p>
316+
<p> ٣. <code class="br">reset</code> ❌</p>
317+
<p> ٤. <code class="br">submit</code> ❌</p>
318+
319+
320+
<br>
321+
322+
323+
<h5>ما هو دور <code class="br">"type="reset</code> داخل عنصر <code class="br">button</code> ؟</h5>
324+
325+
326+
<p> ١. يُرسل بيانات النموذج form data . ❌</p>
327+
<p> ٢. يُعيد تعيين عناصر حقل النص <code class="br">textarea</code> فقط. ❌</p>
328+
<p><mark> ٣. يُعيد تعيين النموذج form . ✅</mark></p>
329+
<p> ٤. لا يوجد سلوك مُحدد لنوع type "إعادة التعيين" <code class="br">reset</code> . ❌</p>
330+
331+
332+
333+
<br>
334+
335+
<h5>ما هو العنصر الآخر الذي يمكنك استخدامه لتمثيل زر <em>a button</em> ؟</h5>
336+
337+
338+
<p> ١. <code class="br">img</code> ❌</p>
339+
<p> ٢. <code class="br">form</code> ❌</p>
340+
<p> ٣. <code class="br">header</code> ❌</p>
341+
<p><mark> ٤. <code class="br">input</code> ✅</mark></p>
342+
343+
344+
345+
346+
</div>
347+
348+
349+
350+
351+
178352
</section>
179353

354+
180355
<section id="3">
181356
<h3>ج. ما هو التحقق من صحة البيانات Form Validation من جانب العميل Client-Side في نماذج اتش.تي.إم.إل HTML Forms ، وما هي بعض الأمثلة؟</h3>
182357
</section>

‎forms-tables/style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,18 @@ section {
413413
color: whitesmoke;
414414
}
415415

416+
.code-block code .jsblue {
417+
color: lightblue;
418+
}
419+
420+
.code-block code .jsgreen {
421+
color: lightgreen;
422+
}
423+
424+
.code-block code .jsyellow {
425+
color: yellow;
426+
}
427+
416428
.help-code {
417429
display: block;
418430
direction: ltr;

0 commit comments

Comments
 (0)