HTML

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

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

التاريخ

02 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

9943

المواضيع

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>
مصطلحات الدرس
Form
Form

نموذج

Elements
Elements

عناصر

Textarea
Textarea

منطقة خاصة بالنص

Dropdown list
Dropdown list

قائمة منسدلة

Option
Option

خيار

Selected
Selected

محدد

Size
Size

حجم

Allow
Allow

السماح

Multiple
Multiple

متعدد

Select
Select

تحديد

Rows
Rows

صفوف

Datalist
Datalist

قائمة البيانات

Input
Input

حقل إدخال

list
list

قائمة

link
link

رابط

Result
Result

نتيجة

Output
Output

إخراج

اختصارات الدرس
Id
Id

Idenitity

معرف هوية فريد
Optgroup
Optgroup

Option Group

مجموعة إختيار
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Cols
Cols

Columns

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.