HTML

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

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

التاريخ

02 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

6646

المواضيع

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

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

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

نموذج حقول إدخال HTML

Inputs
Inputs

حقول إدخال

Username
Username

إسم المستخدم

Password
Password

كلمة السر

Checkbox
Checkbox

مربع إختيار

Submit
Submit

تأكيد الإرسال

Reset
Reset

إعادة تعيين

Element
Element

عنصر

Server
Server

خادم

link
Input
Input

حقل إدخال

Type
Type

نوع

Result
Result

نتيجة

Radio
Radio

مربع إختيار دائري

label
label

عنوان حقل الإدخال

Email
Email

بريد إليكتروني

Color
Color

لون

File
File

ملف

Hidden
Hidden

مخفي

Image
Image

صورة

Number
Number

رقم

Range
Range

نطاق أو في حدود

Search
Search

بحث

Date
Date

تاريخ

Datetime-local
Datetime-local

التاريخ -الوقت المحلي

Month
Month

شهر

Time
Time

وقت

Week
Week

أسبوع

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

Hypertext Markup Language

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

Telephone

هاتف أو تليفون
URL
URL

Uniform Resource Locator

عنوان الموقع أو محدد الموقع الموحد
link
PHP
PHP

PHP, Hypertext Preprocesso

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

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

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