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

من الصعب جدًا التحدث عن النماذج في البرنامج التعليمي المخصص لـ HTML. السبب بسيط للغاية: إنشاء نموذج HTML أسهل بكثير من إنشاء "نقطة في العالم الخارجي" التي سيرسل إليها نموذج HTML المعلومات. في معظم الحالات، تكون هذه "النقطة" عبارة عن برنامج مكتوب بلغة Perl أو C.

غالبًا ما تسمى البرامج التي تعالج البيانات المقدمة بواسطة النماذج بنصوص CGI. يشير اختصار CGI إلى Common Gateways Interface. تتطلب كتابة نصوص CGI في معظم الحالات معرفة جيدة بلغة البرمجة المقابلة وإمكانيات نظام التشغيل Unix.

في الوقت الحالي، أصبحت لغة PHP/FI منتشرة على نطاق واسع إلى حد ما، حيث يمكن تضمين تعليماتها مباشرة في مستندات HTML (يتم حفظ المستندات كملفات ذات الامتداد *.pht أو *.php).

تقوم نماذج HTML بتمرير المعلومات إلى برامج المعالج في شكل أزواج [اسم متغير]=[قيمة متغيرة]. يجب تحديد أسماء المتغيرات بأحرف لاتينية. يتم التعامل مع القيم المتغيرة كسلاسل من قبل المعالجات، حتى لو كانت تحتوي على أرقام فقط.

كيف يعمل نموذج HTML

يتم فتح النموذج بالعلامة

وينتهي بالعلامة

. يمكن أن يحتوي مستند HTML على عدة نماذج، ولكن لا ينبغي وضع النماذج داخل بعضها البعض. يمكن وضع نص HTML، بما في ذلك العلامات، داخل النماذج دون قيود.

بطاقة شعار

قد يحتوي على ثلاث سمات، واحدة منها مطلوبة. هذه هي السمات:

السمة المطلوبة. يحدد مكان وجود معالج النموذج.

يحدد كيفية (بمعنى آخر، استخدام طريقة بروتوكول نقل النص التشعبي) التي سيتم نقل البيانات من النموذج إلى المعالج. القيم الصالحة هي METHOD=POST و METHOD=GET . إذا لم يتم تعيين قيمة السمة، فسيتم افتراض METHOD=GET افتراضيًا.

يحدد كيفية تشفير البيانات من نموذج HTML لنقلها إلى المعالج. إذا لم يتم تعيين قيمة السمة، فإن القيمة الافتراضية هي ENCTYPE=application/x-www-form-urlencoded .

أبسط نموذج HTML

من أجل بدء عملية نقل البيانات من النموذج إلى المعالج، هناك حاجة إلى نوع من التحكم. إن إنشاء هيئة التحكم هذه أمر بسيط للغاية:

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

يمكن ضبط التسمية الموجودة على الزر على ما تريد عن طريق إدخال السمة VALUE = "[Label]"" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

الآن نحن نعرف ما يكفي لكتابة نموذج HTML بسيط (المثال 11). ولن يجمع أي بيانات، بل سيعيدنا ببساطة إلى نص هذا الفصل.

ابسط شكل

يمكن، إذا لزم الأمر، تمرير النقش الموجود على الزر إلى المعالج عن طريق إدخال السمة NAME=[name] في تعريف الزر (اقرأ "name"، من "name" بالإنجليزية)، على سبيل المثال:

عند النقر فوق هذا الزر، سيتلقى المعالج، إلى جانب جميع البيانات الأخرى، متغير زر بالقيمة Let's go! .

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

كيف يقوم نموذج HTML بجمع البيانات

هناك أنواع أخرى من العناصر . كل عنصر يجب أن تتضمن السمة NAME=[name]، التي تحدد اسم العنصر (وبالتالي اسم المتغير الذي سيتم تمريره إلى المعالج). يجب تحديد الاسم فقط بالأحرف اللاتينية. معظم العناصر يجب أن تتضمن السمة VALUE="[value]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} و ومع ذلك، هذه السمة اختيارية لأنه يمكن للمستخدم إدخال قيمة المتغير المقابل باستخدام لوحة المفاتيح.

أنواع العناصر الأساسية :

النوع=نص

يحدد نافذة لإدخال سطر من النص. قد يحتوي على سمات إضافية SIZE=[number] (عرض نافذة الإدخال بالأحرف) وMAXLENGTH=[number] (الحد الأقصى المسموح به لطول سلسلة الإدخال بالأحرف).

مثال:

يحدد نافذة بعرض 20 حرفًا لإدخال النص. بشكل افتراضي، تحتوي النافذة على النص Ivan، والذي يمكن للمستخدم تحريره. يتم تمرير النص المحرر (أو غير المحرر) إلى المعالج في متغير المستخدم.

النوع=كلمة المرور

يحدد نافذة لإدخال كلمة المرور. يشبه تمامًا نوع النص، فقط بدلاً من رموز النص المُدخل، تظهر العلامات النجمية (*) على الشاشة. مثال:

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

النوع=راديو

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

مثال:

9600 نقطة أساس
14400 نقطة أساس
28800 نقطة أساس

يحدد مجموعة من ثلاثة أزرار اختيار تحمل علامة 9600 نقطة أساس، و14400 نقطة أساس، و28800 نقطة أساس. تم تسمية أول الأزرار في البداية. إذا لم يحدد المستخدم زرًا آخر، فسيتم تمرير متغير المودم بالقيمة 9600 إلى المعالج. إذا قام المستخدم بالتحقق من زر آخر، فسيتم تمرير متغير مودم بقيمة 14400 أو 28800 إلى المعالج.

النوع=خانة اختيار

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

مثال:

حواسيب شخصية
محطات العمل
خوادم الشبكة المحلية
خوادم الإنترنت

يحدد مجموعة من أربعة مربعات. تم تحديد المربعين الثاني والرابع في البداية. إذا لم يقم المستخدم بإجراء أي تغييرات، فسيتم تمرير متغيرين إلى المعالج: comp=WS وcomp=IS .

النوع=مخفي

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

مثال:

يحدد متغير الإصدار المخفي الذي يتم تمريره إلى المعالج بالقيمة 1.1.

النوع = إعادة تعيين

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

مثال:

يحدد زر مسح حقول النموذج الذي، عند النقر عليه، يعيد نموذج HTML إلى حالته الأصلية.

إلى جانب العناصر يمكن أن تحتوي نماذج HTML على قوائم وحقول إدخال النص .</p> <p>قائمة طعام <SELECT>تبدو العناصر n كما يلي:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[القيمة 1]">[النص 1] <OPTION VALUE="[القيمة 2]">[النص 2] ... <OPTION VALUE="[قيمة ن]">[النص ن]</SELECT> </p><p>كما ترى، تبدأ القائمة بالعلامة <SELECT>وينتهي بالعلامة</SELECT>. بطاقة شعار <SELECT>يحتوي على سمة NAME مطلوبة تحدد اسم المتغير الذي تنشئه القائمة.</p> <p>بطاقة شعار <SELECT>قد تحتوي أيضًا على سمة متعددة، ويشير وجودها إلى أنه يمكن تحديد عناصر متعددة من القائمة. تعرض معظم المتصفحات قائمة <SELECT MULTIPLE>على شكل نافذة توجد بها عناصر القائمة (يمكن ضبط ارتفاع النافذة في الأسطر باستخدام السمة SIZE=[number]). قائمة طعام <SELECT>في معظم الحالات يتم عرضه كقائمة منسدلة.</p> <p>بطاقة شعار <OPTION>يحدد عنصر القائمة. تقوم سمة VALUE المطلوبة بتعيين القيمة التي سيتم تمريرها إلى المعالج إذا تم تحديد عنصر القائمة هذا. بطاقة شعار <OPTION>قد تتضمن سمة محددة تشير إلى أن العنصر محدد بشكل افتراضي.</p> <h3>دعونا نلقي نظرة على مثال صغير:</h3> <SELECT NAME="selection"> <OPTION VALUE="الخيار 1" checked>الخيار 1 <OPTION VALUE="الخيار 2">الخيار 2 <OPTION VALUE="option3">الخيار 3</SELECT> <p>يحدد هذا الجزء قائمة مكونة من ثلاثة عناصر: الخيار 1، والخيار 2، والخيار 3. بشكل افتراضي، يتم تحديد العنصر الخيار 1. سيتم تمرير للمعالج متغير تحديد يمكن أن تكون قيمته option1 (افتراضي)، option2 أو option3 .</p> <p>بعد كل ما تعلمناه بالفعل، العنصر <TEXTAREA>قد يبدو بسيطا جدا. على سبيل المثال:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>وهنا عنوانك...

جميع الصفات مطلوبة. تحدد سمة الاسم الاسم الذي سيتم من خلاله نقل محتويات النافذة إلى المعالج (في المثال - العنوان). تقوم السمة ROWS بتعيين ارتفاع النافذة في الصفوف (5 في المثال). تقوم سمة COLS بتعيين عرض النافذة بالأحرف (50 في المثال).

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

من المهم أن تعرف أن الحروف الروسية موجودة في النافذة عند تمريرها إلى المعالج، يمكن تحويلها إلى كائنات الأحرف المقابلة لها.</p> <h3>مثال:</h3> <p>لتوضيح استخدام نماذج HTML، قمت بكتابة برنامج صغير بلغة PHP، وهو موجود في:</p><p>http://206.31.82.215/hp/nc/fd-win.pht</p><p>سيتم نقل البيانات المصدر إلى هذا البرنامج من خلال النموذج الموضح في المثال 12:</p><p> <HTML> <HEAD> <TITLE>مثال 12</TITLE> </HEAD> <H1>شكل أكثر تعقيدًا قليلاً</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>اخبرنا قليلا عن نفسك...</H2> <P>ليس من الضروري تقديم معلومات حقيقية. لأغراض العرض التوضيحي، فإن الأغراض الوهمية مناسبة تمامًا أيضًا.</P> <P>اسم: <INPUT TYPE=text SIZE=40 NAME=fn><BR>اسم العائلة: <INPUT TYPE=text SIZE=40 NAME=ln><BR>أرضية: <INPUT TYPE=radio NAME=gender VALUE="ذكر" checked>ذكر <INPUT TYPE=radio NAME=gender VALUE="أنثى">أنثى <BR>عمر: <INPUT TYPE=text SIZE=5 NAME=age>سنين <BR> <INPUT TYPE=submit VALUE="تشغيل المعالج"></P> </FORM> </BODY> </HTML> </p><p>املأ نموذج HTML، وانقر على الزر وشاهد ما سيحدث...</p> <p><b>خدعة صغيرة <br>أو كيفية إرسال النموذج عن طريق البريد</b></p><p>سيقول المشككون أن كل هذا على ما يرام، ولكن لماذا يحتاج الناس بحق الجحيم إلى نماذج HTML وليس لديهم ما يعالجونها؟ وهذا صحيح جزئيا، ولكن جزئيا فقط.</p> <p>يوفر HTML آلية قوية إلى حد ما لإرسال محتوى النموذج عبر البريد الإلكتروني. وهنا ما يبدو في الممارسة العملية.</p> <p>لنفترض أننا قمنا بتغيير طفيف في المثال 12. بدلاً من السلسلة</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>دخلنا الخط</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>يرجى ملاحظة أننا قمنا بتغيير خوارزمية التشفير إلى text/plain، أي أننا قمنا بالفعل بإيقاف تشغيل التشفير تمامًا.</p> <p>لنفترض الآن أن المستخدم أشار إلى الاسم الأول Ivan والاسم الأخير Petrov والجنس الذكر والعمر 22 عامًا. والسؤال الآن هو: ماذا يحدث إذا نقر المستخدم على زر Run Handler؟</p> <p>الجواب بسيط. سيتم إرسال الرسالة التالية تلقائيًا إلى user@mail.box عبر البريد الإلكتروني:</p><p>Fn=Ivan ln=جنس بتروف=عمر الذكر=22</p><p>لسوء الحظ، لن يتمكن جميع المستخدمين من استخدام نموذج HTML هذا. والحقيقة هي أن كل عمل إنشاء رسالة وإطلاق برنامج بريد إلكتروني لإرسالها يتولى في الواقع متصفح المستخدم. وهذا يعني أن تكوين الوصول إلى الإنترنت الخاص بالمستخدم يجب أن يضمن التشغيل المتزامن لبروتوكول نقل النص التشعبي وبروتوكول تسليم البريد الصادر. ليس هذا ممكنا دائما. ومع ذلك، حتى لو كان هذا مستحيلا، فلن يحدث شيء مميت. سيعرض المتصفح ببساطة رسالة خطأ.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p><b>نماذج HTML</b>هي عناصر التحكم التي يتم استخدامها لجمع المعلومات من زوار الموقع.</p> <p>تتكون نماذج الويب من مجموعة من الحقول النصية والأزرار والقوائم وعناصر التحكم الأخرى التي يتم تنشيطها عن طريق النقر بالماوس. من الناحية الفنية، تقوم النماذج بتمرير البيانات من المستخدم إلى خادم بعيد.</p> <p>لتلقي ومعالجة بيانات النموذج، يتم استخدام لغات برمجة الويب مثل <b>بي أتش بي</b>, <b>بيرل</b>.</p> <p>قبل ظهور HTML5، كانت نماذج الويب عبارة عن مجموعة من عدة عناصر <input type="text"> , <input type="password">تنتهي مع زر <input type="submit">. لقد استغرق الأمر الكثير من الجهد لتصميم النماذج عبر متصفحات مختلفة. بالإضافة إلى ذلك، تطلبت النماذج JavaScript للتحقق من صحة الإدخال وتفتقر إلى أنواع حقول إدخال محددة لتحديد المعلومات اليومية مثل التواريخ وعناوين البريد الإلكتروني وعناوين URL.</p> <p><b>نماذج HTML5</b>حل معظم هذه المشاكل الشائعة مع وجود سمات جديدة، مما يوفر القدرة على تغيير مظهر عناصر النموذج من خلال <b>CSS3</b>.</p> <img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy loading=lazy>أرز. 1. تحسين نماذج الويب باستخدام HTML5 <h2>إنشاء نموذج HTML5</h2> <i> </i><h3>1. العنصر <form></h3> <p>أساس أي شكل هو العنصر <form>...</form>. لا يتطلب أي إدخال لأنه عبارة عن حاوية، تجمع جميع عناصر التحكم في النموذج معًا - <b>مجالات</b>. تحتوي سمات هذا العنصر على معلومات مشتركة بين جميع حقول النموذج، لذلك يجب تضمين الحقول التي تم دمجها منطقيًا في نموذج واحد.</p> <table class="t3">الجدول 1. سمات العلامة <form> <tr><th>يصف</th> <th>المعنى/الوصف</th> </tr><tr><td>قبول مجموعة الأحرف</td> <td>قيمة السمة هي مسافة مفصولة <b>قائمة ترميزات الأحرف</b>، والتي سيتم استخدامها لإرسال النموذج، على سبيل المثال، <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td>فعل</td> <td><b>السمة المطلوبة</b>، الذي يحدد عنوان URL لمعالج النموذج على الخادم الذي يتم إرسال البيانات إليه. وهو ملف (على سبيل المثال، action.php) يصف ما يجب فعله ببيانات النموذج. إذا لم يتم تحديد قيمة السمة، فبعد إعادة تحميل الصفحة، ستأخذ عناصر النموذج قيمها الافتراضية. <br>إذا كان سيتم تنفيذ كل العمل من جانب العميل من خلال نصوص JavaScript النصية، فيمكنك تحديد القيمة # لسمة الإجراء. <br>يمكنك أيضًا الترتيب لإرسال النموذج الذي ملأه الزائر إليك عبر البريد الإلكتروني. للقيام بذلك، تحتاج إلى إجراء الإدخال التالي: <br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td>الإكمال التلقائي</td> <td><br><br></td> </tr><tr><td>com.enctype</td> <td>تستخدم للإشارة <b>MIME</b>-نوع البيانات المرسلة مع النموذج، على سبيل المثال، enctype="multipart/form-data" . محدد فقط في حالة الطريقة = "post" . <br>application/x-www-form-urlencoded هو نوع المحتوى الافتراضي، مما يشير إلى أن البيانات التي تم تمريرها تمثل قائمة بمتغيرات النموذج المشفرة بعنوان URL. سيتم ترميز أحرف المسافة (ASCII 32) كـ + وحرف خاص مثل ! سيتم ترميزه بالنظام الست عشري كـ %21 . <br>بيانات متعددة الأجزاء/النموذج - تُستخدم لإرسال النماذج التي تحتوي على ملفات وبيانات غير ASCII وبيانات ثنائية، وتتكون من عدة أجزاء، يمثل كل منها محتوى عنصر نموذج منفصل. <br>نص/عادي - يشير إلى أنه يتم إرسال نص عادي (وليس HTML).</td> </tr><tr><td>طريقة</td> <td>يحدد كيفية إرسال بيانات النموذج. <br>تقوم طريقة get بتمرير البيانات إلى الخادم من خلال شريط عنوان المتصفح. عند إنشاء طلب إلى الخادم، تشكل جميع المتغيرات وقيمها تسلسلًا مثل www.anysite.ru/form.php?var1=1&var2=2 . هل يتم إلحاق أسماء وقيم المتغيرات بعنوان الخادم بعد الإشارة؟ ويتم فصلهما بواسطة &. يتم ترميز جميع الأحرف الخاصة والأحرف غير اللاتينية بالتنسيق %nn، ويتم استبدال المسافة بـ +. يجب استخدام هذه الطريقة إذا كنت لا تقوم بنقل كميات كبيرة من المعلومات. إذا كان من المفترض أن ترسل ملفًا مع النموذج، فلن تعمل هذه الطريقة. <br>يتم استخدام طريقة البريد لإرسال كميات كبيرة من البيانات، بالإضافة إلى المعلومات السرية وكلمات المرور. البيانات المرسلة باستخدام هذه الطريقة غير مرئية في رأس URL لأنها موجودة في نص الرسالة. <br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td>اسم</td> <td>مجموعات <b>اسم النموذج</b>، والذي سيتم استخدامه للوصول إلى عناصر النموذج عبر البرامج النصية، مثل name="opros" .</td> </tr><tr><td>novalidate</td> <td>تعطيل التحقق من الصحة في زر إرسال النموذج. يتم استخدام السمة دون تحديد قيمة</td> </tr><tr><td>هدف</td> <td>تحديد النافذة التي سيتم إرسال المعلومات إليها: <br>_فارغ - نافذة جديدة <br>_self - نفس الإطار <br>_parent — الإطار الأصلي (إذا كان موجودًا، وإذا لم يكن موجودًا، فانتقل إلى الإطار الحالي) <br>_top هي نافذة المستوى الأعلى بالنسبة لهذا الإطار. إذا لم تأتي المكالمة من إطار فرعي، فإلى نفس الإطار.</td> </tr></table><h3>2. تجميع عناصر النموذج</h3> <p>عنصر <fieldset>...</fieldset>مصممة لتجميع العناصر المرتبطة ببعضها البعض، وبالتالي تقسيم النموذج إلى أجزاء منطقية.</p> <p>يمكن تسمية كل مجموعة من العناصر باستخدام العنصر <legend>، والتي تأتي مباشرة بعد العلامة <fieldset>. يظهر اسم المجموعة في الحد العلوي الأيسر <fieldset>. على سبيل المثال، إذا كان في عنصر <fieldset>يتم تخزين معلومات الاتصال:</p><p> <form> <fieldset> <legend>معلومات الاتصال</legend> <p><label for="name">اسم <em>*</em></label><input type="text" id="name"></p> <p><label for="email">بريد إلكتروني</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="يرسل"></p> </form> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy loading=lazy>أرز. 2. تجميع عناصر النموذج باستخدام <fieldset> </p><table class="t3">الجدول 2. سمات العلامة <fieldset> <tr><th>يصف</th> <th>المعنى/الوصف</th> </tr><tr><td>عاجز</td> <td>إذا كانت السمة موجودة، فستكون هناك مجموعة من عناصر النموذج ذات الصلة الموجودة داخل الحاوية <fieldset>، معطل للتعبئة والتحرير. يستخدم لتقييد الوصول إلى حقول نماذج معينة تحتوي على بيانات تم إدخالها مسبقًا. يتم استخدام السمة دون تحديد قيمة - <fieldset disabled> . </td> </tr><tr><td>استمارة</td> <td> <form>في نفس الوثيقة. يشير إلى شكل أو أكثر تنتمي إليه مجموعة العناصر هذه. السمة غير مدعومة حاليًا بواسطة أي متصفح.</td> </tr><tr><td>اسم</td> <td>يعرف <b>اسم</b>، والتي سيتم استخدامها للإشارة إلى العناصر في JavaScript، أو للإشارة إلى بيانات النموذج بعد ملء النموذج وإرساله. إنه مشابه لسمة المعرف.</td> </tr></table><h3>3. إنشاء حقول النموذج</h3> <p>عنصر <input>ينشئ معظم حقول النموذج. تختلف سمات العنصر وفقًا لنوع الحقل الذي يُستخدم العنصر في إنشائه.</p> <p>باستخدام أنماط CSS، يمكنك تغيير حجم الخط ونوع الخط واللون وخصائص النص الأخرى، بالإضافة إلى إضافة حدود ولون الخلفية وصورة الخلفية. يتم تحديد عرض الحقل بواسطة خاصية العرض.</p> <table class="t3">الجدول 3. سمات العلامة <input> <tr><th>يصف</th> <th>المعنى/الوصف</th> </tr><tr><td>يقبل</td> <td>تحديد نوع الملف المسموح بإرساله إلى الخادم. مبين فقط ل <input type="file">. القيم الممكنة: <br>file_extension - يسمح بتنزيل الملفات ذات الامتداد المحدد، على سبيل المثال، Accept = ".gif" ، قبول = ".pdf" ، قبول = ".doc" <br>audio/* - يسمح بتنزيل الملفات الصوتية <br>فيديو/* - يسمح بتنزيل ملفات الفيديو <br>image/* - يسمح بتحميل الصور <br>media_type - يشير إلى نوع الوسائط للملفات التي تم تنزيلها.</td> </tr><tr><td>بديل</td> <td>يعرف <b>نص بديل</b>للصور، المشار إليها فقط ل <input type="image"> . </td> </tr><tr><td>الإكمال التلقائي</td> <td>مسؤول عن تذكر القيم المدخلة في حقل النص واستبدالها تلقائيًا في المرة التالية التي تدخل فيها: <br>on - يعني أن الحقل غير محمي ويمكن تخزين قيمته واسترجاعها، <br>إيقاف - تعطيل الملء التلقائي لحقول النموذج.</td> </tr><tr><td>ضبط تلقائي للصورة</td> <td>يسمح لك بالتأكد من أنه في النموذج الذي تم تحميله، يتم التركيز بالفعل على حقل إدخال أو آخر (تم تحديده)، ويكون جاهزًا لإدخال قيمة.</td> </tr><tr><td>التحقق</td> <td>تتحقق السمة مما إذا كان مربع الاختيار الافتراضي قد تم تحديده عند تحميل الصفحة لحقول مثل type="checkbox" و type="radio" .</td> </tr><tr><td>عاجز</td> <td></td> </tr><tr><td>استمارة</td> <td>يجب أن تكون قيمة السمة مساوية لسمة معرف العنصر <form>في نفس الوثيقة. يحدد نموذجًا واحدًا أو أكثر ينتمي إليه حقل النموذج هذا.</td> </tr><tr><td>com.formaction</td> <td>يحدد عنوان URL للملف الذي سيقوم بمعالجة البيانات المدخلة في الحقول عند إرسال النموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . تتجاوز السمة قيمة سمة الإجراء للنموذج نفسه.</td> </tr><tr><td>com.formenctype</td> <td>يحدد كيفية تشفير بيانات حقل النموذج عند إرسالها إلى الخادم. يتجاوز قيمة سمة enctype للنموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . خيارات: <br>application/-x-www-form-urlencoded هي القيمة الافتراضية. يتم تشفير جميع الأحرف قبل الإرسال (يتم استبدال المسافات بالحرف +، ويتم تحويل الأحرف الخاصة إلى قيم ASCII HEX) <br>بيانات متعددة الأجزاء/النموذج - لم يتم تشفير الأحرف <br>نص/عادي - يتم استبدال المسافات بالرمز +، ولا يتم ترميز الأحرف الخاصة.</td> </tr><tr><td>com.formmethod</td> <td>تحدد السمة الطريقة التي سيستخدمها المتصفح لإرسال بيانات النموذج إلى الخادم. قم بالتعيين فقط للحقول type="submit" و type="image" . يتجاوز قيمة سمة أسلوب النموذج. خيارات: <br>الحصول على هي القيمة الافتراضية. تتم إضافة البيانات من النموذج (زوج الاسم/القيمة) إلى عنوان url وإرسالها إلى الخادم: URL?name=value&name=value <br>يتم إرسال بيانات النموذج اللاحق كطلب http.</td> </tr><tr><td>com.formnovalidate</td> <td>يحدد أنه لا ينبغي التحقق من صحة بيانات حقل النموذج عند إرسال النموذج. يتجاوز قيمة سمة novalidate للنموذج. يمكن استخدامها دون تحديد قيمة السمة.</td> </tr><tr><td>com.formtarget</td> <td>يحدد مكان عرض الرد المستلم بعد إرسال النموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . يتجاوز قيمة السمة الهدف للنموذج. <br><br><br>_parent – ​​يقوم بتحميل الاستجابة في الإطار الأصلي <br>_top – تحميل الاستجابة في وضع ملء الشاشة <br>اسم الإطار - يقوم بتحميل الاستجابة في إطار بالاسم المحدد.</td> </tr><tr><td>ارتفاع</td> <td>تحتوي قيمة السمة على عدد البكسلات دون تحديد وحدة قياس. يضبط ارتفاع حقل النموذج من النوع type="image"، على سبيل المثال، <input type="image" src="img_submit.gif" height="50">. يوصى بضبط ارتفاع وعرض الحقل في نفس الوقت.</td> </tr><tr><td>قائمة</td> <td>هي إشارة إلى عنصر <datalist>، يحتوي على المعرف الخاص به، ويسمح لك بتزويد المستخدم بعدة خيارات للاختيار من بينها عندما يبدأ في إدخال قيمة في الحقل المقابل.</td> </tr><tr><td>الأعلى</td> <td>يسمح لك بتقييد الإدخال المسموح به للبيانات الرقمية إلى الحد الأقصى للقيمة؛ يمكن أن تحتوي قيمة السمة على عدد صحيح أو رقم كسري. يوصى باستخدام هذه السمة مع السمة min. يعمل مع أنواع الحقول التالية: الرقم والنطاق والتاريخ والوقت والتاريخ المحلي والشهر والوقت والأسبوع.</td> </tr><tr><td>الحد الاقصى للطول</td> <td>تحدد السمة الحد الأقصى لعدد الأحرف التي تم إدخالها في الحقل. القيمة الافتراضية هي 524288 حرفًا.</td> </tr><tr><td>دقيقة</td> <td>يسمح لك بتقييد الإدخال الرقمي المسموح به إلى الحد الأدنى من القيمة.</td> </tr><tr><td>عديد</td> <td>يسمح للمستخدم بإدخال قيم سمات متعددة، مفصولة بفاصلة. ينطبق على الملفات وعناوين البريد الإلكتروني. محدد بدون قيمة السمة.</td> </tr><tr><td>اسم</td> <td>يحدد الاسم الذي سيتم استخدامه للوصول إلى العنصر <form>على سبيل المثال، في أوراق أنماط CSS. إنه مشابه لسمة المعرف.</td> </tr><tr><td>نمط</td> <td>يسمح لك بتحديد الاستخدام <b>تعبير عادي</b>بناء جملة البيانات التي يجب السماح بإدخالها في حقل معين. على سبيل المثال، النمط = "(3)-(3)" - تحدد الأقواس المربعة نطاق الأحرف المقبولة، في هذه الحالة - أي أحرف صغيرة، يشير الرقم الموجود بين الأقواس المتعرجة إلى أن هناك حاجة إلى ثلاثة أحرف صغيرة، متبوعة بشرطة، ثم ثلاثة أرقام في النطاق من 0 إلى 9.</td> </tr><tr><td>العنصر النائب</td> <td>يحتوي على النص الذي يتم عرضه في حقل الإدخال قبل تعبئته (غالبًا ما يكون هذا تلميح أداة).</td> </tr><tr><td>يقرأ فقط</td> <td>لا يسمح للمستخدم بتغيير قيم عناصر النموذج؛ ولا يزال تحديد النص ونسخه متاحًا. محدد بدون قيمة السمة.</td> </tr><tr><td>مطلوب</td> <td>تظهر رسالة تشير إلى أن هذا الحقل مطلوب. إذا حاول المستخدم إرسال النموذج دون إدخال القيمة المطلوبة في هذا الحقل، فسيتم عرض رسالة تحذيرية على الشاشة. محدد بدون قيمة السمة.</td> </tr><tr><td>مقاس</td> <td>يضبط العرض المرئي للحقل بالأحرف. القيمة الافتراضية هي 20. تعمل مع أنواع الحقول التالية: النص والبحث والهاتف وعنوان url والبريد الإلكتروني وكلمة المرور.</td> </tr><tr><td>src</td> <td>يحدد عنوان URL للصورة المستخدمة كزر إرسال النموذج. وأشار فقط لهذا المجال <input type="image"> . </td> </tr><tr><td>خطوة</td> <td>يستخدم للعناصر التي تتطلب إدخال قيم رقمية، ويشير إلى مقدار زيادة أو نقصان القيم أثناء عملية ضبط النطاق (الخطوة).</td> </tr><tr><td rowspan="21">يكتب</td> <td>زر - لإنشاء زر. <br><input type="button" value="زر"></td> </tr><tr><td>خانة الاختيار - تحول حقل الإدخال إلى خانة اختيار يمكن تحديدها أو مسحها، على سبيل المثال. <br><input type="checkbox" name="vehicle" value="السيارات">لدي سيارة</td> </tr><tr><td>اللون - يُنشئ لوحات ألوان في المتصفحات الداعمة، مما يسمح للمستخدمين بتحديد قيم الألوان بتنسيق سداسي عشري. <br><input type="color" name="color"></td> </tr><tr><td>التاريخ — يسمح لك بإدخال تاريخ بالتنسيق dd.mm.yyyy. <br>عيد ميلاد: <input type="date" name="birthday"></td> </tr><tr><td>datetime-local - يسمح لك بإدخال التاريخ والوقت مفصولين بحرف إنجليزي كبير T باستخدام النمط dd.mm.yyyy hh:mm. <br>عيد الميلاد - اليوم والوقت: <input type="datetime-local" name="birthday"></td> </tr><tr><td>البريد الإلكتروني - تتوقع المتصفحات التي تدعم هذه السمة أن يقوم المستخدم بإدخال البيانات التي تطابق بناء جملة عناوين البريد الإلكتروني. <br>بريد إلكتروني: <input type="email" name="email"></td> </tr><tr><td>file - يسمح لك بتنزيل الملفات من كمبيوتر المستخدم. <br>اختر ملف: <input type="file" name="img"></td> </tr><tr><td>مخفي - يخفي عنصر التحكم الذي لا يعرضه المتصفح ويمنع المستخدم من تغيير القيم الافتراضية.</td> </tr><tr><td>صورة - لإنشاء زر، مما يسمح لك بإدراج صورة بدلاً من النص على الزر. <br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="يُقدِّم"></td> </tr><tr><td>شهر - يسمح للمستخدم بإدخال رقم السنة والشهر باستخدام نمط yyyy-mm. <br><input type="month"></td> </tr><tr><td>الرقم - مخصص لإدخال قيم عددية. تحدد سماتها min وmax وstep الحدود العليا والدنيا والخطوة بين القيم، على التوالي. يتم افتراض هذه السمات لجميع العناصر التي لها مؤشرات رقمية. تعتمد قيمها الافتراضية على نوع العنصر. <br>يرجى الإشارة إلى الكمية (من 1 إلى 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td>كلمة المرور - تقوم بإنشاء حقول نصية في النموذج، بينما يتم استبدال الأحرف التي أدخلها المستخدم بعلامات نجمية أو نقطية أو أيقونات أخرى مثبتة بواسطة المتصفح. <br>أدخل كلمة المرور: <input type="password"></td> </tr><tr><td>الراديو - ينشئ مفتاحًا - عنصر تحكم على شكل دائرة صغيرة يمكن تشغيله أو إيقاف تشغيله. <br>نباتي: <input type="radio"></td> </tr><tr><td>النطاق - سيسمح لك بإنشاء عنصر واجهة مثل شريط التمرير، الحد الأدنى / الحد الأقصى - سيسمح لك بتعيين نطاق التحديد <input type="range" min="1" max="10" value="3"></td> </tr><tr><td>إعادة تعيين - ينشئ زرًا يمسح حقول النموذج للبيانات التي أدخلها المستخدم. <br><input type="reset"></td> </tr><tr><td>بحث - يشير إلى حقل بحث، ويكون حقل الإدخال بشكل افتراضي مستطيل الشكل. <br>يبحث: <input type="search" name="search"></td> </tr><tr><td>إرسال - ينشئ زرًا قياسيًا يتم تنشيطه بنقرة ماوس. يقوم الزر بجمع المعلومات من النموذج وإرسالها للمعالجة. <br><input type="submit" value="يرسل"></td> </tr><tr><td>النص - ينشئ حقول نصية في نموذج، ويخرج حقل نص من سطر واحد لإدخال النص. <br><input type="text"></td> </tr><tr><td>الوقت - يسمح لك بإدخال الوقت بتنسيق 24 ساعة باستخدام النمط hh:mm. في المتصفحات الداعمة، يظهر كعنصر تحكم في حقل الإدخال الرقمي بقيمة قابلة للتحرير بالماوس ويسمح فقط بإدخال قيم الوقت. <br>تحديد الوقت: <input type="time"></td> </tr><tr><td>عنوان url - الحقل مخصص لتحديد عناوين URL. <br>الصفحة الرئيسية: <input type="url" name="homepage"></td> </tr><tr><td>الأسبوع - تتيح أداة المؤشر المقابلة للمستخدم تحديد أسبوع واحد من السنة، وبعد ذلك ستوفر إدخال البيانات بتنسيق nn-yyyy. اعتمادًا على السنة، يمكن أن يكون عدد الأسابيع 52 أو 53. <br>تحديد الأسبوع: <input type="week"></td> </tr><tr><td>قيمة</td> <td>يحدد النص الذي يظهر على زر، في حقل، أو في النص المرتبط. غير محدد لحقول نوع الملف.</td> </tr><tr><td>عرض</td> <td>تحتوي قيمة السمة على عدد البكسل. يسمح لك بتعيين عرض حقول النموذج.</td> </tr></table><h3>4. حقول إدخال النص</h3> <p>عنصر <textarea>...تستخدم بدلا من العنصر

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

الجدول 4. سمات العلامة <tr><th>يصف</th> <th>المعنى/الوصف</th> </tr><tr><td>ضبط تلقائي للصورة</td> <td>يضبط التركيز على حقل النص الأولي المطلوب تلقائيًا.</td> </tr><tr><td>كولز</td> <td>يضبط العرض من حيث عدد الأحرف. إذا قام المستخدم بإدخال المزيد من النص، يظهر شريط التمرير.</td> </tr><tr><td>عاجز</td> <td>تعطيل القدرة على تحرير ونسخ محتويات الحقل.</td> </tr><tr><td>استمارة</td> <td>يجب أن تكون قيمة السمة مساوية لقيمة سمة معرف العنصر <form>في نفس الوثيقة. يحدد نموذجًا واحدًا أو أكثر ينتمي إليه حقل النص هذا.</td> </tr><tr><td>الحد الاقصى للطول</td> <td>تحدد قيمة السمة الحد الأقصى لعدد الأحرف المراد إدخالها في الحقل.</td> </tr><tr><td>اسم</td> <td>يحدد اسم حقل النص.</td> </tr><tr><td>العنصر النائب</td> <td>يحدد مطالبة نصية قصيرة تصف قيمة الإدخال المتوقعة.</td> </tr><tr><td>يقرأ فقط</td> <td>تعطيل القدرة على تحرير محتويات الحقل.</td> </tr><tr><td>مطلوب</td> <td>تظهر رسالة تشير إلى أن هذا الحقل مطلوب.</td> </tr><tr><td>صفوف</td> <td>يحدد رقمًا يشير إلى عدد الأسطر التي يجب عرضها في منطقة النص.</td> </tr><tr><td>طَوّق</td> <td>يحدد ما إذا كان يجب على النص الاحتفاظ بفواصل الأسطر عند إرسال النموذج. القيمة الصلبة تحافظ على الحمل، ولكن القيمة الناعمة لا تفعل ذلك. إذا تم استخدام الثابت، فيجب تحديد قيمة السمة cols.</td> </tr></table><h3>5. القائمة المنسدلة</h3> <p>تتيح القوائم ترتيب عدد كبير من العناصر بشكل مضغوط. يتم إنشاء القوائم المنسدلة باستخدام العنصر <select>...</select>. أنها تسمح لك باختيار قيمة واحدة أو أكثر من المجموعة المقترحة. بشكل افتراضي، يعرض مربع القائمة العنصر الأول الخاص به.</p> <p>يتم استخدام العناصر لإضافة عناصر إلى القائمة <option>...</option>، والتي تقع في الداخل <select> .</p> <p>لتنظيم القوائم، استخدم العنصر <optgroup>...</optgroup>، مما يؤدي إلى إنشاء رؤوس في القوائم.</p> <p>بالنسبة للقوائم، يمكنك تغيير حجم الخط ونوع الخط واللون وخصائص النص الأخرى، بالإضافة إلى إضافة حدود ولون الخلفية وصورة الخلفية.</p> <table class="t3">الجدول 5. سمات العلامة <select> <tr><th>يصف</th> <th>المعنى/الوصف</th> </tr><tr><td>ضبط تلقائي للصورة</td> <td>يضبط التركيز التلقائي على عنصر عند تحميل الصفحة.</td> </tr><tr><td>عاجز</td> <td>تعطيل القائمة المنسدلة.</td> </tr><tr><td>استمارة</td> <td>يحدد النموذج الذي تنتمي إليه هذه القائمة. قيمة السمة هي معرف النموذج.</td> </tr><tr><td>عديد</td> <td>يسمح لك بتحديد عنصر واحد أو أكثر للقيام بذلك، عند التحديد، تحتاج إلى الضغط مع الاستمرار على مفتاح Ctrl.</td> </tr><tr><td>اسم</td> <td>يحدد اسمًا للقائمة المنسدلة. تحتوي قيمة السمة على اسم يعكس موضوع القائمة.</td> </tr><tr><td>مطلوب</td> <td>يعرض رسالة تشير إلى أنه يجب على المستخدم تحديد قيمة من القائمة المنسدلة قبل إرسال النموذج.</td> </tr><tr><td>مقاس</td> <td>يضبط عدد عناصر القائمة المرئية على الشاشة في نفس الوقت. إذا تجاوز عدد عناصر القائمة العدد المحدد، فسيظهر شريط التمرير. يتم تحديد قيمة السمة كعدد صحيح موجب.</td> </tr></table><h3>6. تسميات لحقول النموذج</h3> <p>يتم إنشاء تسميات عناصر النموذج باستخدام العنصر <label>...</label>. هناك طريقتان لتجميع التسميات والحقول. إذا كان الحقل داخل عنصر <label>، فلا يلزم تحديد السمة for.</p><p> <!-- с указанием атрибута for --> <label for="comments">متى كانت آخر مرة سافرت فيها على متن طائرة؟</label> <textarea id="comments">

قطة

7. الأزرار

عنصر ...يخلق أزرار قابلة للنقر. على عكس الأزرار التي تم إنشاؤها ( , , , )، داخل العنصر يمكنك وضع المحتوى - نص أو صورة.

لعرض العنصر بشكل صحيح

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

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

الجدول 9. سمات العلامة

يصف	المعنى/الوصف
ضبط تلقائي للصورة	يضبط التركيز على الزر عند تحميل الصفحة.
عاجز	تعطيل الزر، مما يجعله غير قابل للنقر.
استمارة	يشير إلى نموذج واحد أو أكثر ينتمي إليه هذا الزر. قيمة السمة هي معرف النموذج المقابل.
com.formaction	تحتوي قيمة السمة على عنوان URL لمعالج بيانات النموذج الذي تم إرساله عند النقر فوق الزر. فقط لنوع الزر = "إرسال" . يتجاوز قيمة سمة الإجراء المحددة للعنصر .
com.formenctype	يضبط نوع تشفير بيانات النموذج قبل إرسالها إلى الخادم عند النقر فوق أزرار مثل type = "submit". يتجاوز قيمة سمة enctype المحددة للعنصر . القيم الممكنة: application/x-www-form-urlencoded هي القيمة الافتراضية. سيتم ترميز كافة الأحرف قبل إرسالها. بيانات متعددة الأجزاء/النموذج - لم يتم تشفير الأحرف. يُستخدم عند تحميل الملفات باستخدام نموذج. نص/عادي - لا يتم ترميز الأحرف، ويتم استبدال المسافات بالرمز +.
com.formmethod	تحدد السمة الطريقة التي سيستخدمها المتصفح لإرسال النموذج. يتجاوز قيمة سمة الطريقة المحددة للعنصر . محدد فقط للأزرار من النوع = "إرسال". القيم الممكنة: الحصول على - تتم إضافة البيانات من النموذج (زوج الاسم/القيمة) إلى عنوان URL وإرسالها إلى الخادم. تحتوي هذه الطريقة على قيود على حجم البيانات المرسلة وهي غير مناسبة لإرسال كلمات المرور والمعلومات السرية. النشر - تتم إضافة البيانات من النموذج كطلب http. هذه الطريقة أكثر موثوقية وأمانًا من طريقة get وليس لها أي قيود على الحجم.
com.formnovalidate	تحدد السمة أنه لا ينبغي التحقق من صحة بيانات النموذج عند الإرسال. محدد فقط للأزرار من النوع = "إرسال".
com.formtarget	تحدد السمة النافذة التي سيتم عرض النتيجة فيها بعد إرسال النموذج. محدد فقط للأزرار من النوع = "إرسال". يتجاوز قيمة السمة الهدف المحددة للعنصر . _blank - يقوم بتحميل الاستجابة في نافذة/علامة تبويب جديدة _self - تحميل الاستجابة في نفس النافذة (افتراضي) _parent - يقوم بتحميل الاستجابة في الإطار الأصلي _top - يقوم بتحميل الاستجابة في وضع ملء الشاشة اسم الإطار - يقوم بتحميل الاستجابة في إطار بالاسم المحدد.
اسم	يحدد اسم الزر، وقيمة السمة هي النص. يُستخدم للارتباط ببيانات النموذج بعد إرسال النموذج، أو للارتباط بزر (أزرار) معين في JavaScript.
يكتب	يحدد نوع الزر. القيم الممكنة: زر - زر قابل للنقر إعادة الضبط - زر إعادة الضبط، يقوم بإرجاع القيمة الأصلية إرسال - زر لإرسال بيانات النموذج.
قيمة	يضبط القيمة الافتراضية التي يتم إرسالها عند النقر فوق الزر.

8. مربعات الاختيار وأزرار الاختيار في النماذج

يتم تعيين مربعات الاختيار في النماذج باستخدام البنية والتبديل - باستخدام .

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

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

وصف

علامة HTML يقوم بإنشاء نموذج HTML يُستخدم لإرسال مدخلات المستخدم إلى الخادم.

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

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

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

صفات

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

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

• على:يقوم المتصفح تلقائيًا بعرض القيم التي أدخلها المستخدم مسبقًا (القيمة الافتراضية).
• عن:يجب على المستخدم إدخال القيم لكل حقل في كل مرة يتم فيها استخدام النموذج. لن يتم عرض القيم التي تم إدخالها مسبقًا.

ملاحظة: سمة الإكمال التلقائي غير مدعومة في متصفح Opera.

Enctype: يحدد كيفية تشفير بيانات النموذج عند إرسالها إلى الخادم. لا يمكن استخدامه إلا مع سمة الطريقة = "post". القيم الممكنة:

• التطبيق/x-www-form-urlencoded:افتراضيًا: يتم تشفير جميع الأحرف قبل الإرسال (يتم تحويل المسافات إلى أحرف "+" ويتم تحويل الأحرف الخاصة إلى قيم ASCII HEX).
• بيانات متعددة الأجزاء/النموذج:لا يتم ترميز الأحرف. تستخدم للعناصر ، الذي تم تعيين سمة نوعه على "ملف".
• نص عادي:يتم تحويل المسافات إلى الحرف "+"، ولكنها لا تقوم بتشفير الأحرف الخاصة مثل الفواصل العليا إلى قيم سداسية عشرية.

الطريقة: تحدد طريقة نقل بيانات HTTP التي سيتم استخدامها عند إرسال بيانات النموذج. القيم الممكنة:

• يحصل:يتم تمرير البيانات إلى شريط عنوان المتصفح كأزواج اسم = قيمة عن طريق إلحاقها بنهاية عنوان URL. يتم استخدام علامة الاستفهام (؟) كفاصل بين عنوان URL الرئيسي والبيانات المرسلة، ويتم استخدام حرف علامة العطف (&) لفصل البيانات المرسلة عن بعضها البعض. يتم استخدام هذه الطريقة عند إرسال البيانات الصغيرة.
• بريد:لا يتم إرسال البيانات كجزء من عنوان URL، ولكن كمحتوى طلب المتصفح. يتم استخدام هذه الطريقة لإرسال كميات كبيرة من البيانات.

إذا لم يتم تحديد سمة الأسلوب، فسيتم استخدام أسلوب GET بشكل افتراضي. الاسم: يحدد اسم النموذج. يمكن استخدام الاسم في JavaScript للإشارة إلى عنصر بالاسم أو للإشارة إلى بيانات النموذج بعد إرساله. إذا تم استخدام عدة نماذج في مستند واحد، فلا ينبغي تكرار أسمائهم، ولا ينبغي ترك سلسلة فارغة كقيمة السمة. novalidate: يشير إلى أنه لن يتم التحقق من صحة البيانات المدخلة في النموذج قبل الإرسال. القيم المحتملة للسمة المنطقية novalidate:

ملاحظة: سمة novalidate غير مدعومة في IE9 والإصدارات السابقة وفي Safari.

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

• _فارغ:يفتح المستند في نافذة أو علامة تبويب جديدة.
• _الذات:يفتح مستندًا في نفس الدليل الذي يوجد به الرابط (افتراضي).
• _الأبوين:يفتح المستند في الإطار الأصلي.
• _قمة:يفتح المستند بالعرض الكامل للنافذة.
• اسم_الإطار:يفتح مستندًا في إطار iframe تم تحديد اسمه كقيمة.

بطاقة شعار كما يدعم السمات والأحداث العالمية

أسلوب إفتراضي

النموذج (العرض: كتلة؛ الهامش العلوي: 0em؛)

مثال

اسم:
اسم العائلة:

يعد نموذج HTML جزءًا من مستند يسمح للمستخدم بإدخال المعلومات محل الاهتمام، والتي يمكن قبولها ومعالجتها لاحقًا على جانب الخادم. بمعنى آخر، يتم استخدام النماذج لجمع المعلومات التي يدخلها المستخدمون.

لتحديد عنصر النموذج الذي تنتمي إليه التسمية الحالية، يجب عليك استخدام السمة for الخاصة بالعلامة . يجب أن تتطابق قيمة السمة for مع قيمة السمة العامة لعنصر النموذج الذي سيتم تطبيق التسمية عليه. لا يجوز استخدام السمة for إذا كان العنصر سيكون داخل العنصر .

دعونا نلقي نظرة على مثال للاستخدام:

ل = "نعم"> نعم لا >

نعم لا >

في هذا المثال نحن:

• داخل أولاًنماذج:
  • نشر اثنينأزرار الراديو ( ) لتحديد واحد من عدد محدود من الخيارات. لاحظ مرة أخرى أنه بالنسبة لأزرار الاختيار الموجودة في نفس النموذج يجب تحديد نفس الاسم، أشرنا إلى قيم مختلفة. ل أولاًمحدد، والذي يحدد أنه يجب تحديد العنصر مسبقًا عند تحميل الصفحة (في هذه الحالة، زر اختيار بالقيمة Yes). بالإضافة إلى ذلك، قمنا بتحديد سمات عامة لأزرار الاختيار، والتي تحدد معرفًا فريدًا للعنصر.
  • وضعت عنصرين ، والتي تحدد التسميات النصية لحقولنا النصية. لاحظ أننا استخدمنا السمة for لتحديد عنصر النموذج الذي تنتمي إليه التسمية الحالية. تتوافق قيمة السمة for مع قيمة السمة العامة لزر الاختيار الذي نحتاجه.
• داخل ثانيةنماذج:
  • نشر اثنينأزرار الراديو ( ) لتحديد واحد من عدد محدود من الخيارات. ل ثانيةبالنسبة لأزرار الاختيار، قمنا بتحديد سمة محددة، والتي تشير إلى أنه يجب تحديد العنصر مسبقًا عند تحميل الصفحة (في هذه الحالة، زر اختيار بالقيمة no ). بالإضافة إلى ذلك، قمنا بتحديد قيم فريدة لأزرار الاختيار داخل النموذج وبنفس الأسماء.
  • وضعت عنصرين ، وضعنا أزرار الاختيار الخاصة بنا بداخلها. على عكس الطريقة السابقة، ليست هناك حاجة لتحديد سمات عامة (معرف للعنصر) لأزرار الاختيار، واستخدام السمة for للتسميات النصية للإشارة إليها (إنشاء ربط).

في المتصفح، يبدو كلا الخيارين (الطريقتين) لاستخدام التسميات النصية متطابقين:

تلميح الأدوات لحقول الإدخال

دعونا نلقي نظرة على مثال للاستخدام:

تسجيل الدخول: اكتب = اسم "نص" = العنصر النائب "تسجيل الدخول" = "أدخل معلومات تسجيل الدخول الخاصة بك">

كلمة المرور: اكتب = اسم "كلمة المرور" = العنصر النائب "كلمة المرور" = "ادخل رقمك السري">
إضافي

في هذا المثال، حددنا للعنصر مع كتابة نص (حقل نص من سطر واحد) واكتب كلمة المرور (حقل كلمة المرور)، تلميح نصي للمستخدم (سمة العنصر النائب) يصف القيمة المتوقعة للإدخال.

نتيجة مثالنا:

أسئلة ومهام حول الموضوع

قبل الانتقال إلى الموضوع التالي، أكمل التدريب العملي:

• باستخدام المعرفة التي اكتسبتها، قم بإنشاء نموذج الطلب التالي:

فارق بسيط: في الحقول التي يُتوقع فيها الاختيار، يجب أن يكون من الممكن الاختيار عن طريق النقر على النص، وليس فقط على العنصر نفسه.

بعد الانتهاء من التمرين، قم بفحص رمز الصفحة عن طريق فتح المثال في نافذة منفصلة للتأكد من أنك فعلت كل شيء بشكل صحيح.

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

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

ما هو الغرض العملي لجميع الأشكال الممكنة المتنوعة؟ بادئ ذي بدء، هناك حاجة إلى إرسال البيانات التي أدخلها المستخدم إلى الخادم لغرض المعالجة الإضافية باستخدام برنامج نصي (معالج) تم إنشاؤه خصيصًا.

نماذج HTML - كيف يتم إنشاؤها باستخدام النموذج والإدخال

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

إذا اتبعت، على سبيل المثال، رابطًا لمقالة حول إنشاء التعليقات (السماح لجميع المستخدمين بإرسال رسائل إلى إدارة الموقع)، ثم كود HTML مع النموذج الذي يحتوي على فتحة (

) والختام (

) جزء:

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

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

16. التركيز التلقائي(لا توجد معلمات) هي سمة منطقية تحدد التركيز على الحقل فورًا عند تحميل صفحة الويب، ونتيجة لذلك يمكنك إدخال البيانات دون النقر عليها. لا يمكن تطبيقه على نوع الإدخال = "مخفي" فقط.

17. عاجز(بدون قيم) - يعطل للمستخدم عنصر النموذج الذي تمت إضافته إليه. غالبًا ما يتم استخدامه مع البرامج النصية، حيث يتم تحديد الشروط التي سيتم بموجبها تنشيط العنصر الذي يتعذر الوصول إليه.

18. استمارة— يربط العنصر بالنموذج عندما يكون موجودًا خارج الحاوية

. للربط، تتم إضافة سمة معرف عمومي إلى علامة النموذج، وتتم إضافة سمة نموذج إلى علامة الإدخال، وقيمها هي نفسها (على سبيل المثال، id = "data" وform = "data") .

19. عديد(لا توجد معلمات) - مجموعات خيار الاختيار المتعددللمستخدم ويتم استخدامه فقط مع type = "file" وtype = "email".

إذا كنت تستخدم حقل تحميل الملف، فيمكنك تحديد عدة ملفات من جهاز الكمبيوتر الخاص بك مرة واحدة باستخدام مفاتيح Ctrl أو Shift. إذا تم عرض حقل لإدخال عنوان بريد إلكتروني (type = "email")، فيجب إدخال رسائل البريد الإلكتروني مفصولة بفواصل.

20. مطلوب(لا توجد قيم) - لتنشيط متطلبات المستخدم لإدخال البيانات. ولذلك، يقوم المتصفح بحظر إرسال نموذج الويب إذا تم ترك الحقل المطلوب فارغًا ويعرض رسالة مقابلة حول الحاجة إلى تعبئته.

لا يتم استخدام هذه السمة للأزرار الرسومية والقياسية (type = "button | image")، وكذلك لحقول الإدخال المخفية (type = "hidden").

21. مقاس- يحدد عرض حقل النص بالأحرف (مناسب فقط لعناصر الكتابة ذات المعلمات "البريد الإلكتروني | كلمة المرور | البحث | الهاتف | النص | عنوان url"). القيمة الافتراضية هي 20 حرفا.

السمات الأربع التالية (22-25) لعلامة الإدخال تحمل تقريبًا نفس الوظيفة التي تحملها، ولكن من أجل الاكتمال سأذكرها بإيجاز أيضًا.

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

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

24. العنصر النائب- يمكنك وضع تلميح (سيكون بمثابة معلمة) مباشرة في حقل النص، والذي سيختفي في اللحظة التي يبدأ فيها المستخدم بإدخال الأحرف. فقط للحقول التي تم تكوينها باستخدام المعلمات البريد الإلكتروني، كلمة المرور، البحث، النص، الهاتف، URLاكتب سمة علامة الإدخال.

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

وأخيرًا، بعض السمات الإضافية التي تكمل وظائف عناصر النموذج المختلفة:

26. نمط- كقيمة تعكس التعبير العادي الذي يتم على أساسه وضع قواعد إدخال المعلومات. في هذه الحالة، يوصى بإضافة سمة عنوان عمومية بالإضافة إلى ذلك، كمعلمة يمكنك إضافة نص توضيحي إليها لمساعدة المستخدمين على ملء الحقول. يتم تطبيق النمط فقط على عناصر البريد الإلكتروني وكلمة المرور والبحث والنص والهاتف وعنوان URL. دعونا نفهم ذلك مع مثال. إليك رمز نموذج التسجيل المبسط (مع ):

تسجيل الدخول كلمة المرور

تسجيل الدخول كلمة المرور

بالنسبة لحقل تسجيل الدخول (type = "text")، يتم تحديد التعبير العادي (5،) كقيمة النمط، مما يعني استخدام الأحرف اللاتينية، ويجب إدخال خمسة أحرف على الأقل.

بالنسبة لمنطقة النص الخاصة بكلمة المرور (type=password)، يتم ضبط القيمة على (8،)، والتي تحدد إدخال الأحرف اللاتينية حصراً في أي حال (الأحرف الكبيرة والصغيرة)، وكذلك الأرقام، بينما يجب ألا يقل العدد الإجمالي لجميع الأحرف عن ثمانية.

إذا تم انتهاك شروط الإدخال المحددة، فلن يسمح لك المتصفح بإرسال البيانات وسيعرض التحذير المناسب:

27. سرك- يحدد المسار إلى الصورة (عنوان URL، وهو قيمته) لعرض زر الرسم "الصورة" (راجع جدول معلمات نوع الإدخال أعلاه).

28. خطوة- يضبط خطوة العناصر التي توفر اختيار القيم الرقمية (نوع الإدخال = "التاريخ | التاريخ والوقت المحلي | الشهر | الرقم | النطاق | الهاتف | الوقت | الأسبوع.").

يمكن أن يأخذ أي عدد صحيح أو رقم كسري كمعلمة. الخطوة الافتراضية = "1". لتعيين نطاق الإدخال النهائي، يمكنك مرة أخرى استخدام سمات الحد الأدنى والحد الأقصى المذكورة أعلاه. من أجل الوضوح، سوف نقوم بتضمين عنصرين type='number' في نموذج الاختبار. بالنسبة للأولى، قم بتعيين الخطوة = "2"، وللثانية، الخطوة = "0،1":

أدخل قيمة بين 0 و1:

أدخل قيمة من -10 إلى 10: أدخل قيمة بين 0 و1:

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

• لنوع = "زر | إعادة تعيين | إرسال" - تعيين تسمية النص على الأزرار؛
• لنوع = "مربع اختيار | راديو | صورة" - يحدد كل مربع اختيار أو مفتاح أو زر رسومي عند إرسال البيانات ومعالجتها على الخادم؛
• بالنسبة إلى type = "password | text" - فور تحميل النموذج، فإنه يعرض نصًا أوليًا في الحقل، والذي يمكن للمستخدم تغييره أو حذفه بالكامل؛
• لا ينطبق النوع = "file" (تحميل الملف) لأنه لا يؤثر على هذا العنصر.

مثال للاستخدام لكل خيار من الخيارات المذكورة أعلاه:

حدد نظام إدارة المحتوى: دبليو بي. جملة

حدد نظام إدارة المحتوى: دبليو بي. جملة

هنا قيمة سمة القيمةيحدد المكونات التالية لكل عنصر: يعرض جزءًا من النص للحقل type = "text" ("اسمك")، ويحدد كل زر من أزرار الاختيار ("1" و "2") المعينة باستخدام type = "radio"، ويقوم أيضًا بتنشيط النقش على الزر ("إرسال").

مثال على إنشاء نموذج HTML جميل

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

يرجى ملاحظة أنه للحصول على تصميم فريد من نوعه، يتم وضع مكونات النموذج الفردية، بحيث تحتوي كل منها على مجموعات من:

الخلف (الحد الأقصى للعرض: 350 بكسل؛ الهامش: 50 بكسل تلقائي 0؛ الحشو: 20 بكسل؛ الخلفية: #f3ebe1؛ عائلة الخط: "Oswald"، sans-serif؛) .form-1، .form-2، .form-3 ، .form-4 (الحشوة: 15px؛ الحدود: 4px double #909090) .form-1، .form-2، .form-3 (الحدود السفلية: لا شيء) .form-1 الإدخال (display:block؛ هامش- أسفل: 10 بكسل؛ العرض: 100%) .في (الحشوة على اليسار: 40 بكسل) .في الإدخال (العرض: 100%) ..png) بدون تكرار؛ موضع الخلفية: 10 بكسل 10 بكسل) ..png) بدون تكرار؛ موضع الخلفية: 10 بكسل 10 بكسل) إدخال النموذج 4 (العرض: كتلة؛ الارتفاع: 50 بكسل؛ حجم الخط: 24 بكسل؛ العرض: 100%؛ المؤشر: المؤشر)

ونتيجة لذلك، يأخذ نموذج الويب هذا المخطط التفصيلي التالي:

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

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

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