الكاتب
النماذج Forms
** تستخدم النماذج في
إستقبال المدخلات Inputs
من المستخدم بغيه عرضها أو تخزينها أو القيام
بعمليات معالجة معينه عليها .
** يتم إنشاء النماذج
بإستخدام الوسم <form></form>
** لإضافة عناصر داخل
النموذج بإستخدام الوسم <input> مثل (lists , buttons , radio ,
text ) .
لمشاهدة الفيديو من هنا
** تم تزويد وسم <form> بواصفتين أساسيتين الأولى action وهي تحدد إسم الملف البرمجي ( إسم الصفحة ) الذي سيقوم بمعالجة
البيانات المدخلة في النموذج ويكون الملف البرمجي مكتوباً بإحدى لغات البرمجة من
طرف السيرفر Server
side مثل لغات php , jsp , asp.net .
** أما الواصفة
الثانية فهي Method
وهي التي تحدد طريقة إرسال البيانات إلى الملف
البرمجي المذكور داخل action ولها طريقتين وهما :
1. Get : وتستخدم في إرسال البيانات وتظهر في شريط
العنوان أي أنها غير مشفره .
2. Post :
وتستخدم في إرسال البيانات بشكل غير ظاهر في شريط العنوان أي أنها بيانات مشفره
مثل المعلومات الشخصية وكلمات المرور وخلافه .
** بعد إنشاء النموذج <form> سنقوم بوضع مجموعة من عناصر الإدخال
بإستخدام الوسم <input
> وسيتم تزويد كل عنصر
إدخال باسم فريد يسند كقيمة بإستخدام name و id ، ونحدد نوع العنصر المدخل بإستخدام الخاصية type التابعة للأمر <input> وذلك مثل :
-
Button : إنشاء زر الأمر .
-
Checkbox : زر إختيار أكثر من بديل
-
File : مربع لإختيار ملف بغيه
رفعة إلى الموقع
-
Hidden : عنصر إدخال مخفي
-
Password : عنصر إدخال كلمة المرور
-
Radio : زر إختيار بديل واحد فقط
-
Reset : إعادة ضبط القيم الإفتراضية لعناصر الإدخال كاملة داخل النموذج
-
Submit : زر إرسال ( تسجيل )
-
Text : مربع إدخال نص أو رقم
** لعمل قائمة منسدلة
نستخدم الوسم <select></select>
أما العناصر الخاصة بالقائمة من خلال الوسم <option></option>
ولتحديد أحد العناصر كعنصر إفتراضي عن طريق
الخاصية Selected
** الخاصية Value التي تستعمل مع العناصر المختلفة مثل radio , Checkbox تستخدم في إرسالها داخل Database عند الضغط على زر Submit .
** الوسم <textarea></textarea> ** يستخدم لإدخال قيمة نصية متعددة الأسطر
على عكس العنصر <input> الذي يستخدم لإدخال قيمة نصية وحيدة السطر .
n يضاف إليه الخاصيتين Rows , Cols لتحديد عرضه وإرتفاعة .
** من الممكن تقسيم عناصر
الإدخال إلي مجموعات ( أقسام ) بإستخدام <fieldset> </fieldset> سيحويان بينهما مجموعة عناصر الإدخال ويتم تزويد
كل مجموعة بعنوان توضيحي عبر الوسم <legend> </legend> ، كما يمكن منح كل عنصر عنوانا يدل على ماهيه المعلومات المدخلة
فيه عن طريق الوسم <label></label>
<!Doctype
html>
<html>
<head>
<title>
Forms </title>
</head>
<body
dir="rtl">
<form
action="soliman.php" method="post">
<center> تسجيل بيانات طالب </center> <p>
<fieldset>
<legend>البيانات الشخصية</legend>
اسم الطالب <input
type="text"> <p>
السن بالأرقام <input type="text"> <p>
كلمة المرور <input
type="password"> <p>
تأكيد كلمة المرور <input type="password">
<p>
النوع
<input
type="radio" name="m">Male
<input
type="radio" name="m">FeMale <p>
</fieldset>
<fieldset>
<legend>الهوايات</legend>
كرة القدم <input type="checkbox"><p>
كرة الطائرة <input type="checkbox"><p>
كرة السلة <input type="checkbox"><p>
السباحة <input type="checkbox"><p>
الرماية <input type="checkbox"><p>
ركوب الخيل <input type="checkbox"><p>
</fieldset>
<fieldset>
<legend>صورة شخصية </legend>
<input
type="file"><p>
</fieldset>
<fieldset>
<legend> المدينة / الدولة </legend>
<select>
<option>مصر</option>
<option>السعودية</option>
<option
selected="selected">الكويت</option>
<option>العراق</option>
<option>ليبيا</option>
<option>السودان</option>
</select><p>
</fieldset>
<fieldset>
<legend> ملاحظات </legend>
<textarea
type="textarea" ></textarea><p>
</fieldset>
<center>
<input
type="submit" value="تسجيل">
<input
type="reset" value="جديد">
</center>
</form>
</body>
</html>
** عناصر الـ Meta **
هي عناصر غير مرئية في الصفحة تضاف في
منطقة رأس الصفحة بين وسمي <head> </head> تستخدمها محركات البحث من أجل تصنيف صفحتك وعرضها ضمن نتائج البحث
.
** يأتي مع الوسم <Meta> الخاصيتين Content , Name
** Name ** ويكتب داخلها Keywords وهي مجموعة الكلمات المفتاحية
التي تظن أن المستخدمين سيبحثون عن أحدها .
** الـ Meta الثاني الخاص بـ Description فيحوي وصفاً مختصراُ عن المحتوى الذي تقدمه
صفحتك .
** XHTML ** هي تعتبر لغة HTML الموسعة .
