تعرَّف على أساسيات استخدام نموذج على الويب من خلال هذه المقدّمة إلى النموذج. العنصر.
تخيل أنك تريد سؤال الأشخاص على موقعك الإلكتروني عن حيوانهم المفضل. كخطوة أولى، تحتاج إلى طريقة لجمع البيانات.
كيف تفعل ذلك باستخدام HTML؟
في HTML، يمكنك إنشاء هذا باستخدام عنصر النموذج (<form>)،
<input> مع <label> وإرسال <button>.
ما هو المقصود بعنصر النموذج؟
<form>
<label for="animal">What is your favorite animal?</label>
<input type="text" id="animal" name="animal">
<button>Save</button>
</form>
يتكون عنصر النموذج من علامة البدء <form>،
السمات الاختيارية المحددة في علامة البدء وعلامة النهاية </form>.
بين علامتَي البداية والنهاية، يمكنك تضمين عناصر النموذج مثل <input> و<textarea>
لأنواع مختلفة من إدخالات المستخدم.
ستتعلّم المزيد من المعلومات حول عناصر النموذج في الوحدة التالية.
أين تتم معالجة البيانات؟
عند إرسال نموذج (على سبيل المثال، عندما ينقر المستخدم على الزر إرسال): يقوم المتصفح بتقديم طلب. يمكن للنص البرمجي الاستجابة لهذا الطلب ومعالجة البيانات.
يتم تلقائيًا إرسال الطلب إلى الصفحة التي يظهر فيها النموذج.
لنفترض أنّك تريد تشغيل نص برمجي على https://web.dev
لمعالجة بيانات النموذج، كيف ستفعل ذلك؟
تجربة الدالة
يمكنك اختيار موقع النص البرمجي باستخدام السمة action.
<form action="https://example.com/animals"> ... </form>
يقدّم المثال السابق طلبًا إلى https://example.com/animals.
يمكن للنص البرمجي في خلفية example.com معالجة الطلبات الموجّهة إلى /animals.
البيانات ومعالجتها من النموذج.
كيف يتم نقل البيانات؟
بشكل تلقائي، يتم إرسال بيانات النموذج كطلب GET،
مع إلحاق البيانات المرسلة بعنوان URL.
إذا أرسل أحد المستخدمين كلمة "ضفدع" في المثال أعلاه، يرسل المتصفّح طلبًا إلى عنوان URL التالي:
https://example.com/animals?animal=frog
في هذه الحالة، يمكنك الوصول إلى البيانات الموجودة على الواجهة الأمامية أو الخلفية من خلال الحصول على البيانات من عنوان URL.
يمكنك توجيه النموذج لاستخدام طلب POST من خلال تغيير سمة الطريقة إذا أردت ذلك.
<form method="post">
...
</form>
باستخدام POST، يتم تضمين البيانات في السمة
نص الطلب.
لن تكون البيانات مرئية في عنوان URL ويمكن الوصول إليها فقط من واجهة أمامية أو نص برمجي للخلفية.
ما هي الطريقة التي يجب أن تستخدمها؟
هناك حالات استخدام لكلا الطريقتين.
مع النماذج التي تعالج البيانات الحسّاسة، استخدِم الطريقة POST.
يتم تشفير البيانات (في حال استخدام HTTPS) ولا يمكن الوصول إليها إلا من خلال النص البرمجي للخلفية الذي يعالج الطلب.
ولا تكون البيانات مرئية في عنوان URL. وأحد الأمثلة الشائعة هو نموذج تسجيل الدخول.
إذا كانت البيانات قابلة للمشاركة، يمكنك استخدام الطريقة GET.
وبهذه الطريقة، ستتم إضافة البيانات إلى سجل المتصفح كما هو مُضمَّن في عنوان URL.
وتستخدم نماذج البحث هذه غالبًا. بهذه الطريقة، يمكنك وضع إشارة مرجعية على صفحة نتائج البحث.
الآن بعد أن تعرفت على عنصر النموذج نفسه، حان الوقت للتعرف على حقول النماذج لجعل نماذجك تفاعلية.
التحقق من فهمك
اختبر معلوماتك حول عنصر النموذج
كيف تبدو علامة البدء لعنصر النموذج؟
</form><form> تقريبًا.<form-container><form><form-element>ما هي السمة التي يمكنك استخدامها لتحديد مكان معالجة سمة <form>؟
whereactionaction مكان معالجة <form>.hrefurlما هي طريقة الطلب التلقائية؟
GETPOST