أحدث المواضيع

تابعني على يوتيوب

إجمالي مرات مشاهدة الصفحة

خبراتي فى لغات البرمجه

85% HTML
90% CSS
85% Web-Design

الأربعاء، 8 مارس 2017

الدرس (19) تعلم html : النماذج / form (الجزء الأول)

النماذج / form
 بسم الله الرحمن الرحيم

كثير ما يشاهد بعضنا صفحات التسجيل عند التسجيل في كثير من المواقع حيث يتم ادخال الأيميل و الباسوورد فهذه الصفحات تحتوي على ما يعرف بالنماذج او 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> تصبح النتيجة
<input type="file">



النوع السابع هو زر يستخدم مع لغة javascript يكفي بهذا الدرس ان تعرف هذا النوع لكن طريقة ربطه مع الjavascript هذا شيء ستعرفه اذا تعلمت الjavascript 
الكود المسؤول عنه هو
type="button"
يمكن تعبئته بكلام عن طريق اضافة كود اضافي هو
value="هنا يضع الكلام"
النوع الثامن هو زر الصورة فمثلاً تعمله عند الضغط على مكان معين في الصورة يقوم النموذج بإرسال احداثيات الضغطة اي في اي مكان تم الضغط على الصورة المثال على شرحي
عند الضغط على مكان معين في الصورة يمكنك مشاهدة الرابط يتغير بإحداثيات الضغة    على الصورة


الكود المستعمل في المثال السابق يأتي ما داخل الوسم input

<input type="image" src="22.png" alt="submit">       

حيث 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
وبهذا اكون قد وصلت لنهاية الدرس وان شاء الله الجزء الثاني من النماذج سأطرحه قريباً  والسلام عليكم و رحمة الله و بركاته
الدرس (19) تعلم html : النماذج / form (الجزء الأول)

الدرس (19) تعلم html : النماذج / form (الجزء الأول)





ليست هناك تعليقات:

إرسال تعليق

Translate

للمتابعة على مواقع التواصل الاجتماعي

تطبيق راسلني

جميع الحقوق محفوظة © أسامة الموسى