شرح عنصر form نموذج html

form تعتبر الحاوية والتى تشمل جميع الخصائص والسمات التى نريدها مثل مربع بحث أو زر إرسال أو تحديد الخيارت ....إلخ

<form> في هذه المنطقة يمكن إضافة الخصائص التى نريدها </form>

إرسال

الآن نريد إنشاء 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='***' ومن خلالها يمكن إضافة تسمية لحقل ما حتى يستطيع المستخدم معرفة مالذى يكتبه فى هذا الحقل هل هو إسم مستخدم أم لكلمة مرور أم حقل للبحث هذه الخاصية يمكن أن تضاف ضمن عنصر 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="***" ومن خلالها يمكن إضافة تسمية لحقل ما حتى يستطيع المستخدم معرفة مالذى يكتبه فى هذا الحقل هل هو إسم مستخدم أم لكلمة مرور أم حقل للبحث هذه الخاصية يمكن أن تضاف ضمن عنصر input كما في المثال التالى ويتم استبدال رموز *** للتسمية المناسبة للحقل.

<form> <input type='text' name='username' placeholder="إسم المستخدم"></input></br> <input type='password' name='password' placeholder="كلمة المرور"></input></br> <button type="submit">إرسال</button> </form>

نري هنا وجود تسمية داخل الحقل وقمنا بتسمية الحقل الأول كإسم مستخدم والحقل الثاني لكلمة المرور ، ولكن هنا تجد أن التسمية ظاهرة بلون رمادي وتجد هنا عند بدء المستخدم لكتابة شئ ما في الحقل يتم اخفاء التسمية الموجودة تلقائيا.

إرسال

خاصية action="#" يمكن إضافة رابط الصفحة التى نريد إرسال إايها البيانات عند الضغط على زر بحث أو إرسال أو تسجيل الدخول أو ما شابه ، نقوم باستبدال رمز # برابط الصفحة أو نتركه فارغا إذا كانت البيانات المرسلة لنفس الصفحة الحالية. يتم إضافة الخاصية ضمن عنصر form هكذا

<form action="#">

وأيضا يمكن استخدام خاصية method='get' ضمن عنصر form إذا كنا نريد أن تظهر البيانات المكتوبة فى شريط عنوان المتصفح وهذه البيانات يتم إرسالها بدون تشفير ويمكن استخدام هذه الخاصية في حقل للبحث عن موضوع أو تدوينة ما

<form action="#" method='get'>

وأيضا يمكن استخدام خاصية method='post' ضمن عنصر form إذا كنا نريد إرسال البيانات بطريقة مشفرة ولا تظهر فى شريط العنوان ويتم استخدام هذه الخاصية فى حقول التسجيل وتسجيل الدخول والبحث عن معلومات هامة نريد تشفيرها.

<form action="#" method='post'>

قم بتجربة إدخال أى بيانات أى إسم وأى كلمة مرور وشاهد النتيجة فى المتصفح ستجد أن جميع ما كتبه فى الحقول ظاهر فى شريط عنوان المتصفح

إرسال

قم بتجربة إدخال أى بيانات أى إسم وأى كلمة مرور وشاهد النتيجة فى المتصفح ستجد أن جميع ما كتبه فى الحقول غير ظاهر.

إرسال

"