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

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

مثال بسيط

السمات

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="#">
وأيضا يمكن استخدام خاصية method='get' ضمن عنصر form إذا كنا نريد أن تظهر البيانات المكتوبة فى شريط عنوان المتصفح وهذه البيانات يتم إرسالها بدون تشفير ويمكن استخدام هذه الخاصية في حقل للبحث عن موضوع أو تدوينة ما
    <form action="#" method='get'>
وأيضا يمكن استخدام خاصية method='post' ضمن عنصر form إذا كنا نريد إرسال البيانات بطريقة مشفرة ولا تظهر فى شريط العنوان ويتم استخدام هذه الخاصية فى حقول التسجيل وتسجيل الدخول والبحث عن معلومات هامة نريد تشفيرها.
    <form action="#" method='post'>

method='get' النتيجة بعد استخدام خاصية

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

method='post' النتيجة بعد استخدام خاصية

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

استخدام خاصية radio

هنا قمنا باستخدام خاصية type="radio" والتى تتيح لنا تحديد خيار واحد فقط 
ذكر
أنثى

النتيجة


ذكر
أنثى

جعل خيار radio معين محدد تلقائيا مع خاصيةchecked

هنا قمنا باستخدام خاصية checked ومن خلالها يتم تحديد العنصر تلقائيا 
ذكر
أنثى

النتيجة


ذكر
أنثى

جعل خيار radio معين غير نشط تلقائيا مع خاصيةdisabled

هنا قمنا باستخدام خاصية disabled ومن خلالها يتم غلق أحد الخيارات أى لا يمكن اختياره 
ذكر
أنثى
غير ذلك

النتيجة


ذكر
أنثى
غير ذلك

استخدام خاصية checkbox

هذه الخاصية checkbox ومن خلالها يمكن للمستخدم تحديد أكثر من خيار 
الخيار الأول
الخيار الثاني
الخيار الثالث
الخيار الرابع

النتيجة


الخيار الأول الخيار الثاني الخيار الثالث الخيار الرابع

اظهار زر اختيار ملف

النتيجة



اظهار صندوق الألوان

النتيجة



html