مساعدة المستخدمين في إدخال البيانات في النماذج

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

ما هي عناصر النموذج؟

يظهر لك عنصرا <input>، وهما <input type="text"> و<input type="file">. لماذا تبدو مختلفة؟

استنادًا إلى اسم العنصر وسمة type، تعرض المتصفحات واجهات مستخدم مختلفة، وتستخدم قواعد مختلفة للتحقّق، وتوفّر العديد من الميزات الأخرى. يساعدك استخدام عنصر التحكّم المناسب في النموذج في إنشاء نماذج أفضل.

تصنيفات عناصر النموذج

لنفترض أنك تريد إضافة إدخال حيث يمكن للمستخدم إدخال لونه المفضل. لإجراء ذلك، عليك إضافة عنصر <input> إلى النموذج. ولكن، كيف يعرف المستخدم أنه يجب عليه ملء لونه المفضل؟

لوصف عناصر التحكّم في النموذج، يمكنك استخدام <label> لكل عنصر تحكّم في النموذج.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

تتطابق السمة for في عنصر التصنيف مع السمة id في الإدخال.

الحصول على إدخالات المستخدم

كما يوحي الاسم، يُستخدم العنصر <input> لجمع المدخلات من المستخدمين.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

كما ذكرنا سابقًا، تربط السمة id بين <input> و<label>. ماذا عن سمة الاسم والنوع في هذا المثال؟

سمة الاسم

استخدِم السمة name لتحديد البيانات التي يُدخلها المستخدم مع عنصر التحكّم. إذا أرسلت النموذج، يتم تضمين هذا الاسم في الطلب. لنفترض أنّك اخترت تسمية عنصر تحكّم في النموذج mountain وإدخال المستخدم Gutenberg، إنّ الطلب يتضمّن هذه المعلومات على أنّها mountain=Gutenberg.

حاوِل تغيير اسم عنصر التحكّم في النموذج إلى hill. إذا فعلت هذا بشكل صحيح وأرسلت النموذج، سيظهر hill في عنوان URL.

نوع الإدخال

هناك أنواع مختلفة من عناصر التحكم في النموذج، تتضمن كل منها ميزات مدمجة مفيدة تعمل عبر المتصفحات والأنظمة الأساسية المختلفة. استنادًا إلى السمة type، يعرض المتصفّح واجهات مستخدم مختلفة ويعرض لوحات مفاتيح على الشاشة مختلفة ويستخدم قواعد تحقّق مختلفة وغير ذلك. لنطّلع على كيفية تغيير النوع.

باستخدام type="checkbox"، يعرض المتصفّح الآن مربّع اختيار بدلاً من حقل نصي. يتضمّن مربّع الاختيار أيضًا سمات إضافية. يمكنك ضبط السمة checked لتظهر بعلامة.

وهناك العديد من الأنواع الأخرى التي يمكنك اختيارها. لدينا نظرة مفصلة في وحدة لاحقة.

السماح باستخدام أسطر متعددة من النص

لنفترض أنك بحاجة إلى حقل يمكن للمستخدم كتابة تعليق فيه. لهذا، ألن يكون جيدًا أن يدخلوا إلى أسطر متعددة من النص؟ هذا هو الغرض من العنصر <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

الاختيار من قائمة الخيارات

كيف تتيح للمستخدمين قائمة بالخيارات للاختيار من بينها؟ يمكنك استخدام عنصر <select> لتحقيق ذلك.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

أولاً، عليك إضافة عنصر <select>. كما هو الحال في جميع عناصر التحكّم الأخرى في النموذج، يمكنك ربطه بـ <label> باستخدام السمة id ومنحه اسمًا فريدًا باستخدام السمة name.

بين علامتَي البداية والنهاية للعنصر <select>، يمكنك إضافة عناصر <option> متعدّدة، يمثّل كل منها خيارًا واحدًا.

يتضمّن كل خيار سمة value فريدة، ما يتيح لك التفريق بينها عند معالجة بيانات النموذج. النص داخل عنصر الخيار هو القيمة التي يمكن للإنسان قراءتها.

إذا أرسلت النموذج باستخدام علامة <select> هذه بدون تغيير الاختيار، سيتضمّن الطلب color=orange. ولكن كيف يعرف المتصفح الخيار الذي يجب استخدامه؟

يستخدم المتصفح الخيار الأول في القائمة، ما لم:

  • يتضمّن عنصر <option> واحد السمة selected.
  • يختار المستخدم خيارًا آخر.

تحديد خيار مسبقًا

باستخدام السمة selected، يمكنك تحديد خيار واحد مسبقًا. ويصبح هذا هو الخيار التلقائي، بغض النظر عن ترتيب تحديد عناصر <option>.

تجميع عناصر التحكم في النموذج

قد تحتاج أحيانًا إلى تجميع عناصر التحكم في النموذج. ويمكنك استخدام العنصر <fieldset> لإجراء ذلك.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

هل لاحظت العنصر <legend> داخل العنصر <fieldset>؟ ما الغرض من هذا الاستخدام برأيك؟

إذا كانت إجابتك "وصف مجموعة عناصر التحكم في النموذج"، فأنت على حق!

يتطلب كل عنصر <fieldset> عنصر <legend>، مثلما يحتاج كل عنصر تحكم في النموذج إلى عنصر <label> مرتبط. ويجب أيضًا أن يكون <legend> العنصر الأول في <fieldset>. بعد العنصر <legend>، يمكنك تحديد عناصر التحكّم في النموذج التي يجب أن تكون جزءًا من المجموعة.

إرسال نموذج

بعد تعلم كيفية إضافة عناصر التحكم في النموذج وتجميعها، قد تتساءل كيف يمكن للمستخدم إرسال نموذج؟

الخيار الأول هو استخدام عنصر <button>.

<button>Submit</button>

بعد أن ينقر المستخدم على الزر إرسال، يقدّم المتصفّح طلبًا إلى عنوان URL المحدّد في سمة الإجراء لعنصر <form>، مع تضمين كل البيانات من عناصر التحكّم في النموذج.

يمكنك أيضًا استخدام عنصر <input> مع type="submit" بدلاً من عنصر <button>. يبدو الإدخال ويعمل تمامًا مثل <button>. بدلاً من استخدام عنصر <label> لوصف <input>، استخدِم السمة value.

<input type="submit" value="Submit">

بالإضافة إلى ذلك، يمكن أيضًا إرسال نموذج باستخدام مفتاح Enter عندما يكون التركيز على حقل النموذج.

التحقق من فهمك

اختبر معلوماتك عن عناصر النموذج

كيف يمكنك ربط <label> بعنصر تحكّم في نموذج؟

for='color' في <label>، وname='color' في <input>.
يُرجى اختيار إجابة أخرى.
for='color' في <label>، وid='color' في <input>.
إجابة صحيحة
id='color' في <label>، وfor='color' في <input>.
يُرجى اختيار إجابة أخرى.
name='color' في <label>، وfor='color في <input>.
يُرجى اختيار إجابة أخرى.

ما هو الإجراء الذي يتم استخدامه لعنصر تحكّم النموذج المتعدّد الأسطر؟

عنصر <input> مع type='multi-line'
يُرجى اختيار إجابة أخرى.
العنصر <text>
يُرجى اختيار إجابة أخرى.
العنصر <textarea>
🎉
عنصر <input> مع type='long'
يُرجى اختيار إجابة أخرى.

كيف يمكنك إرسال نموذج؟

النقر على عنصر <button>
صحيح، هذا خيار واحد.
استخدام المفتاح Enter
صحيح، هذا خيار واحد.
النقر على عنصر <input> مع type='submit'
صحيح، هذا خيار واحد.
كل ما سبق
صحيح، جميع الإجابات هي خيارات ممكنة لإرسال نموذج.

المراجِع