لجعل النموذج تفاعليًا، عليك إضافة عناصر النموذج. تتوفّر عناصر تحكّم لإدخال البيانات واختيارها، وعناصر تصف عناصر التحكّم، وعناصر تُجمِّع الحقول، وأزرار لإرسال نموذج.
ما هي عناصر النموذج؟
يظهر لك عنصران من <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 المحدّد في سمة action
العنصر <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'