نماذج HTML

يستخدم نموذج HTML لجمع أنواع مختلفة من الإدخالات من المستخدمين، وتدعم جميع المتصفحات علامة <form>. التعريف والاستخدام: يتم استخدام علامة <form> لإنشاء نموذج إدخال HTML. يمكن أن تحتوي النماذج على عناصر input مثل حقل النص، مربعات تیک، مربعات اختيار، زر تقديم وما إلى ذلك.

مثال على الإنترنت

إنشاء حقل إدخال النص
هذا المثال يوضح كيفية إنشاء حقل النص في صفحة HTML. يمكن للمستخدمين كتابة النص في حقل النص.

إنشاء حقل إدخال كلمة المرور
هذا المثال يوضح كيفية إنشاء مجال كلمة المرور في HTML.

نماذج HTML

النموذج هو منطقة تحتوي على عناصر النموذج.

العناصر النموذجية هي التي تسمح للمستخدمين بإدخال المحتويات في النموذج، مثل: حقل النص (textarea)، قائمة منسدلة، مربعات اختيار (radio-buttons)، مربعات تیک (checkboxes) وما إلى ذلك.

يتم تعيين النموذج باستخدام علامة <form>:

<form>
.
عنصر input
.
</form>

نموذج HTML - عناصر الإدخال

في معظم الحالات، يتم استخدام علامات النموذج (input) كعلامات النموذج.

نوع الإدخال يتم تحديده من خلال خاصية النوع (type). إليك بعض أنواع الإدخال التي يتم استخدامها بشكل متكرر:

حقل النص (Text Fields)

يستخدم حقل النص عبر علامة <input type="text"> لتحديد النصوص، وعندما يريد المستخدم إدخال الأحرف والأرقام وما إلى ذلك في النموذج، يتم استخدام حقل النص.

<form action="/run/demo-form.php"> 　　
اسم:<input type="text" name="firstname" size="20"/><br/>اسم العائلة:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="تقديم"/> </form>

يظهر المتصفح كما يلي:

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

حقل كلمة المرور

يحدد حقل كلمة المرور برمز <input type="password">

<form action="/run/demo-form.php"> 　　
كلمة المرور:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

يظهر مظهر المتصفح كالتالي:

ملاحظة:لا يتم عرض حقل كلمة المرور بشكل واضح، بل يتم استبدالها بأعمدة أو نقاط.

أزرار الاختيار (Radio Buttons)

<input type="radio"> يعرف خيار التحقق من النموذج

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Male<br/><input type="radio" name="sex" value="female"/>Female<input type="submit" value="Submit"/> </form>

يظهر مظهر المتصفح كالتالي:

مربعات الاختيار (Checkboxes)

<input type="checkbox"> يعرف مربع الاختيار. يجب على المستخدم اختيار خيار أو عدة خيارات من بين الخيارات المقدمة.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

يظهر مظهر المتصفح كالتالي:

زر الإرسال (Submit Button)

<input type="submit"> يعرف زر الإرسال.

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

<form name="input" action="/run/demo-form.php" method="get">
اسم المستخدم: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

يظهر مظهر المتصفح كالتالي:

إذا كنت تكتب بعض الأحرف في حقل النص أعلاه، ثم تنقر على زر التأكيد، فإن البيانات المدخلة ستُرسل إلى صفحة "html_form_action.php". سيعرض هذا الصفحة النتائج المدخلة.

مزيد من الأمثلة عبر الإنترنت

أزرار اختيار (Radio buttons)
هذا المثال يوضح كيفية إنشاء أزرار اختيار في HTML.

مربعات اختيار (Checkboxes)
هذا المثال يوضح كيفية إنشاء مربعات اختيارية في صفحة HTML. يمكن للمستخدم اختيار أو إلغاء اختيار مربعات الاختيار.

قائمة منسدلة بسيطة
هذا المثال يوضح كيفية إنشاء مربع منسدل بسيط في صفحة HTML. مربع منسدل هو قائمة اختيار.

قائمة منسدلة مسبقًا
هذا المثال يوضح كيفية إنشاء قائمة منسدلة بقيمة مسبقة مختارة.

حقل النص (Textarea)
هذا المثال يوضح كيفية إنشاء حقل نص (وحدة إدخال نص متعدد السطور). يمكن للمستخدم كتابة النص في حقل النص. لا يوجد حد للعدد من الأحرف القابلة للكتابة.

إنشاء زر
هذا المثال يوضح كيفية إنشاء زر. يمكنك تخصيص النص على الزر.

مثال نموذج

نموذج به حواف
هذا المثال يوضح كيفية رسم مربع مكتوب بعنوان حول البيانات.

نموذج يحتوي على زرين إدخال وأزرار التأكيد
هذا المثال يوضح كيفية إضافة نموذج إلى الصفحة. يحتوي هذا النموذج على زرين إدخال وأزرار التأكيد.

نموذج يحتوي على زرين اختياريين وأزرار التأكيد
هذا النموذج يحتوي على زرين اختياريين وأزرار التأكيد

نموذج يحتوي على زرين اختياريين وأزرار التأكيد
يتضمن هذا النموذج زرين اختياريين وأزرار التأكيد.

إرسال بريد إلكتروني من النموذج
هذا المثال يوضح كيفية إرسال بريد إلكتروني من النموذج.

علامات نموذج HTML

New : علامات HTML5 الجديدة