التخطي إلى المحتوى
45345345345 اعداد النماذج في صفحات الويب
اعداد النماذج في صفحات الويب

اعداد النماذج في صفحات الويب

اذا سئل احد ما هي النماذج في انشاء المواقع يمكن القول له انها كمثل واجهات التسجيل في موقع معينة , حيث يتم ادخال الأيميل و الأسم و كلمة المرور ومن ثم يتم ارسالهم للسرفر الذي يحوي الموقع

مثال على النماذج  : 1-11 اعداد النماذج في صفحات الويب   حيث في هذا الدرس سنتعرف على العديد من عناصر النماذج الموجودة في لغة html

ان النموذج مثل القائمة و الجدول لها وسمين رئيسين 14-3-300x62 اعداد النماذج في صفحات الويب  و يندرج بينهم جميع وسوم النماذج

الوسم الأكثر شعبية في النماذج <input> حيث ليس له وسم نهاية و منه يندرج العديد من الأنواع و يمكن تسميته بأي اسم بإضافة الكود 2-8-300x32 اعداد النماذج في صفحات الويب  بعد كلمة input 

  • النوع الأول من input هو الصندوق الذي يوضع فيه اسم المستخدم مثلاً :
    يصنع عن طريق وضع الكود 3-5 اعداد النماذج في صفحات الويب   بعد كلمة input و اذا اردنا وضع نص افتراضي في الصندوق الذي سيظهر لدى المستخدم نضع الكود 4-5-300x36 اعداد النماذج في صفحات الويب   بعد الكود السابق لكن سيكون النص لا يختفي عند الكتابة داخل الصندوق في المتصفح بل نمسحه في البداية ثم نكتب ما نريده فإذا اردنا ان يكون النص باهت و ينمسح فوراً عند الكتابة.
    نستعمل هذا الكود 5-5-300x29 اعداد النماذج في صفحات الويب   و لتحديد عدد الأحرف التي ستكتب داخل الصندوق نضع هذا الكود 6-3-300x34 اعداد النماذج في صفحات الويب   ومن اجل وضع عبارة قبل الصندوق توضع ما بين الوسمين 16-2-300x28 اعداد النماذج في صفحات الويب   قبل وسم <input>

7-3 اعداد النماذج في صفحات الويب

  • النوع الثاني هو صندوق نفس النوع الأول لكن يخص كلمة السر حيث ستظهر العبارات فيه عند الكتابة بشكل نقط غير معروفة , كوده 8-4-300x46 اعداد النماذج في صفحات الويب   يوضع بعد كلمة input كالعادة
  • النوع الثالث هو مثل بعض المواقع عندما تريد من المستخدم الموافقة على شروط معينة قبل التسجيل حيث يعلم المستخدم على مربع صغير يعني انه قرأ سياسة الخصوصية , فالكود المسؤول عنه هو 9-5 اعداد النماذج في صفحات الويب
  • النوع الرابع لعمل زر كزر التسجيل يكون بإضافة الكود 10-3 اعداد النماذج في صفحات الويب  لكن سيكون داخل الزر عبارة افتراضية يمكن تغييرها بضافة كود 11-5-300x23 اعداد النماذج في صفحات الويب   بعد الكود السابق
  • النوع الخامس زرار الأختيار حيث عند وضع منه اكثر من مثال يتيح أختيار خيار واحد و هذا يمثله بإضافة الكود التالي 13-2 اعداد النماذج في صفحات الويب   بعد كلمة input في وسم <input> ثم اضافة هذا الكود الثاني 17 اعداد النماذج في صفحات الويب  حيث يجب ان يكون الأسم هو نفسه في كلا الوسوم التي تحوي 13-2 اعداد النماذج في صفحات الويب  و الغرض من جعل الأسم نفسه انه من بينهم يتم الأختيار

الوسوم و الصورة التالية توضع ما اعنيه

<from>
<label>screen</label>
<br/>
<input type=”radio” name=”screen”>hd
<input type=”radio” name=”screen”>full hd
</from>

18 اعداد النماذج في صفحات الويب

  • النوع السادس هو من اجل رفع ملف إلى سرفرات الموقع حيث كوده هو 19-1 اعداد النماذج في صفحات الويب   يوضع بعد كلمة input في الوسم <input> وشكله عند فتحه في المتصفح 52525-300x53 اعداد النماذج في صفحات الويب
  • النوع السابع هو الصورة عند الضغط على مكان معين فيها يقوم بحفظ احداثيات الضغطة من اجل ارسالها للسرفر و كوداته هن 252525365 اعداد النماذج في صفحات الويب   يوضعون بعد كلمة input كالعادة
  • النوع الثامن عبارة عن زر يمكن برمجته بالجافاسكريبت من اجل القيام بشيء معين كوديه هما 222222222222222 اعداد النماذج في صفحات الويب
  • النوع التاسع لإضافة زر يقوم بإعادة الإعدادت الأفتراضية بالنموذج حيث يمسح جميع ما اضافه المستخدم و اختاره و الكودين الخاصين به هما 3333333333333 اعداد النماذج في صفحات الويب

وبهذا نكون قد ذكرنا انوع الوسم <input> و من اجل التوضيح اكثر
النموذج التالي قد يفيد لمن لم يفهم بعض النقاط مع مراعاة التعديل الذي باللون الاحمر

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<from>
<label>username</label>
<input type=”text” placeholder=”writ here …” maxlength=”10″>
<label>password</label>
<input type=”password”>
<label>screen</label>
<input type=”radio” name=”screen”>hd
<input type=”radio” name=”screen”>full hd
<input type=”file”>
<input type=”image” src=”هنا يوضع رابط الصورة” alt=”submit”>
<input type=”reset” value=”هنا نكتب ما سوف يعرض في الزر“>
<input type=”checkbox”>
<input type=”button” value=”هنا يكتب النص الذي سوف يعرض بالزر“>
<input type=”submit” value=”هنا يوضع كلمة او عبارة سوف تعرض في الزر“>
</from>
</body>
</html>

الوسم الثاني في النماذج هو كمثل الصندوق الذي يكتب فيه المستخدم تعليقات او رسالة للموقع حيث يأخذ حيز من صفحة الويب
و وسميه هما 20-1-300x27 اعداد النماذج في صفحات الويب   و يمكن وضع نص بين الوسمين حيث يظهر افتراضياً بالصندوق في المتصفح وتوجد بعض الأكواد توضع داخل وسم البداية كتحديد كم عامود في الجدول
او كم حرف يكتب في نفس السطر و كوده هو 22-2-300x45 اعداد النماذج في صفحات الويب   يوضع بعد كلمة textarea في وسم البداية و من اجل تحديد كم سطر في الصندوق نضع هذا الكود 21-1-300x38 اعداد النماذج في صفحات الويب  بعد كلمة textarea طبعاً في وسم البداية اما اذا كتبنا نص مسبق بين وسمي الصندوق و نريد الصندوق قابل للقراءة فقط نضع كلمة readonly داخل وسم البداية بعد كلمة textarea

الوسم الثالث يمكن شرحه انه مثل ازرار اختيار تاريخ الميلاد في صفحات التسجيل
حيث عند الضفط عليها تظهر قائمة منسدلة تحوي التواريخ حيث يختار المستخدم واحدة من التواريخ الوسمين الأساسيين فيه 23-300x39 اعداد النماذج في صفحات الويب  حيث بينهم تكتب عناصر القائمة المنسدل التي تمثل كل من فيها بالوسمين 24-300x19 اعداد النماذج في صفحات الويب
و يمكن تكرار الوسمين السابقين مع تغير النص من اجل وضع اكثر من عنصر للقائمة المنسدلة المثال التالي يوضع ما اعنيه

25 اعداد النماذج في صفحات الويب

وهذه هي وسوم القائمة المنسدلة كما في الصورة السابقة

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<from>
<select>
<option>1415</option>
<option>1416</option>
<option>1417</option>
<option>1418</option>
</select>
</from>
</body>
</html>

هذه القائمة المنسدلة يمكن تنسيقها بالعديد من التنسيقات:
التنسيق الأول من اجل جعل زر القائمة او عنصر بالقائمة غير قابل للضغط فيمكن بإضافة كلمة disabled في وسم البداية <select> الزر الذي داخله عناصر القائمة بعد كلمة select
او نضع كلمة disabled  في وسم البداية <option> للعنصر المراد تعطيله بعد كلمة option

26-1 اعداد النماذج في صفحات الويب

من اجل جعل عنصر من القائمة يكون الزر الافتراضي في القائمة المنسدل حيث قبل الضغط على زر القائمة يكون عنصر ما هو افتراضي مثل الشكل التالي

27 اعداد النماذج في صفحات الويب

نضع كلمة selected بعد كلمة option في وسم البداية <option> للعنصر المراد جعله افتراضي في زر القائمة

و يوجد شيء مهم في القائمة المنسدلة وهو مهم عند ارسال النموذج للسرفير

حيث يكون لكل عنصر في القائمة له اسم يعرف به و لتمييز كل عنصر عن الآخر نضع الكود 0001111111111111111111122222222222222222-300x39 اعداد النماذج في صفحات الويب   داخل كل وسم بداية <option> بعد كلمة option

الآن بالنسبة لإخر فقرة في زر القائمة المنسدلة انه يمكننا عمل مجموعات داخل القائمة المنسدلة
حيث يكون داخل القائمة عبارة توضيحية و تحتها مجموعتها من عناصر معينة من القائمة المنسدلة , الوسمين الخاصان بها

<optgroup label=”هنا نضع اسم للمجموعة”></optgroup>

حيث بين هذين الوسمين نضع عناصر معينة من القائمة كالشكل التالي

<from>
<select><optgroup label=”هنا نضع اسم للمجموعة”><option>1415</option>
<option>1416</option>
<option>1417</option>
<option>1418</option> </optgroup><optgroup label=”هنا نضع اسم للمجموعة”><option>1419</option>
<option>1420</option>
<option>1421</option>
<option>1422</option> </optgroup></select>
</from>

و يمكن جعل مجموعة من عناصر القائمة غير قابلة للأختيار بوضع كلمة disabled في وسم البداية <optgroup> بعد كلمة optgroup لمجموعة معينة

الفقرة الآخيرة في هذا الدرس هي تنسيق النموذج كاملاً حيث نضع عدة اجزاء من النموذج داخل صندوق و نسمي هذ الصندوق بإسم معين كالصورة التالية

345345-1024x392 اعداد النماذج في صفحات الويب

من اجل فعل هذا الأمر نلجأ إلى الوسمين 224455-300x37 اعداد النماذج في صفحات الويب   بحيث يوضع بينهما وسوم النموذج التي نريدها

اما اسم الصندوق نضع بعد وسم البداية <fieldset> الوسمين التاليين 323232-300x19 اعداد النماذج في صفحات الويب

النموذج التالي يشرح صورة المثال السابق

<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
</head>
<body>
<from>
<fieldset>
<legend>معلومات الدخول</legend>
<label>username</label>
<input type=”text” placeholder=”writ here …” maxlength=”10″><br/>
<label>password</label>
<input type=”password”><br/>
</fieldset>
<fieldset>
<legend>معلومات مطلوبة</legend>
<label>screen</label><br/>
<input type=”radio” name=”screen”>hd<br/>
<input type=”radio” name=”screen”>full hd<br/>
<input type=”file”><br/>
</fieldset>
<input type=”checkbox”><br/>
<input type=”submit” value=”تسجيل”><br/>
</from>
</body>
</html>

بهكذا نكون قد وصلنا لنهاية الدورة

دورة تعلم لغة html ان شاء الله تكون دورة نافعة للعديد من المتابعين
حيث هذه الدورة كانت بداية لمن يريد البدأ بطريق برمجة صفحات الويب
فهي في الحقيقة لغة سلسة في الفهم و سهلة التطبيق
لا تنسو مشاركة دروس الدورة على وسائل التواصل الاجتماعي لتعم الفائدة على الجميع

دروس الدورة :

التعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *