HTML

HTML Form Elements
العناصر المستخدمة مع HTML Form

سوف تتعلم في هذا الدرس العناصر المستخدمة داخل النموذج form في لغة HTML، ووظيفة كل عنصر، بالإضافة إلى طريقة كتابته syntax.

التاريخ

02 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

12536

المواضيع

12
الشروحات chevron_left HTML Form Elements chevron_left HTML

HTML Form Elements
العناصر المستخدمة مع HTML Form

</> HTML form elements
العناصر المستخدمة مع HTML form

تُستخدم العناصر مع HTML form لعدّة أغراض، فمنها خاص بتجميع البيانات النصية، ومنها خاص بتجميع الملفات ومنها خاص بتجميع اختيارات محدّّدة.


أهم العناصر المستخدمة مع HTML Form

  • <input> يُستخدم في تجميع معلومات نصية قصيرة من المستخدمين.
  • <label> يُستخدم في عرض عناوين قصيرة أعلى أو بجوار أي عنصر داخل HTML form ليساعد المستخدمين في فهم المعلومات التي سوف تُكتب داخل input الحقل.
  • <select> يُستخدم في عرض قائمة اختيارات للمستخدمين، لجعلهم يختارون منها عنصر أو أكثر.
  • <textarea> يُستخدم في تجميع نصوص كبيرة من المستخدمين.
  • <button> يُستخدم في عمل أزرار (أيقونات) يؤدي النقر عليها إلى حدوث action تأثير أو حدث معين في صفحة الويب.
  • <fieldset> يُستخدم لعمل مجموعة حقول input متعلقة ببعضها البعض، مثل: بيانات الاتصال داخل السيرة الذاتية.
  • <legend> يُستخدم لعمل عنوان أو إضافة معلومات متعلقة بمجموعة الحقول داخل عنصر <fieldset>.
  • <datalist> يُستخدم لعمل قائمة تظهر بداخل عنصر input عند النقر عليه.
  • <output> يُستخدم لعمل منطقة نتائج حسابية.
  • <option> يُستخدم لعمل عنصر داخل القوائم المُنسدلة.
  • <optgroup> يُستخدم لعمل عناصر متعلقة ببعضها البعض داخل القوائم المُنسدلة.

</> HTML form input
عنصر input داخل HTML form

  • عنصر <input> هو المسؤول عن تجميع البيانات من المستخدمين ثم إرسالها إلى server الخادم.
  • الخاصية type هي التي تحدد نوع الحقل input type من خلال قيمة هذه الخاصية "type="text.
Syntax input element

طريقة كتابة عُنصر <input>.

<input type= "value">
HTML form text input

استخدام حقل من النوع text لإدخال النصوص القصيرة.

<form>
  <input type="text">
</form>

</> HTML form label input
حقل إدخال عناوين نصية أعلى HTML form

يستخدم الحقل من النوع label مع عنصر <input> لعمل عناوين نصية أعلى input الحقل.

  • يقوم حقل من النوع label بمساعدة المستخدمين فعند قيامهم بالضغط على النصوص الصغيرة (على label)، يقوم المتصفح بتوجيههم إلى الحقول الأخرى مباشرة.
  • يتم ربط label مع حقل آخر عن طريق خاصية for وخاصية id.
  • تُضاف خاصية for مع الحقل من النوع label.
  • تُضاف خاصية id مع جميع أنواع لحقول inputs.
  • تُضاف نفس القيمة لخاصية for وخاصية id.
HTML Form Text Inputs




HTML form label input

عمل نصوص صغيرة فوق الحقول تشرح للمستخدمين ما يجب إدخاله ضمن الحقول، باستخدام عنصر label.

<form>
  <label for="username" >Username:</label><br>
  <input type="text" id="username"><br>
  <label for="password" >Password:</label><br>
  <input type="password" id="password"><br>
</form>

</> HTML form select element
عنصر select مع HTML form

يُستخدم عنصر <select> في لغة HTML بداخل عنصر <form> لعمل قوائم منسدلة بها قائمة اختيارات، لكي يختار منها المستخدم خيار أو أكثر مثل قائمة الدول.

عنصر <select> هو عبارة عن حاوية تحتوي مجموعة عناصر، حيث تكون هذه العناصر بداخل عنصر <option>.

  • يظهر أمام المستخدم عنصر واحد فقط وبجواره سهم، فعندما يقوم المستخدم بالضغط على السهم تفتح القائمة المنسدلة.


HTML form select element

كل عنصر داخل select يكون بداخل option element.

<form>
  <select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>PHP</option>
  </select>
</form>
ملاحظة
يمكن للمستخدم اختيار أكثر من قيمة ضمن القائمة المنسدلة في عنصر select وذلك عند إضافة خاصية multiple، حيث يتم اختيار أكثر من قيمة من خلال سحب mouse أو الضغط على ctrl + اختيار القيمة بزر mouse.

</> HTML form optgroup element
عنصر optgroup مع عنصر select في HTML form

يستخدم عنصر <optgroup> لعمل تصنيفات بداخل عنصر <select> ليجمع كل مجموعة عناصر معاً.

HTML form optgroup element

عمل مجموعة عناصر متعلقة ببعض ضمن تصنيف واحد داخل عنصر <select>.

<form>
  <label for="courses">Choose a Course:</label>
  <select name="course" id="courses">
    <optgroup label="Front-End">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JS">JS</option>
    </optgroup>
    <optgroup label="Back-End">
      <option value="PHP">PHP</option>
      <option value="MYSQL">MYSQL</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit">
</form>

</> HTML form textarea element
عنصر textarea مع HTML form

يُستخدم عنصر <textarea> بداخل HTML form لعمل منطقة نصية لتستقبل من المستخدم نصوص غير محدودة.

  • يُستخدم عنصر <textarea> في جمع النصوص المكتوبة من قبل المستخدمين والتي تزيد عن سطر.
  • خاصية rows attribute تحدد عدد الأسطر أي ارتفاع textarea الذي يظهر على المتصفح للمستخدمين.
  • خاصية cols attribute تحدد طول الأسطر أي عرض textarea الذي يظهر على المتصفح للمستخدمين.
HTML form textarea element

إنشاء منطقة نصية داخل HTML form تتيح للمستخدمين إدخال النصوص بكميات غير محدودة، باستخدام عنصر textarea.

<form>
  <textarea name="message" rows="10" cols="100">This is a default text</textarea>
</form>

</> HTML form button element
عنصر button مع HTML form

يُستخدم عنصر <button> لعمل زر عند الضغط عليه يقوم بحدث معين داخل صفحة الويب، لكنه يستخدم مع لغة جافا سكريبت.

  • لا يُستخدم عنصر <button> في إرسال البيانات إلى server الخادم على عكس زر submit الذي يُرسل البيانات إلى الخادم.
  • يمكن تغيير قيمة type attribute إلى submit ليتحول عنصر button إلى submit لتنفيذ action.
HTML form button Element

القيمة الخاصة بعنصر button هي button.

<form>
  <button type="button">Click Here!</button>
</form>
HTML form submit button

تحويل عنصر button إلى submit من خلال تغيير قيمة type attribute.

<form>
  <button type="submit">Login</button>
</form>

</> HTML form datalist element
عنصر datalist مع HTML form

يُستخدم عنصر  <datalist> لعمل قائمة منسدلة بداخل عنصر input، حيث يقوم المستخدم باختيار واحدة أو عدة خيارات.

  • يتم إضافة خاصية list لعنصر <input> وكتابة قيمة خاصة بها ثم يتم تكرار نفس القيمة داخل خاصية id لعنصر <datalist> وذلك لكي تظهر القائمة داخل عنصر input.
  • عند النقر فوق عنصر <input> تظهر القائمة المنسدلة المربوطة بهذا العنصر.
HTML form datalist element

استخدام عنصر <datalist> لعمل قائمة منسدلة بداخل عنصر input حيث تظهر هذه القائمة عند النقر داخل الحقل.

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

</> HTML form fieldset and legend elements
عنصر fieldset وعنصر legend مع HTML form

يُستخدم عنصر <fieldset> لعمل مجموعة بيانات مرتبطة بعضها لبعض داخل HTML form.

يُستخدم عنصر <legend>  لإنشاء عنوان أو معلومات إضافية حول مجموعة بيانات عنصر <fieldset>.

Personal Details:




HTML form fieldset and legend elements

ُيمكن عمل أكثر من مجموعة بداخل HTML form، وذلك لإنشاء بيانات منفصلة، مثل: بيانات العمل والبيانات الشخصية والشهادات داخل السيرة الذاتية، حيث تكون كل مجموعة منفصلة عن الأخرى.

<form>
 <fieldset>
    <legend>Personal Details:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Ahmed"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Aly"><br><br>
    <input type="submit" value="Login">
  </fieldset>
</form>

</> HTML form output element
عنصر output مع HTML form

يُستخدم عنصر <output> لإظهار نتائج العمليات الحسابية بداخله، ولكن بواسطة لغة جافا سكريبت.
JavaScript

يتطلب هذا النموذج أوامر بلغة جافا سكريبت لكي يظهر بهذا الشكل، ولكن سنتعرف الآن فقط على العنصر الذي يظهر output على المتصفح بلغة HTML.

0 100       +         =
HTML form output element

إجراء العمليات الحسابية داخل HTML form.

<form>
  <output>5932</output>
</form>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات