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