بسم الله الرحمن الرحيم
اعلم ان درسنا طال عن النماذج والمدخلات
كان يمكن اختصار الدرس في تدوينه واحده
لكني قد كنت قررت في بداية الدورة ان تكون شاملة اي لا تتجاهل اي شئ لتكون مرجعك الكامل لهذة اللغة
اليوم سنتحدث عن انواع المدخلات بالتفصيل الملل
انواع المدخلات
تحدثنا في الدرس الاول في النماذج والمدخلات عن السمة type التي تستخدم مع المدخلات
وهي تغير نوع المدخل
ودعني اولا ان اوكد علي ان input من نوع عناصر الاغلاق الذاتي
الان نحن نعلم عنها جيدا لنبدأ في العمل
هكذا تكتب
وقمت بهذا المثال باستخدام السمه type وكما تعلمنا انها ما تحدد نوع المدخل
لنتحدث الان عن القيمة التي تضاف في السمة type
1- button
يعرف بزر نقر (يستخدم في الغالب مع جافا سكريبت )
كما نري قمت بتحديد قيمة ال type بـ button
والقيمة value هي النص الذي سيكون علي الزر
وهذة النتيجة
وهذا مثال مبسط لاحدي طرق استخدامة حاول تجربة ذلك
[code]<!DOCTYPE html>
<html>
<head>
<script>
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me" onclick="msg()">
</form>
</body>
</html>
لكن لاحظ انني استخدمت جافا اسكربت وحاول ان لا تشغل نفسها بها الان سنتعلمها فيما بعد بعد انتهاء دورة html
2- checkbox
وهو مربع اختيار
لنري هذا
ستكون النتيجه كالتالي
لاحظ type قيمتها checkbox
name هو اسم من اختياري وهو بمعني واسطة نقل
value هو الفيمة التي سوف يتم ارسالها اذا تم اختيار هذا المربع
ولهذة القيم استخدامات سوف نتعلمها في درس التطبيق والمراجعه
ويمكن استخدام سمه جديدة هنا لجعل خيار من الخيارات محدد تلقائي وذلك باضافة هذة الكلمة في نهاية الكود
3 – color
وهي زر لاختيار لون
يكتب هكذا
وكما موضح تستخدم لاختيار لون
وهذة النتيجة
4 – date
وهي لاختيار تاريخ
الناتج
5 – datetime
يحدد عنصر تحكم التاريخ والوقت (السنة والشهر واليوم والساعة والدقيقة والثانية، وجزء من الثانية، بناء على المنطقة الزمنية ) وهي تعبأ يدويا
الناتج
6 – datetime-local
نفس عمل السابقه لكن يوجد خيارات للتعبئة
الناتج
7 – email
وهو حقل لاضافة البريد الالكتروني
الناتج
ويمكن ايضا استخدام السمة autocomplete لتشغيل او ايقاف الاكمال التلقائي كما تعلمنا في الدروس السابقة
8 – file
حقل لاضافه ملف ويستخدم دائما في مراكز التحميل لرفع الصور والملفات
ويكتب هكذا
وهذا الناتج
يجب ان اضيف الان سمة جديده تستخدم مع هذا النوع من المدخلات فقط وهو accept
وهو يحدد انواع الملفات التي يقبلها هذا الحقل للرفع
ويمكن تحديد الانواع عن طريق القيم التاليه
للصور
للفديو
للصوتيات
الجمع بينهم
لاختيار ملفات مخصصه
مع الفصل بين كل نوع بـ /
وايضا هناك شئ جديد هو السماح باختيار اكثر من ملف عن طريق multiple
وتستخدم هكذا
9 – hidden
وهو حقل مخفي يحتوي علي قيم ما وساوضح مثالا بسيطا
هل سبق لك ان قمت بالتسجيل في منتدي او موقع ؟ لم تلاحظ انه يوجد شئ يسمي تاريخ التسجيل ؟
نعم اليس كذلك ؟ انه حقل مخفي في النموذج اثناء تسجيلك يحتوي علي التاريخ في وقت التسجيل
ويتم ارسال التاريخ مع البيانات التي قمت بادخالها ولكن بشكل مخفي لن تراه او تدخلة بنفسك
ويكتب هكذا
10 – image
يشبة كثيرا اضافه صورة عادية في html ولكن هنا يمكن ان تحول الصورة الي زر للارسال او اعادة تفريغ
لنري كيف تستخدم
وفي هذة الحالة قمت بتحديد صورة وحولتها الي زر للارسال
ويمكن استخدام السمة alt وهي كعادتها لا جديد بها كما تعلمناها من قلبل تظهر قيمتها في حال تعطل الصورة
11 – month
وتستخدم لاختيار الشهر والسنه
ونري النتيجه كالتالي
12 – number
وهو حقل اختيار رقم
مع العلم min هي الحد الادني و max الحد الاقصي و ,step عند الضغط علي الاسهم لزيادة او نقص الرقم كم يزيد وكم ينقص وفي هذا المثال انا حدد عند الضغط يزيد 3
النتيجة
13 – password
وهو حقل مخصص لكلمات المرور
الناتج
14 – radio
دوائر اختيار
الناتج
ويمكن استخدام سمه جديدة هنا لجعل خيار من الخيارات محدد تلقائي وذلك باضافة هذة الكلمة في نهاية الكود
15 – range
لتحديد قيمة رقمية عن طريق تحريك شريط التمرير ويمكن وضع قيم للتحكم كالحد الادني والاقصي
ويمكن استخدام السمات التاليه مع هذا العنصر step و value وvalue هنا تعني قيمة تكون افتراضيه
16 – reset
هو زر لاعاده تفريغ ما تم ادخاله في النموذج
ويمكن استخدام value ليكون اسم الزر او مكتوب علي الزر
اي اذا وضعنا القيمه Reset
تكون النتيجة
17 – search
يستخدم لاضافة حقل للبحث
الناتج
ويمكن ايضا استخدام السمة autocomplete لتشغيل او ايقاف الاكمال التلقائي كما تعلمنا في الدروس السابقة
18 – submit
وهو زر الارسال
النتيجة
19 – tel
حقل مخصص لاضافة هاتف
الناتج
ويمكن ايضا استخدام السمة autocomplete لتشغيل او ايقاف الاكمال التلقائي كما تعلمنا في الدروس السابقة
20 – text
وهو حقل نص يستخدم كمثال في الاسم الاول والاسم الاخير ويمكن استخدامه لاغراض كثيره بحسب احتياجاتك
الناتج
ويمكن ايضا استخدام السمة autocomplete لتشغيل او ايقاف الاكمال التلقائي كما تعلمنا في الدروس السابقة
21 – time
يستخدم لتحديد الوقت
الناتج
22 – url
حقل لاضافة رابط
الناتج
ويمكن ايضا استخدام السمة autocomplete لتشغيل او ايقاف الاكمال التلقائي كما تعلمنا في الدروس السابقة
23 – week
يستخدم لاضافة الاسبوع والسنة ايضا
ناتج
انتهي درس input ولكن سنتعلم شئ جديد يسمي select
وهي قائمة مندسلة تتيح للمستخدم الاختيار منها
الامر اكثر سهولة مما تعتقد
فقط جرب هذا الكود
ارجعو التمعن في هذا الكود جيدا ولاحظ ان selected هي لتحديد هذا الخيار كافتراضي
والان ننتقل الي مربع النص
انتهي ولكن ساضيف بعض السمات التي يمكن استخدامها في جميع ما سبق من عناصر الادخال
autofocus
وهي تستخدم لـ تركيز/تحديد حقل محدد في حال تم تحديث الصفحة او الدخول اليها
وهي تكتب كما تكتب checked هكذا
disabled
وهي تقوم بتعطيل العنصر يبقي بالصفحة ظاهرا ولكن لا يمكن استخدامه
form
انها جديدة في اللغة
باختصار تمكنك من انشاء عنصر خارج النموذج ولكنه لا يزال تابع للنموذج
عن طريق ربطة ب from بالاشارة الي id النموزج
لنري مثالا
اتمني ان تكون الفكرة واضحة
formaction
تستخدم مع الانواع التالية فقط
image و submit وهي ازرار الارسال
كما علمنا اننا نحدد اين يرسل البيانات من خلال action
تمكنك هذة الميزة من اضافه زر اخر للارسال ولكن يقوم بالارسال في مكان اخر
لنري مثالا
formenctype
تستخدم مع الانواع التالية فقط
image و submit وهي ازرار الارسال
وهي تحدد الطريقة التي سيتم إرسال البيانات وفقاً لها كما درسنا بالدرس السابق
انها تقوم بنفس عمل السمة enctype ولكن هنا تمكنك من تخصيصها لزر خاص
وانها تستخدم نفس القيم الخاصة بالسمة enctype وقد شرحنها بالدرس السابق
formmethod
تستخدم مع الانواع التالية فقط
image و submit وهي ازرار الارسال
وهي كما يبدو من اسمها تعمل نفس عمل method وهي كيفيه ارسال البيانات
يمكنها ايضا تخصيص طريقه اخري للارسال بزر اخر باحدي القيم get و post
formnovalidate
تستخدم مع الانواع التالية فقط
image و submit وهي ازرار الارسال
وهي تمكنك من ارسال البيانات بدون التحقق من صحتها
formtarget
تستخدم مع الانواع التالية فقط
image و submit وهي ازرار الارسال
وهي تقوم بنفس عمل السمة target
وتمكنك من تحديد اما ان يفتح في نافذة اخري او نفس الصفحة
وتستخدم نفس القيم المعتادة
width – height – src
الان لدينا سمات جديدة وليست جديدة تستخدم مع image فقط
width لتحديد عرض الصورة بالبكسل
height لتحديد طول الصورة بالبكسل
src لتحديد رابط الصورة او مكان الصورة
list
يشير إلى عنصر <datalist> الذي يحتوي على خيارات محددة مسبقا للعنصر <input>
هي تمكنا من انشاء خيارات انت من يعدها ونقوم بالاشارة اليها في عنصر input
فعند النقر علي العنصر سوف تظهر قائمة الخيارات التي قمنا بأعدادها
جرب هذا الكود واذهب الي المتصفح واضغط علي العنصر للبدء بالكتابه نقرة ثم الاخري
ستري النتيجه بنفسك ومن خلال رؤيتك للنتيجه يمكنك ان تستخدمها اينما شئت حسب حاجتك
maxlength
وهي تستخدم لتحديد عدد الحروف التي يمكن كتابتها في العنصر
وفي المثال التالي قد حددت عدد 10 حروف كحد اقصي
name
تحدد السمة name اسم عنصر <input>.
يتم استخدام السمة name للإشارة للعناصر في جافا سكريبت، أو للإشارة لبيانات النموذج بعد إرسال نموذج.
pattern
تستخدم للتحقق من الحروف التي يمكن استخدامها وكم عددها لنري هذا
لاحظ ما بين [ ] هو الحروف المسموحه وهي تعني من a الي z حروف صغيرة وكبيرة
ولاحظ ان ما بين { } هو عدد الحروف المسموح
وسنتطرق لهذا فيما بعد بالتفصيل
placeholder
لاحظ التالي
الم تلاحظ وجود كلمات داخل الحقول ؟ نعم وعند الكتابه في الحقل ستختفي تماما
هذة هي السمة placeholder
لنري الان كيف كتب الكود لتكون النتيجة كما راينا بالاعلي
readonly
وهي تستخدم لتخصيص حقل للقرائة فقط
جرب هذا
required
تعني ان الحقل مطلوب
لا يمكن اتمام ارسال النموذج الا اذا تم ملئ هذا الحقل
value
لها اكثر من معني علي حسب موقعها
اذا استخدمت مع “reset” او “submit” تعني النص المكتوب علي الزر
اذا استخدمت مع “text” او “password” او”hidden” هي تعني القيمة الافتراضية تكون موجودة بالحقل
اذا استخدمت مع “checkbox” او “radio” او “image” او “select” تحدد القيمة التي سوف يتم ارساله اذا تم الارسال
ملحوطة * هي سمة مطلوبة في checkbox و radio و select و لا يمكن استخدامها مع file
الي هنا انتهي درسنا الطويل عن النماذج والمدخلات
فقط لدينا درس اخر عبارة عن مراجعه وتطبيق لتاكيد وصول المعلومات بشكل صحيح والاستفادة من التجربة
جاري التدقيق في الدرس واكتشاف الاخطاء رجاء مراجعه الدرس مره اخري بعد قليل
