نماذج وجداول اتش.تي.إم.إل

أ. كيف تعمل النماذج Forms والتسميات Labels وحقول الإدخال Inputs في لغة اتش.تي.إم.إل HTML ؟

يُستخدم عنصر النموذج form في لغة HTML لجمع معلومات المستخدم user information ، مثل الأسماء وعناوين البريد الإلكتروني.

إليك مثال على عنصر form :

<form action="يوضع الرابط هنا">
 <!-- عناصر الإدخال توضع هنا -->
</form>
            

تحدد خاصية form وجهة إرسال بيانات النموذج عند إرساله. ولجمع معلومات محددة، مثل الأسماء وعناوين البريد الإلكتروني، يمكنك استخدام عنصر الإدخال input.

إليك مثال على استخدام عنصر input :

<form action="">
 <input type="text" />
</form>
            

عناصر الإدخال input هي عناصر فارغة ولا تحتوي على وسوم إغلاق. تحدد السمة type نوع البيانات المتوقعة من المستخدم. في هذه الحالة، ستكون البيانات نصًا عاديًا. لإضافة تسمية لعنصر الإدخال input ، يمكنك استخدام عنصر label.

فيما يلي مثال على استخدام عنصر التسمية label مع نص الاسم الكامل: .

<form action="">
 <label>
  :الاسم الكامل
  <input type="text" />
 </label>
</form>
            

انقر على النص الاسم الكامل: في نافذة المعاينة وسترى حقل الإدخال يصبح واضحًا.

بوضع حقل إدخال input داخل عنصر تسمية label، تُنشئ ارتباطًا ضمنيًا بين التسمية label وحقل الإدخال input. يشير مصطلح "ضمني" "implicit" إلى شيء مفهوم أو مُستنتج دون الحاجة إلى ذكره صراحةً أو تعريفه بخصائص أو عناصر إضافية. لربط تسمية label بحقل إدخال input بشكل صريح، يمكنك استخدام الخاصية for.

فيما يلي مثال على استخدام السمة for لتسمية عنوان البريد الإلكتروني :

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

تفاعل مع عنصر الإدخال input في نافذة المعاينة عن طريق كتابة عنوان بريد إلكتروني وهمي مثل: jane@example.com.

عند استخدام ربط صريح، يجب أن تتطابق قيم سمة for و id. في هذه الحالة، تم تعيين كلتا القيمتين إلى email. يوفر نوع type البريد الإلكتروني email في حقل الإدخال input تحققًا أساسيًا من صحة تنسيق formatted عناوين البريد الإلكتروني. إذا كنت ترغب في عرض تلميحات hints إضافية للمستخدمين حول المدخلات المتوقعة، يمكنك استخدام سمة placeholder.

إليك مثال على استخدام خاصية placeholder داخل حقل إدخال البريد الإلكتروني:

<form action="">
 <label for="email"> :البريد الإلكتروني </label>
 <input type="email" id="email" placeholder="example@email.com" />
</form>
            

انقر على حقل إدخال البريد الإلكتروني وابدأ في كتابة البريد الإلكتروني وسترى النص التوضيحي The placeholder text يختفي.

بالنسبة للنص التوضيحي The placeholder، عليك تقديم نص قصير ومفيد لتوضيح تنسيق ونوع البيانات التي تتوقعها من المستخدمين. في هذه الحالة، يُظهر النص التوضيحي، example@email.com، للمستخدم ضرورة إدخال عنوان بريد إلكتروني بتنسيق صحيح.

ب. ما هي أنواع الأزرار Buttons المختلفة، ومتى يُنصح باستخدامها؟

يُستخدم عنصر button لتنفيذ إجراء معين عند تنشيطه activated .

إليك مثال على عنصر button مع نص الزر ابدأ اللعبة.

<button>ابدأ اللعبة</button>
            

من الأمثلة الأخرى لاستخدام عنصر button: إرسال نموذج submitting a form ، أو عرض نافذة منبثقة showing a modal ، أو تبديل toggling فتح وإغلاق قائمة جانبية a side menu . يحتوي عنصر button على سمة "النوع" type التي تتحكم في سلوك الزر عند تفعيله. القيمة الأولى الممكنة لسمة "النوع" هي نوع button.

فيما يلي مثال على استخدام عنصر button مع النوع type زر button ونص إظهار التنبيه :

<button type="button">إظهار التنبيه</button>
            

افتراضياً، لن يقوم الزر The button بأي إجراء عند تفعيله. مع ذلك، يمكنك إضافة بعض أكواد جافا سكريبت JavaScript code لجعل الزر تفاعلياً interactive ، كعرض تنبيه alert في هذه الحالة.

انقر على زر إظهار التنبيه لعرض تنبيه منبثق an alert pop up على الشاشة. للتفاعل مع المثال :

<button type="button">إظهار التنبيه</button>

<script>
 const btn = document.querySelector("button");
 btn.addEventListener("click", () => alert ("لقد نقرت على زر التنبيه"));
</script>
            

ملاحظة: يستخدم هذا المثال التفاعلي لغة جافا سكريبت JavaScript ، ولكن لا داعي للقلق بشأن فهم كود جافا سكريبت. ستتعلم جافا سكريبت في وحدات لاحقة.

قيمة أخرى محتملة لخاصية النوع type هي قيمة الإرسال submit.

إليك مثال على استخدام عنصر button من نوع submit :

<form action="">
 <label for="email">:البريد الإلكتروني</label>
 <input type="email" id="email" name="email" />
 <button type="submit">إرسال النموذج</button>
</form>
            

يحتوي عنصر النموذج form هذا على تسمية label وحقل إدخال input لعنوان البريد الإلكتروني للمستخدم. عند النقر على زر الإرسال The submit button ، تُرسل بيانات المستخدم إلى الخادم The server وتُعالج be processed . القيمة الثالثة الممكنة لخاصية النوع type هي قيمة إعادة التعيين reset.

إليك مثال على عنصر نموذج form يحتوي على زري إعادة التعيين reset والإرسال submit :

<form action="">
 <label for="email">:البريد الإلكتروني</label>
 <input type="email" id="email" name="email" />
 <button type="reset">إعادة تعيين النموذج</button>
 <button type="submit">إرسال النموذج</button>
</form>
            

تفاعل مع حقل إدخال البريد الإلكتروني في نافذة المعاينة بإدخال عنوان بريد إلكتروني وهمي. ثم انقر على زر إعادة التعيين لمشاهدة بريدك الإلكتروني يختفي من الحقل.

في هذا المثال المُعدَّل، يُستخدم عنصران، أحدهما مُسمّى label والآخر مُدخل input ، لجمع عنوان البريد الإلكتروني للمستخدم. عند النقر على زر إعادة التعيين The reset button ، سيتم مسح جميع بياناته المُدخلة. من المهم ملاحظة أن أزرار إعادة التعيين ليست الخيار الأمثل عادةً، لأنها قد تؤدي إلى قيام المستخدمين بإعادة تعيين بياناتهم عن طريق الخطأ. كما أن وجود أزرار متعددة multiple buttons في النموذج form قد يُسبب ازدحامًا clutter up في واجهة المستخدم the user interface.

هناك طريقة أخرى لإنشاء أزرار في لغة HTML وهي استخدام عنصر الإدخال input. يحتوي عنصر الإدخال أيضًا على سمة النوع type التي تتضمن القيم الممكنة التالية: إرسال submit، إعادة تعيين reset، وزر button.

فيما يلي مثال على استخدام عنصر الإدخال input مع تعيين النوع type إلى زر button :

<input class="start-btn" type="button" value="ابدأ اللعبة" />

<script>
 document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector(".start-btn");
  btn.addEventListener("click", () => {
   const paraEl = document.createElement("p");
   const bodyEl = document.querySelector("body");

   bodyEl.appendChild(paraEl);
   paraEl.textContent = "!!!لقد بدأت اللعبة";
  });
 });
</script>
            

تُستخدم خاصية "القيمة" value لعرض نص الزر the button text . إذن، ما الفرق بين استخدام عنصر الإدخال input وعنصر الزر button ؟ عناصر الإدخال input هي عناصر فارغة void elements ، أي لا يمكن أن تحتوي على عناصر فرعية child nodes ، مثل النص as text ، ولا يمكن أن تحتوي إلا على وسم بداية. من ناحية أخرى، يوفر عنصر الزر button مرونة أكبر لأنه يمكنك تضمين النصوص والصور والأيقونات بداخله.

ج. ما هو التحقق من صحة البيانات Form Validation من جانب العميل Client-Side في نماذج اتش.تي.إم.إل HTML Forms ، وما هي بعض الأمثلة؟

عندما يقوم المستخدم بملء نموذج form على موقعك الإلكتروني، من المهم أن يُدخل جميع المعلومات المطلوبة بالتنسيق الصحيح. تحتوي "عناصر التحكم" controls في "نماذج اتش.تي.إم.إل" HTML form ، مثل "حقول الإدخال" inputs ، على العديد من "آليات التحقق المدمجة" built-in validation التي يمكنك استخدامها للتحقق من صحة البيانات. سيساعد ذلك في ضمان تصحيح المستخدم لهذه الأخطاء قبل إرسال المعلومات ومعالجتها من قِبل "الخادم" The server .

يشير مصطلح "جانب العميل" client-side إلى كل ما يحدث على جهاز المستخدم، مثل الجزء من موقع الويب أو التطبيق الذي تتفاعل معه مباشرةً. ويشمل ذلك التخطيط والتصميم وأي ميزات تفاعلية interactive features .

يشير مصطلح "جانب الخادم" server-side إلى كل ما يحدث على الخادم on the server ، أو الحاسوب، أو النظام system الذي يستضيف hosts الموقع الإلكتروني أو التطبيق. ويشمل ذلك معالجة البيانات، وتشغيل التطبيقات، والتعامل مع الطلبات handling requests الواردة من جهاز المستخدم the user's device.

مع أن "التحقق من صحة البيانات من جانب العميل" client-side validation مهم، إلا أنك تحتاج أيضًا إلى "التحقق من صحة البيانات من جانب الخادم" server-side validation لتعزيز الأمان for added security . إذ يمكن للمستخدمين ذوي النوايا الخبيثة Malicious users تجاوز عمليات التحقق bypass checks من "جانب العميل" client-side ، لذا فإن "التدابير القوية" robust measures من "جانب الخادم" server-side ضرورية. ستتعرف على المزيد حول هذا الموضوع في وحدة لاحقة. أما الآن، فلنلقِ نظرة على بعض الأمثلة على "التحقق من صحة نماذج البيانات" form validation من "جانب العميل" client-side .

من الأمثلة الشائعة على "التحقق المدمج من صحة البيانات في النماذج" built-in form validation استخدام خاصية "مطلوب" required في "حقول الإدخال" inputs . تُحدد هذه الخاصية required أن المستخدم مُلزم بملء هذا "الجزء من النموذج" portion of the form قبل إرساله.

إليك مثال على استخدام السمة required في حقل إدخال البريد الإلكتروني email input :

<form action="">
 <label for="email">:البريد الإلكتروني (الحقل المطلوب)</label>
 <input required type="email" id="email" name="email" />
 <button type="submit">إرسال النموذج</button>
</form>
            

انقر على زر إرسال النموذج دون تقديم عنوان بريد إلكتروني، وستظهر لك رسالة تطلب منك ملء الحقل.

سيكون لكل متصفح browser مجموعة أنماط set of styles خاصة به لعرض رسالة التنبيه هذه.

من مزايا استخدام "حقل إدخال البريد الإلكتروني" the email input وجود "آلية تحقق أساسية" basic validation لضمان صحة تنسيق عناوين البريد الإلكتروني. على سبيل المثال، إذا كتبت كلمات عشوائية وضغطت على زر الإرسال، فسيظهر المتصفح تنبيهًا يفيد بعدم وجود علامة @.

اكتب abc في "خانة البريد الإلكتروني" the email field واضغط على زر الإرسال. ستظهر لك رسالة تفيد بأن عنوان البريد الإلكتروني غير صالح :

<form action="">
 <label for="email">:البريد الإلكتروني (الحقل المطلوب)</label>
 <input required type="email" id="email" name="email" />
 <button type="submit">إرسال النموذج</button>
</form>
            

من المهم ملاحظة أن المتصفحات browsers تتحقق فقط من صحة عناوين البريد الإلكتروني القياسية basic validation for standard email addresses . ويقع على عاتقك إضافة طبقات layers إضافية من التحقق، والتي ستتعرف عليها في وحدات لاحقة.

من بين طرق التحقق الأخرى من صحة "مدخلات البريد الإلكتروني" email inputs استخدام سمات minlength و maxlength .

إليك مثال باستخدام التحقق الإضافي:

<form action="">
 <label for="email">:البريد الإلكتروني (الحقل المطلوب)</label>
 <input 
    required 
    type="email" 
    name="email"
    id="email" 
    minlength="4" 
    maxlength="64" 
 />
 <button type="submit">إرسال النموذج</button>
</form>
            

اكتب b@m في الحقل وانقر على زر الإرسال. ستظهر لك رسالة أن النص لا يستوفي الحد الأدنى المطلوب من الطول.

تُستخدم سمات minlength و maxlength لتحديد الحد الأدنى والحد الأقصى لطول "حقل إدخال البريد الإلكتروني" the email input بالأحرف. في حال عدم تحديد الحد الأدنى للطول أو تجاوز الحد الأقصى، سيعرض المتصفح "رسالة تنبيه" alert message .

د. ما هي حالات النماذج Form States المختلفة، ولماذا تعد مهمة؟

في لغة HTML، يمكن أن تكون "عناصر التحكم في النموذج" form controls، مثل "المدخلات" inputs، في "مراحل" stages أو "حالات" conditions مختلفة مثل "حالة التركيز" focused state، أو "حالة القراءة فقط" readonly state، أو "حالة التعطيل" disabled state.

تُعتبر "الحالة الأولى" The first state هي "الحالة الافتراضية" The default state. الحالة الافتراضية "لحقل إدخال البريد الإلكتروني" email address input هي "حقل فارغ" a blank input.

هذا هو شكل "حقل إدخال البريد الإلكتروني" the email input عند عرضه لأول مرة على الصفحة:

<input required type="email" id="email" name="email" />
            

عندما ينقر المستخدم على "عنصر تحكم في النموذج" form control أو يحدده باستخدام مفتاح Tab، فهذا يعني أنه في "حالة التركيز" focused state. وعندما يكون "حقل الإدخال" input في "حالة التركيز" focused state، تُظهر معظم المتصفحات "إطارًا أزرق مميزًا" a blue highlighted border حوله. ولكن يمكنك إضافة "أنماط إضافية" additional styles باستخدام CSS.

انقر على أي جزء من المساحة البيضاء في نافذة المعاينة ثم اضغط على مفتاح Tab لرؤية "حالة التركيز" The focus state :

<input required type="email" id="email" name="email" />
            

"حالة أخرى للنموذج" Another form state هي "حالة التعطيل" The disabled state. تُظهر هذه الحالة للمستخدمين أنه لا يمكن "التركيز" focused على "حقل الإدخال" input أو تفعيله.

<input disabled type="email" id="email" name="email" />
            

على غرار "حالة التركيز" The focused state، يمكنك اختيار إضافة "أنماط إضافية" additional styles لـ "حالة التعطيل" The disabled state باستخدام CSS.

"نوع آخر من حالات النموذج" Another type of form state هو "حالة القراءة فقط" The readonly state. في هذه الحالة، لا يمكن للمستخدم تعديل "عنصر تحكم النموذج" form control، مثل "حقل الإدخال" input.

<input 
 readonly 
 type="email" 
 name="email"
 id="email" 
 value="example@email.com" 
/>
            

حاول تعديل القيمة الحالية لـ example@email.com في نافذة المعاينة، وستلاحظ أن ذلك غير ممكن .

يتمثل أحد الاختلافات الرئيسية بين "حالة التعطيل" The disabled state و"حالة القراءة فقط" The readonly state في أن "حالة القراءة فقط" readonly state يمكن "التركيز" focused عليها بينما لا يمكن "التركيز" focused على "حالة التعطيل" disabled state.

يُعد فهم "حالات النموذج" form states المختلفة أمرًا مهمًا لأنها تضمن "تجربة مستخدم سلسة" a smooth user experience من خلال توفير ملاحظات وتوجيهات واضحة أثناء "معالجة الأخطاء" handling errors.