العلامات المتعلقة بالنماذج

تشرح هذه المقالة العلامات المتعلقة بالنماذج.۔

هذا يشرح حقول النموذج المختلفة مثل إدخالات النص وقوائم السحب.۔

YouTube Video

العلامات المتعلقة بالنماذج

علامة <form>

1<form action="/submit" method="post">...</form>

• تُستخدم علامة <form> لتعريف النموذج بالكامل.۔
• تحدد السمة action الوجهة، وتحدد السمة method الطريقة (GET أو POST).۔
• يمكنك أيضًا تحديد السمة target، كما هو الحال مع علامة <a>۔

علامة <input> (حقل إدخال نصي)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> ينشئ حقل إدخال نص بخط واحد۔ يمكن للمستخدمين إدخال أي نص۔

• تحدد خاصية placeholder نصًا وصفيًا يظهر عندما يكون حقل الإدخال فارغًا.۔ يساعد هذا النص المستخدمين في فهم المدخلات المتوقعة بسهولة.۔ يختفي هذا النص تلقائيًا عند بدء الإدخال.۔

  • يُناسب placeholder تقديم معلومات إضافية وليس مناسبًا للتعليمات الهامة مثل الإدخال المطلوب۔ في مثل هذه الحالات، يجب عليك استخدام تسمية۔

علامة <input> (حقل إدخال كلمة مرور)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> ينشئ حقل لإدخال كلمة المرور۔ يتم إخفاء وتغطية الأحرف المدخلة لضمان الأمان۔

علامة <input> (حقل إدخال عنوان البريد الإلكتروني)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> ينشئ حقل لإدخال عنوان البريد الإلكتروني ويضمن صحة تنسيق البريد الإلكتروني۔

علامة <input> (مربع اختيار)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> ينشئ مربع اختيار۔ عندما تتوفر خيارات متعددة، يمكن للمستخدمين تحديد عناصر متعددة۔

علامة <input> (زر اختيار)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> ينشئ زر دائري يسمح للمستخدمين بتحديد خيار واحد فقط من مجموعة۔

علامة <input> (زر إرسال)

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

• <input type="submit"> ينشئ زرًا لإرسال البيانات في النموذج۔
• يتم تضمين قيمة السمة value في بيانات النموذج عند الإرسال.۔

علامة <input> (زر إعادة التعيين)

1<input type="reset" value="Reset">

• يُنشئ <input type="reset"> زرًا يعيد تعيين جميع قيم الإدخال في النموذج۔

علامة <input> (حقل مخفي)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> ينشئ حقل مخفي لا يظهر على الشاشة ويستخدم لإرسال البيانات إلى الخادم عند إرسال النموذج۔

علامة <input> (منتقي الألوان)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> يعرض منتقي الألوان وينشئ حقل إدخال لكي يختار المستخدمون لونًا۔

علامة <input> (حقل إدخال التاريخ)

1<input type="date" name="birthday">

• <input type="date"> ينشئ حقل إدخال التاريخ الذي يعرض تقويمًا لاختيار تاريخ۔

علامة <input> (حقل إدخال الوقت)

1<input type="time" name="appointment_time">

• <input type="time"> ينشئ حقل لإدخال الوقت، ويعرض منتقٍ للوقت۔

علامة <input> (حقل إدخال ملف)

1<input type="file" name="resume">

• يُنشئ <input type="file"> حقل إدخال للمستخدمين لاختيار ورفع الملفات۔
• يجب تعيين السمة enctype لعلامة form إلى multipart/form-data.۔

علامة <input> (عدد)

1<input type="number" name="quantity" min="1" max="10">

• يُنشئ <input type="number"> حقل إدخال للأرقام يتيح تعيين القيمة الدنيا والقيمة القصوى والخطوة (كمية الزيادة/النقصان)۔

علامة <input> (حقل اختيار نطاق للأرقام)

1<input type="range" name="volume" min="0" max="100" value="50">

• يُنشئ <input type="range"> حقل إدخال حيث يمكن للمستخدمين اختيار قيمة ضمن نطاق باستخدام المزلقة۔

علامة <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• ينشئ وسم <textarea> حقل إدخال نص متعدد الخطوط۔ إنه مناسب لإدخال نصوص طويلة أو تعليقات۔

علامة <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• ينشئ وسم <select> قائمة منسدلة، وتُحدد الخيارات باستخدام وسم <option>۔ يمكن للمستخدمين اختيار عنصر واحد أو عدة عناصر۔

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• لتمكين تحديدات متعددة، أضف السمة multiple۔ تحديد هذه السمة يعرض الخيارات كصندوق قائمة۔

وسم <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• يُستخدم وسم <optgroup> لتجميع العناصر ذات الصلة معًا۔ تتيح لك السمة label تعيين اسم مجموعة، مما يوفر خيارات واضحة للمستخدمين حتى إذا كانت القائمة طويلة۔

علامة <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• يُعرّف وسم <label> تسميات لحقل الإدخال، ومربع الاختيار، وأزرار الراديو، مما يحسن الاستخدام وإمكانية الوصول۔
• على سبيل المثال، يمكن للنقر على تسمية التركيز على حقل إدخال أو تبديل صندوق اختيار إلى تشغيل أو إيقاف.۔

علامة <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• يجمع وسم <fieldset> عناصر النموذج ذات الصلة، ويوفر وسم <legend> عنوانًا للمجموعة۔

علامة <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• يُعرّف وسم <button> زرًا قابلًا للنقر يؤدي إلى تقديم النموذج أو القيام بإجراءات أخرى۔

  عندما يتم تحديد type="button"، فإنه يعمل كزر عادي۔ النقر عليه لا يُقدم النموذج أو يُفعّل أي إجراءات افتراضية أخرى۔ يُستخدم عندما تريد تعيين إجراءات مخصصة باستخدام JavaScript۔

  عندما يتم تحديد type="submit"، فإنه يعمل كزر تقديم للنموذج۔ عند النقر على هذا الزر، سيتم تقديم النموذج الذي يحتوي عليه۔

  عندما يتم تحديد type="reset"، فإنه يعمل كزر لإعادة تعيين النموذج۔ النقر عليه سيعيد تعيين جميع حقول الإدخال في النموذج ويعيدها إلى حالتها الأولية۔

  إذا لم يتم تحديد الخاصية type، قد تعامل بعض المتصفحات ذلك كـ type="submit"، لذا يُوصى بتحديد النوع بصراحة لضمان السلوك المطلوب۔

• يمكن أن تتضمن علامة <button> محتوى HTML آخرًا بين علامة الفتح والإغلاق، مما يجعل من الممكن إنشاء أزرار تحتوي على أيقونات أو نصوص معقدة۔

• بالنسبة لزر الإرسال باستخدام علامة <input>، يتم تضمين قيمة السمة value في بيانات النموذج، ولكن مع علامة <button>، لا يتم إرسالها بشكل افتراضي.۔

  بتحديد السمات name و value لعلامة <button>، يمكن إرسال قيمتها كبيانات نموذج.۔

علامة <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• وسم <datalist> يوفر قائمة من الخيارات القابلة للاختيار لعنصر <input>۔ يمكن للمستخدمين إما اختيار من القائمة أو إدخال قيمتهم الخاصة۔

علامة <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• وسم <output> يعرض نتيجة العمليات الحسابية أو تفاعلات المستخدم۔ يُستخدم لعرض نتائج الحسابات بشكل ديناميكي داخل النماذج أو السكربتات۔
• بالنسبة لسمة for، حدد معرفات عناصر النموذج التي تريد ربطها، مفصولة بمسافات۔

علامة <progress>

1<progress value="70" max="100">70%</progress>

• وسم <progress> يعرض للمستخدمين تقدم المهمة۔ على سبيل المثال، يمكن أن يشير بصرياً إلى تقدم تحميل ملف أو تثبيت۔

علامة <meter>

1<meter value="0.6">60%</meter>

• وسم <meter> يُمثل قياساً رقمياً ضمن نطاق معروف۔ يستخدم لعرض قياسات مثل استخدام القرص أو مقياس الوقود ضمن نطاق محدد۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video