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