شرح forms في html

 

ما هو Forms في html ؟

تستخدم Forms لجمع البيانات من users مثل الإسم أو البريد الإلكتروني وإلخ ..

ويتم إستخدام الوسم <form> لإنشاء النموذج في html مثال

<form action="form.php">

<label>Username:<input type="text"></label>

<label>Password:<input type="password"></label>

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

</form>

العنصر input

العنصر <input> هو العنصر الأكثر استخدامًا في نماذج HTML.

يسمح لنا تحديد أنواع مختلفة من حقول إدخال المستخدم ، اعتمادًا على السمة type . يمكن أن يكون العنصر <input> من نوع حقل النص (text field) ، حقل كلمة المرور (password field) ، مربع الاختيار (checkbox) ، زر الاختيار (radio button) ، زر الإرسال (submit button) ، زر إعادة الضبط (reset button) ، مربع اختيار الملف (file select box) ، بالإضافة إلى العديد من أنواع الإدخال الجديدة المقدمة في HTML5 .

حقل النص (Text field)

حقل النص (Text field) هو منطقة ذات سطر واحد تسمح للمستخدم بإدخال النص.

يتم إنشاء عناصر تحكم إدخال النص أحادية السطر باستخدام عنصر <input> ، الذي له السمة type التي بدورها تاخذ القيمة text.

حقل كلمة المرور (Password Field)

حقل كلمة المرور (Password field) مماثل لحقل النص (Text field). والفرق الوحيد بينهما سيتم إخفاء الأحرف في حقل كلمة المرور ، أي أنها تظهر كعلامات نجمية أو نقاط. وذلك لمنع شخص آخر من قراءة كلمة المرورعلى الشاشة. حقل كلمة المرور (Password field) عنصر تحكم إدخال نص أحادي السطر يتم إنشاؤه باستخدام العنصر <input> له السمة type التي بدورها تاخذ القيمة password.

أزرار الاختيار (Radio buttons)

تُستخدم أزرار الاختيار (Radio buttons) للسماح للمستخدم بتحديد خيار واحد فقط من مجموعة خيارات محددة مسبقًا. يتم إنشاؤه باستخدام عنصر <input> له السمة type التي بدورها تاخذ القيمة radio.

مربعات الاختيار (Checkboxes)

تسمح مربعات الاختيار (Checkboxes) للمستخدم بتحديد خيار واحد أو أكثر من مجموعة خيارات محددة مسبقًا. يتم إنشاؤه باستخدام العنصر <input> له السمة type التي بدورها تاخذ القيمة checkbox.

مربع اختيار ملف (File Select box)

يسمح حقل الملف للمستخدم بالاستعراض بحثًا عن ملف محلي وإرساله كمرفق مع بيانات النموذج. تقدم متصفحات الويب مثل Google Chrome و Firefox حقل إدخال تحديد ملف مع زر تصفح يمكّن المستخدم من التنقل في محرك الأقراص الثابتة المحلي وتحديد ملف.

يتم إنشاء مربع اختيار ملف (File Select box) أيضًا باستخدام العنصر <input> ، له السمة type التي بدورها تاخذ القيمة file.

منطقة النص (Textarea)

Textarea هو عنصر تحكم يوفر مربعًا نصيًا متعدد الأسطر يسمح للمستخدم بإدخال أكثر من سطر واحد من النص. يتم إنشاءه باستخدام العنصر <textarea>.

قائمة الخيارات (Select Boxes)

Select Boxes هو قائمة منسدلة بالخيارات تتيح للمستخدم تحديد خيار واحد أو أكثر من قائمة خيارات منسدلة. يتم إنشاءها بإستخدام العنصر <select> وعنصر <option>.

تحدد عناصر <option> داخل عنصر <select> بنود القائمة.

أزرار الإرسال (Submit) وإعادة الضبط (Reset)

يتم استخدام زر إرسال (Submit button) لإرسال بيانات النموذج إلى خادم ويب. عند النقر على زر الإرسال ، يتم إرسال بيانات النموذج إلى الملف المحدد في السمة action الموجودة داخل الوسم <form> لمعالجة البيانات المرسلة.

يعمل زر إعادة الضبط (Reset button) على إعادة ضبط كافة عناصر التحكم في النماذج إلى القيم الافتراضية. جرب المثال التالي بكتابة اسمك في حقل النص ، وانقر على زر إرسال لرؤيته عمليًا.