تعلم HTML الجزء 27: كيفية عمل نماذج بسيطة في HTML

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

لأغراض معينة ، بالطبعيتطلب استخدام النماذج على موقع الويب الخاص بك مثل نماذج الاستبيان ، ونماذج البيانات البيولوجية ، ونماذج التسجيل ، ونماذج تسجيل الدخول ، وغيرها. تسمح النماذج للمستخدمين بالتفاعل مع النص أو الرسومات أو أي شيء آخر يتم عرضه في المستعرض. في هذه المناقشة ، سأشرح كيفية إنشاء النماذج في HTML. لمزيد من التفاصيل ، دعنا نفكر في الشرح أدناه:

علامة النموذج

علامة <form> هي العلامة المستخدمة لـتحديد شكل. لذلك ، يتم تشكيل نموذج من زوج العلامة <form> ... .. </form>. في علامة <form> هناك سمتان هما سمات الطريقة والعمل التي لها الوظائف التالية:

السمة	الوظيفة
الطريقة	يستخدم لتحديد كيفية إرسال البياناتالتي يدخلها المستخدم على خادم الويب (طريقة معالجة النموذج). حيث توجد طريقتان ، وهما GET و POST. يرسل أسلوب POST جميع البيانات من نموذج منفصل عن URL. وفي الوقت نفسه ، ترسل طريقة GET البيانات إلى الخادم عن طريق وضعها في نهاية عنوان URL.
عمل	تُستخدم لتحديد موقع أو عنوان URL للملف الذي سيتم استخدامه لمعالجة النموذج.

فيما يلي مثال على استخدام علامة <form>:

<form action=”proses_input.php” method=”get”>
…………………………………
</form>

علامة الإدخال

علامة <input> هي العلامة المستخدمة فيإنشاء عناصر تُستخدم لطلب معلومات من المستخدمين أو إنشاء عناصر تحكم مربع نص مثل مربعات الاختيار ومربعات النص والأزرار وأزرار الاختيار وغيرها. لا يتطلب استخدام هذه العلامة أيضًا علامة إغلاق. بعد ذلك ، تتميز علامة <input> بالسمات الشائعة التالية:

السمة	الوظيفة
الاسم	يحدد اسم عنصر الإدخال. يجب أن تكتب هذه السمة على جميع العناصر باستثناء النوع clear و الإرسال.
الطول الأقصى	يحدد الحد الأقصى لعدد الأحرف التي يمكن إدخالها على عنصر الإدخال.
القيمة	يعبر عن القيمة الافتراضية لعنصر الإدخال. بالنسبة لمربعات النص ، حدد النص المكتوب. بالنسبة لمربعات الاختيار أو أجهزة الراديو ، حدد قيمة العنصر المحدد لإرساله إلى الخادم. وفي الوقت نفسه ، بالنسبة إلى أزرار الإرسال وإعادة التعيين ، يتم استخدام هذه السمة لتحديد النص المكتوب على الزر.
الحجم	يحدد عرض عنصر الإدخال بالبكسل حيث يكون الحجم الافتراضي هو 20 بكسل.
فحص	تُستخدم فقط في مربعات الاختيار وأنواع الراديو للإعلان عن عنصر محدد أم لا (سيتم مناقشة شرح السمات المحددة في المادة التالية).
اكتب	حدد نوع المدخلات التي سيتم استخدامها مثل النص والراديو وغيرها.

بالطبع هناك سمات أخرى لم يتم ذكرها أعلاه حتى الآن ، لأن تلك المذكورة أعلاه ليست سوى السمات الأكثر شيوعًا. في المستقبل سأشرح الصفات التي أعنيها.

نوع السمة = "text"

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

فيما يلي مثال على رمز كتابة واستخدام العلامة <input> في HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Form di HTML</title>
</head>
<body>
<h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
<hr>
<form action ="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11px" maxlength="9"> <br><br>
Alamat Rumah : <input type="text" name="alamat_rumah" size="40px"> <br><br>
Email : <input type="text" name="email"> <br><br>
No.Telepon : <input type="text" name="nomor_telepon"> <br><br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</form>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:

من الصورة أعلاه ، يمكنك أن ترى الفرقاستخدم سمة الحجم في كل مربع نص ، وهناك أحجام 11 بكسل و 40 بكسل ولم يتم تحديد الحجم بحيث يكون له عرض بقيمة افتراضية 20 بكسل. وأيضًا في مربع النص "NIM" ، يتم تعيين السمة maxlength إلى 9 ، بينما لم يتم تعيين مربع النص الآخر بحيث يكون له قيمة لا نهائية.

علاوة على ذلك ، فإن الاستبيان ليس فقطيتكون من مربع نص (مربع نص) ولكن أيضًا إرسال وإعادة تعيين الأزرار. لمناقشة أزرار التقديم وإعادة الضبط سيتم شرحها في المادة التالية. بعض المواد حول كيفية إنشاء نماذج بسيطة في HTML ، نأمل أن تتمكن من فهم هذه المواد جيدًا.

</p>

اقرأ المزيد: