كثير ما يشاهد بعضنا صفحات التسجيل عند التسجيل في كثير من المواقع حيث يتم ادخال الأيميل و الباسوورد فهذه الصفحات تحتوي على ما يعرف بالنماذج او form والتي تعد الشيء الضروري في برمجة كثير من صفحات الويب ومن خلالها انشاء صلة وصل بين المستخدم والسرفر الذي يحوي هذا الموقع الذي يتصفحه المستخدم
فمثلاً هذا الشكل التالي يمثل نموذج
من اجل صنع ما سبق يلزمنا كتابة بعض الأوامر والتي تكتب كلها بين الوسمين التاليين او الجزء body
<body>
</body>
والأمر الرئيسي في النماذج هو
<from>
</frome>
الوسمين السابقين هم الأساس في النماذج يعني ما يكتب داخلهما يمثل النموذجالأن ما داخل الوسمين السابيقين يوجد عدة وسوم الوسم الأول
<input>
هذا الوسم ليس له وسم نهاية ومن هذا الوسم يندرج تحته عدة انواع يمكن تمييزها من خلال ما يكتب ما داخل الوسم نفسه بعد كلمة input فمثلاً هذا الكود
name="هنا يكتب الأسم"
الأسم الذي يكتب لا يؤثر على صيغة الوسم بل يعطيه اسم للوسم وقت ارسال النموذج لسرفر الذي يحوي الموقعفالوسم يصبح على الشكل التالي
<input name="هنا يكتب الأسم">
النوع الأول للوسم السابق هو مكان ادخال للنصوص والأرقام وهو ما يستخدم في كتابة الأيميل او اسم المستخدم في المواقع مثال على هذا
مثل هذا النوع يتكون من كتابة الوسم <input> وكتابة ما دخله بعد كلمة input الكود
type="text"
لتصبح النتيجة هكذا
<input type="text">
واذا كتبنا الأسم ليست مشكلة لتصبح النتيجة هكذا
<input name="هنا يكتب الأسم" type="text">
كلمة username كتبتها بين الوسمين
<label>username</label>
التي وضعتها قبل وسم
<input name="هنا يكتب الأسم" type="text">
لتكون النتيجة هكذا
<label>username</label>
<input name="هنا يكتب الأسم" type="text">
وكلا الوسمين مكتوبين بين الوسمين
<from>
</frome>
لتكون النتيجة هكذا
<from>
<label>username</label>
<input name="هنا يكتب الأسم" type="text">
</frome>
ايضاً يكتب داخل الوسم <input> كود من خلاله ان يكون الحقل الخاص بالusername فارغ بل يكون كلام يمكن مسحه وكتابة اسم المستخدم مثلاً
مثال على كلامي
الكود الذي استخدم هو
value="osama"
ليصبح وسم <input> هكذا
<input type="text" value="osama">
ايضاً يوجد كود لجعل نص يظهر بالمكان الفرغ لاكن يكون فاتح ويذهب عند الكتابة في المربع
الكود هو
placeholder="write here .."
وعند وضه داخل الوسم input تصبح النتيجة
<input type="text" placeholder="write here ..">
عندما يكتب داخل الوسم input تصبح النتيجة مثل هذا الشكل
واذ كتبنا ما داخل المستطيل يذهب النص لتصبح النتيجة هكذا
اما اذا اردنا تحديد طول ما يكتب داخل المستطيل يعني كم رقم وحرف يكتب فيمكننا ذلك بكتابة هذا الكود بعد كلمة input في وسم <input>
maxlength="10"
حيث يتغير رقم 10 بالعدد الذي تريده ان يكتب في المستطيل اي عدد الأحرف و الأرقام
النوع الثاني ل input
هو الخاص بكلمات السر ويتكون بهذا الشكل
<input type="password">
حيث يضاف بعد input عبارة
type="password"
فيصبح كل ما تكتبه في جدول كلمة السر لا يظهربل يكون مثل هذا الشكل
النوع الثالث هو هذا المربع
اذا ضغطنا عليه يصبح هكذا
هذا الزر يفيد مثلاً تذكير المتصفح ببيانات التسجيل من اجل لا اكتبها كل مرة
الكود هو
type="checkbox"
وعند كتابته داخل الوسم <input>
<input type="checkbox">
النوع الرابع هو زر التسجيل هو يقوم بإرسال البيانات للسرفر الزر هو
الزر يكتب بكتابة الكود
type="submit"
نكتبه داخل الوسم <input> ليكون هكذا
<input type="submit">
لكن اذا كتبنا مثل هذا الشيء سوف يكون مكتوب داخل الزر هذه العبارة
وهذه الجملة تتغير بحسب اللغة في الجهاز
اما اذا اردنا كتابة عبارة من عندنا يكفي بكتابة هذا الكود
value="هنا تكتب"
هذا الكود يكتب داخل الوسم <input> الذي يحوي
type="submit"
ليكون الوسم بالشكل النهائي مثل هذا
<input type="submit" value="هنا تكتب نص او كلمة">
النوع الخامس هو يتمثل بإعادة تعيين افتراضيات الذي غيرناه في النموذج الكود المسؤل عنه هو هذا الكود
type="reset"
يوضع هذا الكود بعد input لتكون النتيجة مثل هكذا
<input type="reset">
وهذه الصورة تمثل ما كتبت
ويمكن تغيير ما مكتوب داخل الزر الذي صنعناه بإضافة الكود
value="هنا تكتب النص"
النوع السادس هو لرفع الملفات فعندما تكون في صفحة تسجل لجامعة فأحيانا يطلبو منك رفع ملف على موقعهم فذلك الزر المسؤول عن الرفع يتمثل بهذا الكود
type="file"
وعند كتابته داخل الوسم <input> تصبح النتيجة
النوع السابع هو زر يستخدم مع لغة javascript يكفي بهذا الدرس ان تعرف هذا النوع لكن طريقة ربطه مع الjavascript هذا شيء ستعرفه اذا تعلمت الjavascript
الكود المسؤول عنه هو
type="button"
يمكن تعبئته بكلام عن طريق اضافة كود اضافي هو
value="هنا يضع الكلام"
النوع الثامن هو زر الصورة فمثلاً تعمله عند الضغط على مكان معين في الصورة يقوم النموذج بإرسال احداثيات الضغطة اي في اي مكان تم الضغط على الصورة المثال على شرحي
عند الضغط على مكان معين في الصورة يمكنك مشاهدة الرابط يتغير بإحداثيات الضغة على الصورة
الكود المستعمل في المثال السابق يأتي ما داخل الوسم input
حيث src ما بعدها يمثل مسار الصورة المستخدمة
المثال التاسع هو يمثل عندما يأتي لديك عدة اختيارات من اجل اختيار واحدة منهم مثال على كلامي
يتكون المثال السابق من وسمين input يربطهم اسم واحد فالذي كتبته في الصورة السابقة كانت الأكواد هي التالية
<input type="radio" name="Browser" value="chrome"> chrome
<br>
<br>
<input type="radio" name="Browser" value="opera"> opera
ان الكود
name="Browser"
هو جاء في كلا وسمين input وهو يعني ان هذين الوسمين هم الخيارين الذان تختار منهم اختيار واحد والذي باللون الأخضر هو الموحد ويمكن تغييره لكن يجب ان يكون نفسه في كلا الوسمين
اما
value="chrome"value="opera"
فيمكن تغير ال chrome و opera بما ترغب
والشيء الأساسي في هذا النوع من input هو النوع والذي يعبر بكود
type="radio"اما
chrome
opera
الذين جائو بعد الوسمين input فهما ما يظهران في النتيجة في الصورة السابقة
وفي الأخير نأتي ل <br> هو الذي يمثل سطر بين كل input
وبهذا اكون قد وصلت لنهاية الدرس وان شاء الله الجزء الثاني من النماذج سأطرحه قريباً والسلام عليكم و رحمة الله و بركاته
الكاتب : OSAMA ALMOUSA
منشأ مواقع مهتم في جديد التقنية و المعلومات دارس عدة لغات برمجة ومن خلال هذا الموقع اقدم شروحات و دروس أتمنى ان تعجبكم
