شرح Form في HTML | دروس HTML5

عمل form ب HTML

لتلقي معلومات المستخدم، بما في ذلك الاسم وتفاصيل أخرى، نحتاج إلى عنصر يتلقى المعلومات ويرسلها إلى الخادم. للقيام بذلك، نستخدم وسم النموذج <form>. في هذا الدرس سوف نتعرف على هذا الوسم.


مثال على نموذج في HTML:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

يظهر ناتج الكود أعلاه في الصورة أدناه:

في المثال السابق، تم استخدام عناصر أخرى مثل المدخلات داخل علامة النموذج، والتي سأناقشها في هذا الفصل.

لاحظ أن زر الإرسال يُستخدم لإرسال معلومات النموذج إلى الخادم.

العنصر <form>

يحدد عنصر <form> في HTML النموذج المستخدم لتجميع بيانات إدخال المستخدم.

<form>
.
form elements
.
</form>

تحتوي النماذج في HTML على عناصر أخرى تسمى عناصر النموذج.

عناصر النموذج هي أنواع مختلفة من عناصر الإدخال مثل حقول النص ومربعات الاختيار وأزرار الاختيار وأزرار الإرسال وما إلى ذلك.

العنصر <input> 

عنصر <input> هو أهم عنصر في النموذج.

يمكن عرض عنصر <input> بطرق مختلفة اعتمادًا على خاصية نوعه.

إدخال النص (Text Input)

<input type = "text"> يحدد حقل إدخال سطر واحد:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

مدخلات  input radio 

<input type = "radio"> يحدد زر اختيار.

تتيح أزرار الاختيار للمستخدم الاختيار من بين عدة خيارات:

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

العنصر Submit

<input type = "submit"> يحدد زرالإرسال بيانات الإدخال إلى الخادم.

عادةً ما يكون هذا الإجراء عبارة عن صفحة على جانب الخادم تعالج البيانات (يعني معالجة أي إجراء على البيانات، بما في ذلك تسجيلها في قاعدة البيانات، إلخ)

يتم وضع عنوان الصفحة الوجهة في سمة الإجراء الخاصة بالنموذج:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

تم عرض إخراج عينة من الكود أعلاه في المثال الأول في هذه الصفحة.

صفة Action

تحدد سمة الإجراء، الإجراء الذي يجب تنفيذه عند إرسال النموذج إلى الخادم.

عادة، بعد أن ينقر المستخدم على زر الإرسال، يتم إرسال بيانات النموذج إلى صفحة الويب على الخادم.

في المثال أعلاه، يتم إرسال بيانات النموذج إلى صفحة على الخادم تسمى "/action_page.php". ستحتوي هذه الصفحة على نصوص برمجية من جانب الخادم تدير البيانات المقدمة:

<form action="/action_page.php">

إذا لم يتم تعيين سمة الإجراء، يتم تعيين هذه السمة على عنوان الصفحة الحالية.

لاحظ أنه في الأمثلة أعلاه، من المفترض أن يستخدم الخادم لغة الخادم php. لا يوجد فرق عندما يستخدم الخادم لغات أخرى، فقط قيمة سمة الإجراء تتغير.

الصفة Method

تحدد سمة الأسلوب طريقة GET أو POST التي يجب استخدامها عند إرسال البيانات.

<form action="/action_page.php" method="get">

أو 

<form action="/action_page.php" method="post">

متى تستخدم GET؟

الطريقة الافتراضية لإرسال البيانات هي GET.

عند استخدام GET لإرسال البيانات، ستكون البيانات المرسلة مرئية في عنوان المتصفح.

/action_page.php?firstname=Mickey&lastname=Mouse

متى تستخدم POST؟ 

استخدم دائمًا طريقة POST لإرسال البيانات الشخصية والمعلومات الحساسة. في طريقة POST، لا يتم عرض البيانات المقدمة في عنوان المتصفح.

لا يوجد حد على POST لحجم البيانات المرسلة ويمكن استخدامه لإرسال كميات كبيرة من البيانات.

الصفة Name

في عنصر النموذج، يجب أن يكون لكل حقل إدخال سمة تسمى الاسم الذي يجب إرسال قيمته.

إذا تم حذف سمة الاسم، فلن يتم إرسال بيانات حقل الإدخال هذا إلى الخادم.

في المثال أدناه، يتم إرسال قيمة حقل الإدخال "اسم العائلة" فقط إلى الخادم.

<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

نماذج باستخدام علامة <fieldset>

يُستخدم عنصر <fieldset> لتجميع البيانات ذات الصلة في النموذج.

يحدد العنصر <legend> تسمية توضيحية لعنصر <fieldset>.

<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

سيكون الكود أعلاه على النحو التالي:


كلمات مفتاحية: