النموذج [HTML form] هو عنصر يُستخدم في صفحات الويب لجمع البيانات من المستخدمين وإرسالها إلى الخادم [server] لمعالجتها أو حفظها في قواعد البيانات.

يحتوي النموذج على عناصر إدخال خاصة [input وغيرها]، والتي تتيح للمستخدمين إدخال المعلومات المطلوبة.

لا يمكن وضع نموذج داخل نموذج آخر في صفحة HTML، حيث يجب أن يكون كل نموذج مستقلًا عن الآخر داخل الصفحة.

HTML form syntax

المثال يوضح طريقة كتابة عنصر النموذج [form] في لغة HTML.

<form>

</form>

</> HTML form Elements
العناصر داخل form في لغة HTML

<input>: يُستخدم لإنشاء حقل يسمح للمستخدم بإدخال بيانات من أنواع مختلفة، مثل النصوص أو الأرقام أو البريد الإلكتروني أو الملفات.
<label>: عنصر يُستخدم لإضافة تسمية توضيحية مرتبطة بحقل إدخال، مما يساعد المستخدم على فهم الغرض من الحقل.
<datalist>: يُستخدم لتوفير قائمة خيارات مقترحة يمكن للمستخدم الاختيار منها أثناء إدخال البيانات في حقل <input>.
<select>: يُستخدم لإنشاء قائمة منسدلة تحتوي على مجموعة من الخيارات التي يمكن للمستخدم اختيار أحدها أو أكثر [عند تفعيل خاصية التحديد المتعدد].
<option>: يُستخدم لتعريف خيار فردي ضمن قائمة الخيارات في <select> أو <datalist>.

<textarea>: يُستخدم لإنشاء حقل لإدخال نص طويل متعدد الأسطر.
<button>: يُستخدم لإنشاء زر يمكن للمستخدم النقر عليه لتنفيذ إجراء معيّن، مثل إرسال النموذج أو تشغيل أمر برمجي.
<fieldset>: يُستخدم لتجميع مجموعة من الحقول المرتبطة ضمن النموذج، لتسهيل تنظيمها وعرضها بشكل واضح.
<legend>: يُستخدم لإضافة عنوان أو تسمية توضيحية لمجموعة الحقول داخل عنصر <fieldset>.
<output>: يُستخدم لعرض نتيجة عملية حسابية أو ناتج ما داخل النموذج.
<optgroup>: يُستخدم لتجميع مجموعة من الخيارات تحت عنوان واحد داخل عنصر <select>.

</> HTML forms
عنصر form في لغة HTML

يُستخدم عنصر <form> في HTML لإنشاء مجموعة من حقول الإدخال [inputs] لجمع البيانات من المستخدمين وإرسالها إلى الخادم لمعالجتها أو تخزينها.

جربها بنفسك

HTML form

مثال على استخدام حقول الإدخال [inputs] داخل نموذج [form] في HTML.

<!DOCTYPE html>
<html>
<body>
  <form>
    <label for="fname">Firs tname:</label><br>
    <input type="text" id="fname" name="fname" value="Mohamed"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Magdy"><br><br>
    <input type="submit" value="Submit">
  </form> 
</body>
</html>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

HTML Forms
النماذج في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Forms HTML