HTML

HTML Form Buttons Inputs
الأزرار بداخل HTML Form

سوف تتعلم في هذا الدرس كيفية عمل buttons أزرار عن طريق عنصر input بداخل HTML forms في لغة HTML.

التاريخ

09 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1604

المواضيع

12
الشروحات chevron_left HTML Form Buttons Inputs chevron_left HTML

HTML Form Buttons Inputs
حقول الأزرار بداخل HTML Form

</> HTML form submit input
زر إرسال البيانات إلى الخادم في HTML form

يُستخدم الحقل من النوع submit input لإرسال جميع بيانات HTML form إلى الخادم ليقوم بمعالجتها.

  • القيم التي تحدد الحقل من النوع submit input هي submit لتصبح بهذا الشكل <"input type="submit>.
  • الحقل من النوع submit input يرسل البيانات إلى صفحة الويب المحدّدة داخل خاصية form action.
HTML form submit input

يُستخدم الحقل من النوع submit لإرسال جميع البيانات HTML form إلى server الخادم.

<form action="/options">
  <label for="username">Username:</label><br>
  <input type="text" id="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password"><br><br>
  <input type="submit" value="Send">
</form>

</> HTML form button input
زر لا يرسل البيانات إلى الخادم في HTML form

يُستخدم الزر من النوع button input لإظهار وإخفاء المحتوى داخل صفحة الويب، بمساعدة لغة JavaScript وليس لإرسال البيانات إلى السيرفر.

  • القيم التي تحدد الحقل من النوع button input هي button لتصبح بهذا الشكل <"input type="button>.
  • الحقل من النوع button input لا يرسل البيانات إلى serve الخادم.
HTML form button input

يُستخدم الزر من النوع button لإظهار وإخفاء المحتوى داخل صفحة الويب.

<form>
  <input type="button" value="Show Me!">
</form>

</> HTML form reset input
زر تفريغ جميع البيانات الموجودة في جميع حقول HTML form

يستخدم زر من النوع reset input لإعادة أي حقل داخل HTML form فارغاً كما كان، ليقوم المستخدم بإعادة كتابة البيانات مرة أخرى.

  • القيمة التي تحدد الحقل من النوع reset input هي reset لتصبح بهذا الشكل <"input type="reset>.
HTML form reset input

يُستخدم الزر من النوع reset لحذف جميع البينات بداخل حقول HTML form.

<form action="/options">
  <label for="username">Username:</label><br>
  <input type="text" id="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password"><br><br>
  <input type="submit" value="Send">
  <input type="reset">
</form>

</> HTML form image input
زر صورة بديل لزر submit في HTML form

يستخدم الحقل من النوع image input لإرسال جميع بيانات HTML form وإرسالها إلى الخادم، ليقوم بمعالجتها بدلاً من زر submit.

  • القيمة التي تحدد الحقل من النوع image input هي image لتصبح بهذا الشكل <"input type="image>.
  • الحقل من النوع submit input يرسل البيانات إلى صفحة الويب المحدّدة بداخل خاصية form action.
  • يجب إضافة خاصية src لتحديد الصورة إما من الجهاز الخاص بك أو من رابط URL خارجي.
HTML form image input

يستخدم زر image input لإرسال جميع بيانات HTML form إلى الخادم ليقوم بمعالجتها بدلاً من زر submit.

<form action="/options">
  <label for="username">Username:</label><br>
  <input type="text" id="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password"><br><br>
  <input type="image" src="https://www.closetag.com/images/submit.png">
</form>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.