مقدمة:
سنتحدث في درسنا عن مفهوم جديد من مفاهيم ال HTML يختلف عمّا درسناه سابقاً، فنحن عندما نتصفح مواقع الانترنت نكون بحاجة دائماً - كمستخدمين - لإدخال معلومات كعنوان البريد الالكتروني أو كلمة المرور أو استعلامات ضمن محرك بحث أو......الخ، وهنا تكون وظيفة ال HTML بجمع المعلومات المدخلة من المستخدم عن طريق مايعرف ب FORM لإرسالها إلى الموقع المطلوب الذي يقوم بدوره بمعالجة هذه الإدخالات (ويمكننا أخذ التسجيل في منتدى كمثال على ذلك).ما هي النماذج (FORMS ) ؟
النماذج هي عبارة عن واجهة لإدخال البيانات مثل مربعات النصوص وقوائم الاختيار ومربعات الاختيار والأزرار، وغيرها من الأدوات. ومن الأمثلة على ذلك:- Text
- Button
- Checkbox
- Password
- Radio
- Reset
- Submit
وسنتعرف عليها تباعاً في الدروس اللاحقة .
وسومنا الجديدة في هذا الدرس:
وسم البداية <form> وسم النهاية </form>
مهمته وسم بداية النموذج.وسم البداية <label> وسم النهاية </label>مهمته وسم لإضافة تسمية لعناصر الجدول ولايعد استخدامه ضرورياً.
وسم البداية <______> وسم النهاية </input>مهمته وسم لإضافة عناصر جديدة إلى النموذج ويعد من أقوى الوسوم وأكثرها خصائصاً.
لنأخذ مثالا عن بعض خواص النموذج:
<form method = "post" action="login.php" >
يحتوي الوسم form على مجموعة من الخواص، أهمها action المسؤولة عن تحديد عنوان الصفحة التي ستوجه إليها البيانات أما الخاصية الثانية فهي method وهي المسؤولة عن تحديد طريقة نقل البيانات إما get أو post وهذه التفاصيل ربما تكون غامضة بعض الشيء الآن، و لكن لابد من تعلمها بالتفصيل في مراحل متقدمة أثناء دراسة لغة ال PHP مثلا . (مشان ما تضيعوا بس ^_^).
لنأخذ مثالا عن الإدخال ضمن النموذج :
<input name = "name" type = "text" size = "25" maxlength "30"/>
تستخدم من أجل تعريف الوسم وتميزه عن الوسوم الأخرى والتعامل معه.
الخاصية (name) : وهي أهم خاصية ضمن وسم الإدخال ويتم فيها تحديد نوع المدخلات التي سيتم إدخالها من قبل
الخاصية (type) : وهي أهم خاصية ضمن وسم الإدخال ويتم فيها تحديد نوع المدخلات التي سيتم إدخالها من قبل المستخدم.
الخاصية (size) : تحدد مساحة الإدخال مقدرة بالبيكسل.
الخاصية (maxlength): وهو الطول الأعظم للإدخال وفي هذا المثال 30 حرف
أما عن تأكيد الإدخالات، فسنكتب: وهي عبارة عن زر من أجل ال submit (أي تأكيد الإدخال)
أما عن تأكيد الإدخالات، فسنكتب: وهي عبارة عن زر من أجل ال submit (أي تأكيد الإدخال)
<input type = "submit" value = "Submit" />
أي أنه عند الضغط عليها يتم التوجه إلى ال action الخاص بالنموذج, وخاصية ال value هنا هي من أجل تحديد الكتابة ، التي ستظهر على هذا الزر.
لإفراغ جميع الحقول (inputs): أيضاً عبارة عن زر يقوم بمسح كافة البيانات المدخلة في حقول الإدخال
<input type = "reset" value = "Clear" />
سنقوم الآن ببناء صفحتنا باستخدام ال Form :
<html>
<head>
<title>Forms</title>
</head>
<body>
<h1>welcome to IT4WEBS</h1>
<img src="logo.jpg" >
<p>Please fill out this form to login </p>
<form method = "post" action = "">
<p>
<head>
<title>Forms</title>
</head>
<body>
<h1>welcome to IT4WEBS</h1>
<img src="logo.jpg" >
<p>Please fill out this form to login </p>
<form method = "post" action = "">
<p>
<label>Name:<input name = "name" type = "text" size = "25" maxlength = "30"/></label>
</p>
<p>
<p>
<label>password:<input name = "name" type = "password" size = "25" maxlength= "30" /></label>
</p>
<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>
</form>
</body>
</html>
<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>
</form>
</body>
</html>
وسيكون الخرج (مايظهر للمستخدم عند فتح الصفحة) على النحو التالي:
ومهمتك هذه المرة:إنشاء صفحة يدخل فيها المستخدم المعلومات التالية:
Name:
Age:
University:
Faculty:
Age:
University:
Faculty:
علماً بأن نوع المدخلات كلها هو text
ويجب إضافة زر Submit , reset
إرسال الوظائف:
ضع ملف الكود و الصور في ملجد ثم اضغطه باستخدام برنامج Winrar واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "k-alhumsi@hotmail.com " ولصقه في المتصفح الخاص بك
الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا
Tags:
دورة HTML