HTML

HTML Form Text Inputs
الحقول النصية بداخل عنصر HTML Form

سوف تتعلم في هذا الدرس جميع أنواع inputs الحقول داخل عنصر HTML form، ووظيفة كل input، بالإضافة إلى الحقول الأكثر استخدامًا.

التاريخ

02 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

7704

المواضيع

12
الشروحات chevron_left HTML Form Text Inputs chevron_left HTML

HTML Form Text Inputs
الحقول النصية داخل عنصر Form في لغة HTML

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> HTML form inputs
الحقول داخل عنصر form في لغة HTML

HTML form inputs الحقول هي عبارة عن عناصر إدخال، حيث يقوم المستخدم بملء هذه الحقول ليتم إرسالها إلى server الخادم ليتم معالجتها أو حفظها.

هذه الحقول لها أنواع متعدّدة، كل نوع يقبل نوع محدد من البيانات أو المعلومات، مثل: حقول خاصة بالنصوص، حقول خاصة بالاختيار، حقول خاصة بالملفات، حقول خاصة باختيار الألوان.


أنواع form inputs:

  • text يُحدد هذا النوع إدخال نصوص نصية، مثل: username ,name.
  • password يُحدد هذا النوع إدخال نصوص غير مرئية أثناء مرحلة الكتابة وتستخدم مع password كلمات المرور.
  • email ُيحدد هذا النوع إدخال عنوان بريد إلكتروني Email.
  • radio يُحدد هذا النوع اختيار خياراً واحداً من مجموعة خيارات متعددة، مثل: gander male or female.
  • checkbox يُحدد هذا النوع مجموعة اختيارات، من مجموعة خيارات متعددة، مثل: مجموعة دورات courses.
  • submit يُنشئ هذا النوع زراً لإرسال جميع البيانات عندما ينهي المستخدم إدخالها من المتصفح إلى server الخادم. 
  • reset يُحدد هذا النوع زراً لإلغاء جميع النصوص أو المدخلات التي ملئها المستخدم داخل جميع inputs بداخل HTML form.
  • button يُحدد هذا النوع زراً لإضافة أوامر برمجية بلغة JavaScript وتنفيذها عند الضغط عليه.
  • image يُحدد هذا النوع صورة لإرسال جميع البيانات عندما ينهي المستخدم إدخالها من المتصفح إلى server الخادم على شكل صورة وليس زر. 
  • color يُحدد هذا النوع اختيار لون من مجموعة ألوان، كأداة انتقاء اللون color picker.
  • range يُنشئ شكل به مؤشر، حيث يقوم المستخدم بتحرك هذا المؤشر مابين قيمتين: مثلًا 0-10 لإدخال رقم بين القيمتين اللتين يتم تحديدهما مسبقاً.
  • date يُحدد هذا النوع حقل إدخال لاختيار التاريخ.
  • datetime-local يُحدد هذا النوع حقل إدخال لاختيار التاريخ، دون منطقية زمنية.
  • month يُحدد هذا النوع حقل إدخال للتحكم بالشهر والسنة، دون منطقة زمنية.
  • week يُحدد هذا النوع حقل إدخال التاريخ مع الأسبوع والسنة، دون منطقة زمنية.
  • number يُحدد هذا النوع حقل إدخال يَكُونُ عبارة عن رقم.
  • url يُحدد هذا النوع حقل إدخال يَكُونُ عبارة عن عنوان رابط صفحة ويب URL.
  • search يُحدد هذا النوع حقل إدخال يَكُونُ عبارة عن نص لإدخال نص بحث.
  • tel يُحدد هذا النوع حقل إدخال رقم هاتف. 
  • file يُحدد  هذا النوع اختيار أو تحميل ملف من داخل الجهاز الخاص بك.
  • hideen يُحدد هذا النوع حقل إدخال يَكُونُ مخفي. 
HTML form input

يظهر الحقل HTML form input بهذا الشكل على المتصفح إذا كان من النوع text.

ملاحظة

إذا لم يَتم تحديد نوع حقل الإدخال عن طريق الخاصية type داخل عنصر <input> سَوُفَ يَقوم browser المُتصفح بقراءة default value القيمة الافتراضية لعُنصر <input> وهي text.

</> HTML form input syntax
طريقة كتابة الحقول في 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 text input
حقل إدخال النصوص القصيرة في HTML form

لعمل input حقل للنصوص القصيرة، يتم تحديد الخاصية type والقيمة بداخلها text وذلك داخل عنصر <input>.

HTML form text input

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

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

</> HTML form password input
حقل إدخال كلمات المرور في HTML form

لعمل input حقل لكلمات المرور passwords يتم تحديد الخاصية type والقيمة بداخلها password وذلك داخل عنصر <input>.

HTML form password input

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

<form>
  <input type="password">
</form>
ملاحظة
لا تظهر الحروف التي يتم إدخالها في حقل password input على المتصفح، وذلك لضمان عدم ظهور كلمة السر للأشخاص الموجودين بجوار المستخدم لحظة الإدخال.

</> HTML form email input
حقل إدخال البريد الإلكتروني email في HTML form

  • input email يُستخدم في جميع الحقول التي تطلب عناوين البريد الإلكتروني من المستخدمين.
  • القيمة المستخدمة داخل عنصر <input> هي email لعمل حقل إدخال عناوين بريد إلكتروني <"input type="email>.
  • تعرض الأجهزة المحمولة المزودة بلوحات مفاتيح ديناميكية، بما في ذلك iOS و Android، لوحة مفاتيح بريد إلكتروني تحتوي على علامة "@" و "." .
HTML form email input

حقل من النوع email لإدخال عناوين البريد الإلكتروني.

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

</> HTML form search input
حقل إدخال الكلمات البحثية في HTML form

تكون القيمة المستخدمة بداخل عنصر <input> هي search من أجل عمل حقل لإدخال الكلمات المفتاحية للبحث <"input type="seacrh>.


HTML form search input

حقل من النوع search لإدخال كلمات مفتاحية للبحث داخل موقع الويب.

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

</> HTML form url input
حقل إدخال روابط صفحات الويب في HTML form

يستخدم حقل url input لتجميع عناوين الويب من المستخدمين داخل عنصر <form>.

  • القيمة التي تُحدد حقل url input هي url لتصبح بهذا الشكل <"input type="url>.
HTML form url input

يُستخدم نوع الحقل url input عندما يُطلب من المستخدمين إدخال عنوان ويب.

<form>
  <label for="url">Add your homepage:</label>
  <input type="url" id="url" >
</form>

</> HTML form hidden input
حقل الإدخال المخفي hidden في HTML form

يستخدم حقل hidden input لتجميع بيانات برمجية من المستخدمين بشكل تلقائي دون أن يظهر على المتصفح داخل عنصر <form>.

  • القيمة التي تحدد حقل hidden input هي hidden لتصبح بهذا الشكل <"input type="hidden>.
  • لا يظهر hidden input على المتصفح، لأنه يُستخدم من قبل مطوري مواقع الويب لتجميع البيانات الخاصة بالمستخدم من قبل المتصفح.
HTML form hidden input

حقول الإدخال المخفية التي لا تظهر على المتصفح في لغة HTML.

<form>
  <input type="username"><br><br>
  <input type="hidden" id="id" name="id" value="3487">
</form>
يتم استخدام هذا النوع من الخصائص من قبل المبرمجين وليس من قبل المستخدمين، وستتعرف على استخدام هذا النوع من الخصائص أكثر عند دراسة لغة PHP.
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات