HTML Form Text Inputs
الحقول النصية بداخل عنصر HTML Form
سوف تتعلم في هذا الدرس جميع أنواع inputs الحقول داخل عنصر HTML form، ووظيفة كل input، بالإضافة إلى الحقول الأكثر استخدامًا.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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>
ملاحظة
</>
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>
نموذج حقول إدخال HTML
حقول إدخال
إسم المستخدم
كلمة السر
مربع إختيار
تأكيد الإرسال
إعادة تعيين
عنصر
حقل إدخال
سمة
نوع
نتيجة
نص
زر
مربع إختيار دائري
عنوان حقل الإدخال
بريد إليكتروني
لون
ملف
مخفي
صورة
رقم
نطاق أو في حدود
بحث
تاريخ
التاريخ -الوقت المحلي
شهر
وقت
أسبوع
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتTelephone
هاتف أو تليفون
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
