مثال بسيط
السمات
form تعتبر الحاوية والتى تشمل جميع الخصائص والسمات التى نريدها مثل مربع بحث أو زر إرسال أو تحديد الخيارت ....إلخ
- <form> في هذه المنطقة يمكن إضافة الخصائص التى نريدها </form>
السمات
العنصر | الوظيفة | يضاف ضمن |
---|---|---|
form | الحاوية وتكون بداخلها جميع الأوامر التى نريدها | |
input | حقل يمكن إدخال به المعلومات | |
type="text" | لتحديد نوع الحقل كنص | input |
type="password" | لتحديد نوع الحقل ككلمة مرور | input |
name="***" | إضافة سمة لتعريف حقل ما مثل صندوق بحث أو كلمة مرور وهكذا ونسبدل الكلمة مكان رموز النجوم | input |
placeholder="***" | يمكن إضافة تسمية مكان رموز *** حتي يستطيع المستخدم معرفة ماذا يكتب هنا هل يقوم بكتابة اسم مستخدم أو كلمة مرور وهكذا وهذه السمة تكون ظاهرة فى الحقل وعند بدء المستخدم بالكتابة تختفي الجملة الافتراضية | input |
value="***" | هذه الخاصية لها نفس خاصية placeholder إلا أن خاصية value تكون التسمية ظاهرة للمستخدم تلقائيا ولكن هنا يجب على المستخدم حذفها ثم كتابة ما يريد | input أو submit |
type="submit" | وهذه الخاصية تستخدم لضغط على الزر لإرسال البيانات | button |
action="**" | مكان رمز النجوم يمكن إضافة الصفحة التى نريد إرسال إليها البيانات | form |
method='get' | عند استخدام هذه الخاصية وعند الضغط على مربع بحث أو زر تسجيل الدخول ستجد البيانات المكتوبة فى الحقول تظهر في شريط المتصفح | form |
method='post' | أما عند استخدام هذه الخاصية فهي تقوم بتشفير البيانات المرسلة مثل بيانات تسجيل الدخول أو ما شابه | form |
type='email' | لاستخدام حقل خاص بالبريد الالكتروني | input |
type="radio" | هذه الخاصية يمكن للمستخدم تحديد خيار واحد فقط من عدة خيارات ويمكن استخدامها فى نموذج التسجيل فى موقع ما مثل ذكر / أنثى | input |
checked | من خلال هذه الخاصية يتم تحديد العنصر الأول تلقائيا | input |
disabled | جعل العنصر مغلق أى لا يمكن الكتابة به أو تحديده مع تظليل العنصر | input |
readonly | جعل العنصر مغلق أى لا يمكن الكتابة به أو تحديده بدون تظليل العنصر | input |
autofocus | جعل الحقل محدد تلقائيا | input |
type="file" | اظهار زر اختيار ملف | input |
type="color" | اظهار صندوق الألوان | input |
إضافة حقل نص
- <form> <input type='text' name='username'></input> </form>
النتيجة
إضافة حقل خاص بكلمة مرور
- <form> <input type='password' name='password'></input> </form>
النتيجة
زر إرسال
- <button type="submit">إرسال</button>
النتيجة
مثال على جميع ما سبق
الآن نريد إنشاء 2 حقل الأول حقل نصي والثاني حقل بكلمة مرور ثم نضيف زر إرسال ليصبح الكود بالشكل التالى
- <form> <input type='text' name='username'></input> <input type='password' name='password'></input> <button type="submit">إرسال</button> </form>
النتيجة
مثال على جميع ما سبق
الآن نريد إنشاء 2 حقل الأول حقل نصي والثاني حقل بكلمة مرور ثم نضيف زر إرسال ليصبح وإضافة تسمية قبل كل حقل مع استخدام عنصر br لبداية من سطر جديد لمراجعة الدرس من هنا
- <form> إسم المستخدم</br> <input type='text' name='username'></input></br> كلمة المرور</br> <input type='password' name='password'></input></br> <button type="submit">إرسال</button> </form>
النتيجة
استخدام خاصية value
خاصية value='***' ومن خلالها يمكن إضافة تسمية لحقل ما حتى يستطيع المستخدم معرفة مالذى يكتبه فى هذا الحقل هل هو إسم مستخدم أم لكلمة مرور أم حقل للبحث هذه الخاصية يمكن أن تضاف ضمن عنصر input كما في المثال التالى ويتم استبدال رموز *** للتسمية المناسبة للحقل.
- <form></br> <input type='text' name='username' value="إسم المستخدم"></input></br> <input type='password' name='password' value="كلمة المرور"></input></br> <button type="submit">إرسال</button></br> </form>
النتيجة
نري هنا وجود تسمية داخل الحقل وقمنا بستمية الحقل الأول كإسم مستخدم والحقل الثاني لكلمة المرور ، ولكن هنا تجد أن التسمية ظاهرة ولا يمكن إخفائها تلقائيا فيجب على المستخدم حذف التسمية الحالية ثم كتابة ما يريد كتابته فى الحقل.
استخدام خاصية placeholder
خاصية placeholder="***" ومن خلالها يمكن إضافة تسمية لحقل ما حتى يستطيع المستخدم معرفة مالذى يكتبه فى هذا الحقل هل هو إسم مستخدم أم لكلمة مرور أم حقل للبحث هذه الخاصية يمكن أن تضاف ضمن عنصر input كما في المثال التالى ويتم استبدال رموز *** للتسمية المناسبة للحقل.
- <form> <input type='text' name='username' placeholder="إسم المستخدم"></input></br> <input type='password' name='password' placeholder="كلمة المرور"></input></br> <button type="submit">إرسال</button> </form>
النتيجة
نري هنا وجود تسمية داخل الحقل وقمنا بتسمية الحقل الأول كإسم مستخدم والحقل الثاني لكلمة المرور ، ولكن هنا تجد أن التسمية ظاهرة بلون رمادي وتجد هنا عند بدء المستخدم لكتابة شئ ما في الحقل يتم اخفاء التسمية الموجودة تلقائيا.
استخدام خاصية action وخاصية method
خاصية action="#" يمكن إضافة رابط الصفحة التى نريد إرسال إايها البيانات عند الضغط على زر بحث أو إرسال أو تسجيل الدخول أو ما شابه ، نقوم باستبدال رمز # برابط الصفحة أو نتركه فارغا إذا كانت البيانات المرسلة لنفس الصفحة الحالية. يتم إضافة الخاصية ضمن عنصر form هكذا
- <form action="#">
- <form action="#" method='get'>
- <form action="#" method='post'>
method='get' النتيجة بعد استخدام خاصية
قم بتجربة إدخال أى بيانات أى إسم وأى كلمة مرور وشاهد النتيجة فى المتصفح ستجد أن جميع ما كتبه فى الحقول ظاهر فى شريط عنوان المتصفح
method='post' النتيجة بعد استخدام خاصية
قم بتجربة إدخال أى بيانات أى إسم وأى كلمة مرور وشاهد النتيجة فى المتصفح ستجد أن جميع ما كتبه فى الحقول غير ظاهر.
"
"
شرح عنصر form نموذج html