20/02/2024
تعلم أساسيات HTML

الدرس التاسع عشر والأخير – HTML Forms – شرح الفورم باللغة العربية بالتفصيل

كل ما تريد معرفته عن HTML Forms – شرح الفورم باللغة العربية : تستخدم الفورم لجمع معلومات يدخلها المستخدم ثم يتم إرسالها للسيرفر لمعالجتها. ونستخدم العنصر Form لإنشهاء أي أدوات إدخال. كما في المثال التالي:

<form>
.
form elements
.
</form>

HTML Forms – شرح الفورم – العنصر <form> في HTML

العنصر <form> يحتوي على جميع أنواع عناصر الإدخال فعلى سبيل المثال وليس الحصر:

  • حقول النص أو text fields
  • مربعات الاختيار أو checkboxes
  • خيارات التبديل أو radio buttons
  • أزرار الإرسال أو Submit buttons

HTML Forms – شرح الفورم – عنصر الإدخال <input> في HTML Forms

يعتبر عنصر الإدخال <input> من أكثر عناصر الإدخال في الفورم أو HTML Forms. ويمكن عرضه بالعديد من الطرق طبقا للسمة type التي تحدد نوع عنصر الإدخال. كما هو موضح أدناه:

<input type="button"> لعرض زر قابل للنقر عليه
<input type="checkbox"> مربعات خيار لإختيار بنود متعددة
<input type="color"> حقل اختيار لون طبقا للمتصفح المستخدم
<input type="date"> حقل إدخال تاريخ
<input type="datetime-local"> حقل إدخال وقت طبقا للمتصفح ومنطقة معينة
<input type="email"> حقل إدخال بريد الكتروني أو إيميل
<input type="file"> حقل اختيار ملف لرفعه على السيرفر
<input type="hidden"> حقل ادخال لا يظر للمستخدم ولا يمكنه التعديل فيه
<input type="image"> حقل اختيار صورة
<input type="month"> حقل اختيار الشهر والسنة طبقا للمتصفح
<input type="number"> حقل ادخال رقم
<input type="password"> لإنشاء حقل باسوورد أو كلمة دخول
<input type="radio"> خيارات تبديل لاختيار بند واحد من متعدد
<input type="range"> حقل ادخال رقم بقيمة محددة بين عددين
<input type="reset"> لإعادة جميع عناصر الفورم إلى القيم المحددة تلقائيا
<input type="search"> حقل ادخال بحث يعمل مثل حقل ادخال نص
<input type="submit"> زر ارسال لإرسار البيانات التي تم إدخالها في الفورم
<input type="tel"> حقل ادخال رقم هاتف أو تليفون
<input type="text"> حقل لإدخال نص مكون من سطر واحد
<input type="time"> حقل إدخال وقت طبقا للمتصفح غير مرتبط بمنطقة معينة
<input type="url"> حقل ادخال رابط أو لينك
<input type="week"> حقل ادخال اسبوع وسنة طبقا للمتصفح

حقول النص أو Text Fields

لإنشاء حقول النص نستخدم الكود <“input type=”text> حيث يقوم بعرض حقل لإدخال نص مكون من سطر واحد. كما في المثال التالي:

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form> 

لاحظ ان الفور نفسها لا تظهر، كما أن العرض التلقائي لحق الإدخال يكون بسعة 20 حرف. حيث تظهر في المتصفح كالتالي:





HTML Forms – شرح الفورم – العنصر <label>

هل لاحظت العنصر label في المثال السابق؟ إن العنصر label يستخدم لكتابة عنوان للعديد من عناصر الفورم. كما يفيد هذا العنصر أيضا عند استخدام قارئ الشاشة حيث سيتم قراءته عند التركيز على حقل الإدخال.

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

يمكن استخدام السمة for في العنصر label حيث ستكون مساوية للسمة id في عنصر الإدخال input لربطهم معا.


مربعات التبديل أو Radio Buttons

يستخدم الكود <“input type=”radio> لإنشاء مربعات اختيار ، حيث يقوم المستخدم باختيار بند واحد فقط من متعدد. كما في المثال التالي:

 <p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

وسوف يظهر كالتالي في المتصفح:

Choose your favorite Web language:




مربعات الاختيار أو Checkboxes

يستخدم الكود <“input type=”checkbox> لاختيار بنود متعددة أو لاشئ كما في المثال التالي:

 <form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1">bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3">boat</label>
</form> 

وتظهر في المتصفح كالتالي:




زر الإرسال أو The Submit Button

نستخدم الكود <“input type=”submit> . لإنشاء زر لإرسال البيانات أو المعلومات (التي تم ادخالها في الفورم) إلى السيرفر أو ما يسمى form-handler وهو عبارة عن ملف على السيرفر مجهز لمعالجة البيانات التي يتم ارسالها إليه من الفورم. ويتم تحديد ذلك الملف في الفورم عن طريق السمة action. كما في المثال التالي:

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

السمة Name في العنصر <input>

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


السمة Action

نقوم بإضافة السمة action إلى العنصر form لتحديد ما الاوامر التي سيتم تنفيذها عند ارسال البيانات المدخلة في الفورم. ولكن عادة ما يتم إرسال البيانات إلى ملف على السيرفر عندما يضغط المستخدم على زر الإرسال.

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

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

السمة Target

تستخدم السمة Target لتحديد أين سيتم عرض رسالة الرد بعد أن يتم ارسال الفورم. ويمكن أن تحتوي السمة Target على واحدة من القيم التالية:

_blank سيتم عرض الرد في نافذة جديدة أو صفحة جديدة
_self سيتم عرض الرد في الصفحة الحالية أو النافذة الحالية
_parent سيتم عرض الرد في الإطار الحالي
_top سيتم عرض الرد في كامل النافذة الحالية
framename سيتم عرض الرد في اطار باسم محدد

كما في المثال:

 <form action="/action_page.php" target="_blank"> 

السمة Method

تستخدم السمة method لتحديد الطريقة التي سيتم ارسال البيانات بها إلى السيرفر. وتوجد طريقتان:

  • قيم في عنوان URL ونقوم بتحديدها عن طريق الكود ( “method=”get ) وهذه الطريقة هي الطريقة التلقائية.
  • عن طريق شفرة HTTP ونقوم بتحديدها عن طريق الكود ( “method=”post ) ، وهذه الطريقة لاتظهر فيها البيانات في رابط الصفحة URL.

مثال على طريقة الارسال باستخدام get

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

مثال على طريقة الارسال باستخدام post

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

ملاحظات على GET

  • يتم ارسال البيانات على شكل ازواج من الاسم/القيمة في عنوان URL.
  • لا تقوم باستخدام get أبدا إذا كنت ستقوم بارسال بيانات حساسة حيث ستكون البيانات ظاهرة في عنوان URL للمستخدم.
  • طول عنوان URL يكون محدود (حوالى 2048 حرف)
  • تكون مفيدة لإرسال البيانات التي يمكن للمستخدم أن يقوم بحفظ النتائج في المفضلة أو bookmark.
  • GET جيدة للبيانات التي لا تحتاج للأمان non-secure data مثل استعلامات البحث في جوجل.

ملاحظات على POST

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

السمة Autocomplete

تستخدم السمة autocomplete لتحديد إذا كان الفورم يتم ملئه تلقائيا أم لا (autocomplete on or off). عندما تكون autocomplete لها القيمة on ، فإن المتصفح يقوم بملئ الفورم تلقائيا بالبيانات التي أدخلها المستقدم سابقا. كما في المثال التالي:

 <form action="/action_page.php" autocomplete="on"> 

السمة Novalidate

تستخدم السمة novalidate كسمة منطقية تقوم بإرجاع القيمة من نوع boolean. فعندما تكون موجودة ، تكون البيانات التي تم ادخالها في الفورم novalidate عند الإرسال. كما في المثال التالي:

 <form action="/action_page.php" novalidate> 

HTML Forms – شرح الفورم – العنصر <select>

يستخدم العنصر select لإنشاء قائمة منسدلة أو قائمة drop-down كما في المثال التالي:

 <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select> 

ويستخدم العنصر <option> لتحديد الاختيار الذي سيظهر بشكل تلقائي للمستخدم، فإذا لم يتم تحديده سيكون الاختيار التلقائي هو البند الأول في القائمة. فلتحديد اختيار محدد مسبقا ، نستخدم السمة selected، كما في المثال التالي:

 <option value="fiat" selected>Fiat</option> 

وتستخدم السمة size لتحديد عدد البنود التي تظهر في القائمة، كما في المثال التالي:

 <label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select> 

أما لجعل اختيار بنود متعددة ممكنا نستخدم السمة multiple ، حتى يمكن للمستخدم اختيار أكثر من بند في القائمة، كما في المثال التالي:

 <label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select> 

HTML Forms – شرح الفورم – العنصر <textarea>

يستخدم العنصر textarea لإنشاء حقل لإدخال نص يمكن أن يحتوي على سطور متعددة، كما في المثال التالي:

 <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> 

بينما تظهر في المتصفح كالتالي:

وتستخدم السمة rows لتحديد عدد الأسطر الظاهرة في حقل النص، بينما تستخدم السمة cols لتحديد عرض حقل النص. كما يمكن تحديد المساحة الظاهرة باستخدام اكواد CSS أيضا. كما في المثال التالي:

 <textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea> 

HTML Forms – شرح الفورم – العنصر <button>

يستخدم العنصر button لإنشاء زر قابل للضغط عليه كما في المثال التالي:

 <button type="button" onclick="alert('Hello World!')">Click Me!</button> 

ويظهر في المتصفح كالتالي:

دائما قم بتحديد السمة type في العنصر button ، لأنه يختلف التحديد التلقائي في المتصفحات المختلفة للعنصر button.


HTML Forms – شرح الفورم – العنصر <fieldset> و العنصر <legend>

يستخدم العنصر fieldset لعمل اطار يحتوي على مجموعة من عناصر الإدخال لتظهر للمستخدم كمجموعة مترابطة. بينما يستخدم العنصر legend لكتابة عنوان أو كلمات توضيحية للعنصر fieldset. كما في المثال التالي:

 <form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form> 

ويظهر في المتصفح كالتالي:

Personalia:





HTML Forms – شرح الفورم – العنصر <datalist>

يستخدم العنصر datalist لتحديد خيارات محددة مسبقا للعنصر input ، حيث سيرى المستخدم قائمة منسدلة بها خيار محدد مسبقا. أما السمة list الخاصة بالعنصر input ، فيجب أن تشير إلى السمة id في العنصر datalist كما في المثال التالي:

 <form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form> 

HTML Forms – شرح الفورم – العنصر <output>

يستخدم العنصر output لتمثيل النتائج الحسابية (مثل التي تتم عن طريق script) ، كما في المثال التالي:

 <form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form> 

HTML Forms – شرح الفورم – السمات أو attributes التي تستخدم في عنصر الإدخال input

  • readonly : تستخدم لتحديد أن هذا الحقل للقراءة فقط ولا يمكن للمستخدم التعديل فيه.
  • disabled : لتحديد أن هذا الحقل غير قابل للاستخدام أو النقر عليه.
  • size : سعة الحقل للإدخال وتكون 20 حرف بشكل تلقائي.
  • maxlength : الحد الأقصى من الحروف أو الأرقام الذي يمكن إدخاله في الحقل.
  • min و max : الحد الأدنى والأقصى للحروف أو الأرقام للإدخال.
  • multiple : لإدخال أكثر من بند (مثل البريد الإلكتروني أو الملف).
  • pattern : لتحديد نوع البيانات التي يتم ادخالها واختبار صلاحيتها قبل الإرسال.
  • placeholder : لإضافة تلميحات تصف الشكل الذي يجب أن تكون عليها البيانات المدخلة.
  • required : تحديد أن هذا الحقل مطلوب ولن يتم الإرسال دون إدخاله.
  • step : لتحديد الأرقام الصالحة (مثلا “step=”3 : فتكون الأرقام -3 ، 0 ، 3 ، 6 ، وهكذا).
  • autofocus : يحدد الحقل الذي يكون محددا للإدخال عند تحميل الصفحة.
  • height و width : لتحديد عرض وارتفاع عنصر الإدخال.
  • list : تحديد الخيارات المحددة مسبقا للعنصر datalist.
  • autocomplete : لتحديد الحقول التي يتم ملئها تلقائيا ويحدد بـ on أو off.


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →