HTML -النموذج form

نموذج الويب هو احد ​عناصر الويب ويتيح لنا ارسال البيانات الى خادم الويب web server. يتم استخدام ​العنصر <form> لانشاء النموذج و هو يحتوي على مجموعة من عناصر الادخال التي ندخل فيها البيانات لارسالها الى الخادم، مثال:

<form>
	  <label>الاسم الاول:</label>
	  <input type="text">
	  <label>اسم العائلة:</label><br>
	  <input type="text"><br><br>
	  <input type="submit" value="ارسال">
</form> 

الناتج:

عنصر النموذج <form>

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

action

هي السمة التي تحدد مكان الخادم server الذي سوف يستقبل بيانات النموذج،
مثال : <form action="addUser.php">

method

هي تحدد طريقة بروتوكول ال HTTP والاكثر استخداما: GET و POST
مثال: <form action="addUser.php" method="POST">

target

يحدد ان يتم عرض الناتج الراجع من ​الخادم. هل سيتم عرضه في نافذة متصفح جديدة او علامة تبويب جديدة (blank_)، ام سيتم عرضه في نفس النافذة وهو الوضع الافتراضي (self_).
مثال: <form method="POST" target="_blank">

عناصر الادخال

يوجد عدد كبير من ​​عناصر الادخال <input> التي توجد داخل ​النموذج و التي تستخدم لاستقبال البيانات بانواعها المختلفة مثل النصوص و الارقام والتواريخ و الاختيار من متعدد وغيرها. كما يوجد ايضا زر الارسال (submit) وهو الذي يعطي الامر بارسال البيانات الموجودة في النموذج الى الخادم.

يوجد في عناصر الادخال ​سمة تعبر عن اسم العنصر وهي name، يجب ان تكون قيمة تلك الصفة مختلفة بين العناصر، حيث ان الكود في ​الخادم يفرق بين العناصر بتلك الصفة.
بعض من تلك العناصر هو عنصر واحد <input> وتختلف فيما بينها بسمة رئيسة هي التي تحدد النوع type، مثل <input type="text"> . و التالي قائمة باهم العناصر والانواع:

النصوص <“input type=”text>

وهي المسؤولة عن ادخال البيانات النصية. نستطيع اضافة بعض ​السمات الى ذلك العنصر

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• value: تحدد القيمة المبدئية للعنصر.
• maxlength: تحدد اقصى عدد من الحروف ممكن ان يستقبلها العنصر.
• minlength: تحدد اقل عدد من الحروف ممكن ان يستقبلها العنصر.

مثال: <input type="text">

كلمة السر <“input type=”password>

وهي المسؤول عن ادخال البيانات السرية مثل كلمة السر، وهو يعتبر مثل العنصر text لكن يقوم باستبدال قيمة العنصر بسلسلة من النقاط . نستطيع اضافة بعض ​السمات الى ذلك العنصر

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• value: تحدد القيمة المبدئية للعنصر.
• maxlength: تحدد اقصى عدد من الحروف ممكن ان يستقبلها العنصر.
• minlength: تحدد اقل عدد من الحروف ممكن ان يستقبلها العنصر.

مثال: <input type="password">

التاريخ <“input type=”date>

وهي المسؤولة عن ادخال البيانات النصية. نستطيع اضافة بعض ​السمات الى ذلك العنصر

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• value: تحدد القيمة المبدئية للعنصر.
• max: تحدد اكبرتاريخ ممكن ادخاله.
• min: تحدد اقل تاريخ ممكن ادخاله.

مثال: <input type="date">

البريد الاكتروني <“input type=”email>

يستخدم العنصر لادخال البريد الالكتروني ويتأكد انه مكتوب بصيغة صحيحة. نستطيع اضافة بعض ​السمات الى ذلك العنصر:

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• value: تحدد القيمة المبدئية للعنصر.

مثال: <input type="email">

سيرفض العنصر ارسال البيانات الى الخادم عند الضغط على زر ارسال، الا اذا كان البريد الالكتروني مكتوب بصيغة صحيحة

اختيار من متعدد <select>

تستخدم لاظهار اختيار قائمة من الاختيارات وهو يتكون من عنصرين رئيسين:
*<select> : هو العنصر الرئيس والي يتم تعريف فيه الصفة name ويحتوي على عنصر من نوع <option> او اكثر.
* <option>: هو العنصر الذي يحتوي على الاختيارات المتعددة.

مثال

<select name = "sex">
	<option value = "1" selected>ذكر</option>
	<option value = "2">انثى</option>
</select>

• عنصر ال <option> يحتوي على صفة “value” والتي تحتوي على القيمة التي يتم ارسالها الى الخادم، اما محتوى العنصر مثل كلمة ذكر وانثى هي القيمة التي يتم عرضها للمستخدم.
• selected هي اصفات عنصر ال <option> و تقوم بوضع الاختيار المبدئي.
• في المثال بالاعلى ما سيتم ارساله الى الخادم هو عنصر باسم “sex” و قيمتها: 1 او 2 على حسب الاختيار

اختيار من متعدد <“input type=”radio>

طريقة اخرى للاختيار من متعدد وذلك باظهار القيم وبجانبها ما يعرف بزر الراديو (radio button). يتم انشاءها باستخدام اكثر من عنصر من نوع <input type="radio"> لكن بنفس الاسم name. نستطيع اضافة بعض ​السمات الى ذلك العنصر:

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• checked: تجعل العنصر يتم اختياره مبدأيا.

مثال

<input type = "radio" name = "sex" value = "1" checked> ذكر
<br>
<input type = "radio" name = "sex" value = "2"> انثى

في المثال بالاعلى ما سيتم ارساله الى الخادم هو عنصر باسم "sex" و قيمتها: 1 او 2 على حسب الاختيار.

خانة الاختيار <“input type=”checkbox>

يستخدم العنصر لانشاء خانات الاختيار. نستطيع اضافة بعض الصفات الى ذلك العنصر. عند الارسال الى الخادم، يتم ارسال العناصر التي تم اختيارها فقط.

• name: يحدد اسم العنصر في النموذج وعند ارساله الى الخادم.
• value: تحدد قيمة العنصر.
• checked: تجعل العنصر يتم اختياره مبدأيا

مثال:

<input type = "checkbox" name = "history" value = "chosen" checked> التاريخ
<br>
<input type = "checkbox" name = "math" value = "chosen"> الرياضيات

ارسال <“input type=”submit>

يستخدم العنصر لانشاء زر الارسال، الذي يقوم بارسال البيانات في النموذج الى الخادم. نستطيع تغير النص على الزر باستخدام الصفة value

مثال

<input type="submit" value="ارسال">