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