<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> ليجمع كل مجموعة عناصر معاً.

Choose a Course:

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>.

جربها بنفسك

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.

HTML form output element

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

<form>
  <output>5932</output>
</form>

جربها بنفسك

مصطلحات الدرس

Form

نموذج

عناصر

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

زر

قائمة منسدلة

خيار

محدد

سمة

Size

حجم

Allow

السماح

Multiple

متعدد

Select

تحديد

Rows

صفوف

Datalist

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

Input

حقل إدخال

list

قائمة

link

رابط

Result

نتيجة

Output

إخراج

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

Idenitity

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

Optgroup

Option Group

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

HTML

Hypertext Markup Language

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

Cols

Columns

أعمدة

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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