نموذج HTML

يستخدم نموذج HTML لجمع أنواع مختلفة من إدخالات المستخدم.

<form>

يستخدم نموذج HTML لجمع إدخالات المستخدم.

<form> تعريف نموذج HTML:

مثال

<form>
 .
عناصر النموذج
 .
</form>

يشمل نموذج HTMLعناصر النموذج.

عناصر النموذج تشير إلى أنواع مختلفة من عناصر الإدخال، مثل المربعات المربعة، والخيارات المنفردة، وأزرار التقديم، وما إلى ذلك.

عناصر <input>

<input> العنصر هو الأهمعناصر النموذج.

عناصر <input> لها أشكال متعددة، اعتمادًا على type السمة.

هذه هي الأنواع المستخدمة في هذا الفصل:

النوع وصف
text تحديد إدخال نصي عادي.
radio تحديد مدخل زر اختيار منفرد (اختيار أحد الخيارات المتعددة)
submit تحديد زر تقديم (تقديم النموذج)

ملاحظة:ستعلم المزيد عن أنواع الإدخال في هذا الدرس.

إدخال نصي

<input type="text"> تحديد لـإدخال نصيحقل إدخال سطر واحد:

مثال

<form>
 اسم الشخص:<br>
<input type="text" name="firstname">
<br>
 اسم العائلة:<br>
<input type="text" name="lastname">
</form>

جربها بنفسك

يبدو الأمر كالتالي في المتصفح:

اسم الأول:


اسم العائلة:

ملاحظة:يكون النموذج نفسه غير مرئي. وينبغي ملاحظة أن عرض حقل النص الافتراضي هو 20 حرفًا.

مدخل زر اختيار منفرد

<input type="radio"> تحديدزر اختيار منفرد.

يسمح زر اختيار منفرد للمستخدم باختيار أحد الخيارات المحددة من عدد محدود من الخيارات:

مثال

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

جربها بنفسك

يبدو زر اختيار منفرد في المتصفح كالتالي:

Male

Female

زر تقديم

<input type="submit"> تحديد لـبرنامج معالجة النموذج(form-handler)تقديمأزرار النموذج

عادةً، يكون برنامج معالجة النموذج صفحة خادم تحتوي على سكربتات لمعالجة البيانات المدخلة.

برنامج معالجة النموذج في النموذج action تم تحديد في السمة:

مثال

<form action="action_page.php">
اسم الشخص:<br>
<input type="text" name="firstname" value="Mickey">
<br>
اسم العائلة:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

جربها بنفسك

يبدو الأمر كالتالي في المتصفح:

اسم الأول:


اسم العائلة:


سمة Action

سمة actionتحديد الفعل الذي سيتم تنفيذه عند تقديم النموذج.

الطريقة التقليدية لتقديم النموذج إلى الخادم هي استخدام زر التقديم.

عادةً، يتم تقديم النموذج إلى صفحة على خادم الويب.

في المثال السابق، تم تحديد سكربت خادم معين للتعامل مع النموذج المقدم:

<form action="action_page.php">

إذا تم تجاهل خاصية action، سيتم تعيين action إلى الصفحة الحالية.

خصائص الطريقة

خصائص الطريقةيحدد HTTP الطريقة المستخدمة في تقديم النموذج (GET أو POST):

<form action="action_page.php" method="GET">

أو:

<form action="action_page.php" method="POST">

متى يجب استخدام GET؟

يمكنك استخدام GET (الطريقة الافتراضية):

إذا كان تقديم نموذج غير نشط (مثل بحث محرك البحث)، وليس يحتوي على معلومات حساسة.

عند استخدام GET، تكون بيانات النموذج مرئية في شريط العناوين:

action_page.php?firstname=Mickey&lastname=Mouse

ملاحظة:يعد GET أكثر ملاءمة لتحويل بيانات صغيرة. سيقوم المتصفح بتعيين حد سعة.

متى يجب استخدام POST؟

يجب عليك استخدام POST:

إذا كان النموذج يتم تحديث البيانات، أو يحتوي على معلومات حساسة (مثل كلمة المرور).

أمان POST أفضل لأن البيانات المقدمة في شريط العناوين غير مرئية في صفحة الويب.

خصائص الاسم

يجب تعيين اسم خاصية لكل حقل إدخال لضمان تقديمها بشكل صحيح.

في هذا المثال، سيتم تقديم حقل "اسم العائلة" فقط:

مثال

<form action="action_page.php">
اسم الشخص:<br>
<input type="text" value="Mickey">
<br>
اسم العائلة:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

جربها بنفسك

استخدم <fieldset> ل组合 بيانات النموذج

<fieldset> ي组合 البيانات ذات الصلة في النموذج

<legend> يحدد العنصر <fieldset> العنوان المحدد.

مثال

<form action="action_page.php">
<fieldset>
<legend>معلومات شخصية:</legend>
اسم الشخص:<br>
<input type="text" name="firstname" value="Mickey">
<br>
اسم العائلة:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

جربها بنفسك

هذا هو مظهر الكود HTML في المتصفح:

معلومات شخصية:
اسم الأول:


اسم العائلة:


خصائص النموذج HTML

عنصر <form> لـ HTML، تم تعيين جميع الخصائص المحتملة مثل هذا:

مثال

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
عناصر النموذج
 .
</form>

إليك قائمة بخصائص <form>:

خصائص وصف
accept-charset يحدد مجموعة الحروف التي يتم استخدامها في النموذج المقدم (الافتراضي: مجموعة الحروف في الصفحة).
action يحدد العنوان الذي يتم فيه تقديم النموذج (URL) (الصفحة التي يتم تقديمها).
autocomplete يحدد ما إذا كان المتصفح يجب أن يقوم بإنهاء النموذج تلقائيًا (الافتراضي: مفعول).
enctype يحدد الترميز الذي يتم استخدامه للمعلومات المقدمة (الافتراضي: الترميز الم编码 بالرابط).
method يحدد الطريقة التي يتم استخدامها في تقديم النموذج HTTP (الافتراضي: GET).
name يحدد الاسم الذي يتمتع به النموذج (للمستندات DOM: document.forms.name).
novalidate يحدد عدم اعتماد المتصفح للنموذج.
target يحدد الهدف من خاصية action عنوان العنوان (الافتراضي: _self).

ملاحظة:ستتعلم المزيد عن الخصائص في الفصول التالية.