تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إنشاء الاستمارات


الصفحة السابقة

يمكن إثراء أي صفحة HTML باستمارات تفاعلية ، والتي تدعو مستخدمي موقعك بإدخال المعلومات: إدخال النص ، تحديد الخيارات ، التحقق الموافقة باستخدام زر ... كل شيء ممكن!

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

إنشاء استمارة


عندما تشعر فجأة بإدراج استمارة في صفحة HTML ، يجب عليك أولاً كتابة علامة <form> </form>. هذه هي العلامة الرئيسية للاستمارة ، فهي تتيح الإشارة إلى البداية والنهاية.

<p>نص قبل الاستمارة</p>

<form>
   <p>داخل الاستمارة</p>
</form>

<p>نص بعد الاستمارة</p>        
لاحظ أنه من الضروري وضع علامات من نوع كتل (مثل <p> </p>) داخل الاستمارتك إذا كنت تريد تضمين نص.

هذا هو للهيكل الأساسي.للاستمارة الآن ، كن حذرًا: ما يجب أن أخبرك به ليس واضحًا لأننا في حدود لغة HTML

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

حسنًا ، هذه هي المشكلة ، أو المشاكل ، التي سنسأل أنفسنا:

  • المشكلة رقم 1 : كيفية إرسال النص الذي أدخله الزائر؟ بأي وسيلة؟
  • المشكلة رقم 2 : بمجرد إرسال البيانات ، وكيفية معالجتها؟ هل ترغب في تلقي الرسالة تلقائيًا عن طريق البريد الإلكتروني أو هل تفضل أن يقوم البرنامج بحفظها في مكان ما ثم نشرها على صفحة مرئية للجميع؟
لتوفير الإجابات لكلتا هاتين المشكلتين ، يجب عليك إضافة سمتين إلى العلامة <form>:
  • Method : تشير هذه السمة إلى كيفية إرسال البيانات (الإجابة على المشكلة رقم 1 ). هناك طريقتان لإرسال البيانات إلى الويب:
    • method="get" : إنها طريقة غير قابلة للتكيف بشكل عام لأنها تقتصر على 255 حرفًا. الخصوصية تنبع من حقيقة أن المعلومات سيتم إرسالها داخل عنوان الصفحة ( http://…) ، ولكن هذه التفاصيل لا تهمنا في الوقت الحالي. في معظم الوقت، فإنني أوصي لكم لاستخدام أسلوب آخر: post.
    • method="post" : هذه هي الطريقة الأكثر استخدامًا للنماذج لأنها تتيح إرسال الكثير من المعلومات. البيانات التي تم إدخالها في النموذج لا تمر عبر عنوان الصفحة.
  • Action : هو عنوان الصفحة أو البرنامج الذي سيقوم بمعالجة المعلومات (الإجابة على المشكلة رقم 2 ). سترسل لك هذه الصفحة رسالة بريد إلكتروني بها رسالة إذا كان هذا ما تريده ، أو حفظ الرسالة مع جميع الآخرين في قاعدة البيانات. لا يمكن أن يتم ذلك بتنسيق HTML و CSS ، فسنستخدم عادةً لغة أخرى ربما تكون سمعت عنها: PHP.
سنكمل الآن العلامة <form>مع السمتين اللتين رأيناهما للتو.

ل method، أظنك عرفت ما سنكتبه ، سوف أضع قيمة post.

ل action، سأكتب اسم صفحة PHP وهمية ( traitment.php). سيتم استدعاء هذه الصفحة عندما ينقر الزائر على زر إرسال النموذج.


<p>نص قبل الاستمارة</p>

<form method="post" action="traitment.php">
   <p>داخل الاستمارة</p>
</form>

<p>نص بعد الاستمارة</p>
<p>Texte avant le formulaire</p>

<form method="post" action="traitment.php">
   <p>Texte à l'intérieur du formulaire</p>
</form> 

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

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

أنواع مدخلات المعلومات الأساسية


حسنًا ،

سنراجع علامات HTML المختلفة لإدخال نص في استمارة. يجب أن تعرف أن هناك مربعي نص مختلفين:

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

يوضح الشكل التالي شكل مربع النص في سطر.

css html form

مربع نص مفرد الأسطر

لإدراج مربع نص في سطر ، سوف نستخدم العلامة <input />.
سنجد هذه العلامة عدة مرات في ما يلي من هذا الفصل. في كل مرة ، type سوف تتغير قيمة السمة الخاصة بها .

لإنشاء مربع نص مفرد الأسطر ، يجب عليك كتابة:


<input type="text" />    

لذلك دعونا نحاول إنشاء نموذج أساسي للغاية مع حقل النص الخاص بنا:


<form method="post" action="traitment.php">
   <p><input type="text" name="pseudo" /></p>
</form>     

كالعادة ، أحثك بشدة على تجربة هذا الرمز لمراقبة النتيجة.

تسميات

مربع النص هذا لطيف جدًا ولكن إذا وقع زائرك عليه ، فهو لا يعرف ما يكتب. هذا هو بالضبط دور العلامة <label>:


<form method="post" action="traitment.php">
    <p>
        <label> اسم المستخدم</label> : <input type="text" name="pseudo" />
    </p>
</form> 

يعطي هذا الكود بالضبط النتيجة التي لاحظتها في الشكل السابق.

لكن هذا لا يكفي. يجب عليك ربط التسمية بمربع النص. للقيام بذلك ، يجب أن نعطي اسمًا لمربع النص ، ليس مع السمة nameولكن مع السمة id(التي يمكن استخدامها في جميع العلامات)

واحد name وواحد id على نفس العنصر ؟ اليس تكرار هذا ؟

لا على الاطلاق! في الواقع ، يتم استخدام id لتحديد عنصر HTML من أجل الوصول إليه ومعالجته. انه معرف فريد لهذا العنصر.

و name ، يشير إلى متغير الاستمارة التي ينتمي لها العنصر . هنا لا يوجد الا اسم واحد يشير الى المتغير pseudo

name و id بالتالي لها نفس القيمة. ولكن عندما نستخدم checkbox أو radio ، فإن العديد من العناصر تتوافق مع نفس المتغير. على سبيل المثال ، متغير اللون مع عنصر واحد للأحمر ، واحد للأزرق ، والآخر للأخضر . سيكون لديهم نفس name ، لكن ليس لديهم نفس id

لربط التسمية بالحقل ، يجب أن تعطيه سمة for لها نفس قيمة idالحقل ... الأفضل هو رؤيتها في مثال:


<form method="post" action="traitment.php">
   <p>
       <label for="pseudo"> اسم المستخدم </label> : <input type="text" name="pseudo" id="pseudo" />
   </p>
</form> 

حاول النقر فوق النص " اسم المستخدم ": سترى أن المؤشر يتم وضعه تلقائيًا في مربع النص المقابل.

بعض الصفات الإضافية
يمكنك إضافة عدد من السمات الأخرى إلى العلامة <input />لتخصيص عملها:
  • يمكننا توسيع المجال مع size
  • يمكننا الحد من عدد الحروف التي يمكن ادخالها maxlength
  • يمكننا ملء الحقل مسبقًا باستخدام قيمة افتراضية باستخدام value
  • يمكننا أن نعطي إشارة على محتويات الحقل مع placeholder ستختفي هذه الإشارة بمجرد أن ينقر الزائر داخل الحقل.

في المثال التالي ، يحتوي مربع النص على إشارة لفهم ما يجب إدخاله ؛ يبلغ طول الحقل 30 حرفًا ولكن يمكنك فقط كتابة 10 أحرف كحد أقصى:


<form method="post" action="traitement.php">
    <p>
        <label for="pseudo">Votre pseudo :</label>
        <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
    </p>
</form>  

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

css html form

حقل نص مع إشارة (placeholder)

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

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

أكمل استمارتي يسأل الآن اسم المستخدم الزائر و كلمة المرور:


<form method="post" action="traitement.php">
   <p>
       <label for="pseudo">اسم المستخدم :</label>
       <input type="text" name="pseudo" id="pseudo" />
       
       <br />
       <label for="pass">كلمة المرور :</label>
       <input type="password" name="pass" id="pass" />
       
   </p>
</form> 

اختبر مربع كلمة المرور: سترى أنه لا يتم عرض الأحرف على الشاشة ، كما هو موضح في الشكل التالي.

css img form

مربع إدخال كلمة المرور

مربع النص متعدد الأسطر
لإنشاء مربع نص متعدد الأسطر ، نقوم بتغيير العلامة: سنستخدم <textarea> </textarea>.

كما هو الحال مع أي عنصر آخر في النموذج ، يجب أن تعطيه اسمًا name واستخدام labelالذي يفسر ما هو عليه.


<form method="post" action="traitment.php">
   <p>
       <label for="improve">كيف يمكنني ان احسن في هذا الموقع  ?</label><br />
       <textarea name="improve" id="improve"></textarea>
   </p>
</form>

وهنا هي النتيجة في الصورة (الشكل التالي)!

css img form

منطقة إدخال متعددة الاسطر (صغيرة)

كما ترون ، إنها صغيرة بعض الشيء ! لحسن الحظ ، يمكننا تغيير حجم <textarea> بطريقتين.
  • في CSS : فقط قم بتطبيق خصائص CSS width و height على <textarea>
  • مع السمات : يمكنك إضافة سمات rows و cols في العلامة <textarea> . يشير الأول إلى عدد أسطر النص التي يمكن عرضها في وقت واحد ، والثاني عدد الأعمدة.
لماذا أفتح العلامة <textarea>لإغلاقها مباشرة؟
يمكنك تعبئتها مسبقًا <textarea> بقيمة افتراضية. في هذه الحالة ، لا نستخدم السمة value : نكتب ببساطة النص الافتراضي بين علامة الفتح وعلامة الإغلاق!

<form method="post" action="traitment.php">
   <p>
       <label for="improve">كيف يمكنني ان احسن في هذا الموقع  ?</label><br />
       <textarea name="improve" id="improve" rows="10" cols="50">
       
تحسين موقعك؟         		
        لكن في النهاية! إنه رائع لدرجة أنك لا تحتاج إلى تحسينه!       
	</textarea>       
   </p>
</form>

وهنا النتيجة في الشكل التالي.

css img form

حقل إدخال متعدد الخطوط مملوء مسبقًا

مجالات الإدخال المتطورة


HTML5 يجلب العديد من الميزات الجديدة المتعلقة بالاستمارات. ظهرت أنواع جديدة من الحقول مع هذا الإصداربمجرد إعطاء السمة type للعلامة <input />واحد من القيم الجديدة المتاحة. لنقم بجولة سريعة!
ليست كل المتصفحات معتادة على حقول الإدخال المتطورة هذه. في مكانها ، ستعرض الإصدارات الأقدم من المتصفحات حقل إدخال بسيط من سطر واحد (كما لو كنا قد كتبنا type="text" )لنتركها بيننا إنه مثالي: يمكن للمتصفحات الجديدة الاستفادة من أحدث الميزات ، بينما تعرض المتصفحات القديمة مربع نص بديل يعمل أيضًا.

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

البريد الإلكتروني

يمكنك طلب إدخال عنوان بريد إلكتروني:


<input type="email" />

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

css img form

يحيط بحقل في البريد الإلكتروني فايرفوكس أحمر اللون

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

css img form

كتابة لوحة المفاتيح البريد الإلكتروني على iPhone

عنوان URL

باستخدام النوع url، يمكنك طلب إدخال عنوان مطلق (يبدأ عادةً بـ http://):


<input type="url" />

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

css img form

لوحة المفاتيح إدخال URL على iPhone

رقم الهاتف

هذا الحقل مخصص لإدخال أرقام الهواتف:


<input type="tel" />

على iPhone ، على سبيل المثال ، تظهر لوحة مفاتيح مناسبة عند ملء الحقل (الشكل التالي).

css img form

لوحة مفاتيح إدخال رقم الهاتف على جهاز iPhone

عدد

عادة ما يتم عرض الحقل مع أسهم صغيرة لتغيير القيمة (الشكل التالي).

css img form

حقل إدخال الرقم

يمكنك تخصيص تشغيل الحقل بالسمات التالية:

  • min : الحد الأدنى للقيمة المسموح بها.
  • Max : القيمة القصوى المسموح بها.
  • Step : إنها "خطوة". إذا حددت خطوة 2 ، فسيقبل الحقل قيم 2 في 2 فقط (على سبيل المثال 0 ، 2 ، 4 ، 6 ...).
مؤشر

النوع Range يتيح لك تحديد رقم باستخدام شريط تمرير (يُسمى أيضًا شريط التمرير ) ، كما في الشكل التالي:


<input type="range" />
css img form

مؤشر بفضل نطاق النوع

يمكنك استخدام السمات min، max و step لتقييد القيم المتاحة.

اللون

يستخدم هذا الحقل لإدخال اللون:


<input type="color" />
css img form

حقل من نوع color

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

تاريخ

توجد أنواع مختلفة من حقول تحديد التاريخ:

  • Date : للتاريخ (05/08/1985 على سبيل المثال) ؛
  • Time : الآن (13:37 على سبيل المثال) ؛
  • Week : للأسبوع ؛
  • Month : للشهر ؛
  • Datetime : للتاريخ والوقت (مع إدارة فرق التوقيت) ؛
  • datetime-local للتاريخ والوقت (بدون إدارة فارق التوقيت).

على سبيل المثال:


<input type="date" />
css img form

حقل تاريخ

كما ترون ، هناك خيار!

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

بحث

يمكنك إنشاء حقل بحث مثل هذا:


<input type="search" />

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

عناصر الخيارات


يوفر لك HTML مجموعة كبيرة من عناصر الخيارات لاستخدامها في النموذج الخاص بك. هذه هي العناصر التي تطلب من الزائر الاختيار من قائمة الاحتمالات. سنراجع:

  • خانات الاختيار checkbox
  • مجالات الخيار radio
  • القوائم المنسدلة list

خانات الاختيار


إنشاء مربع الاختيار؟ لا شيء أسهل من ذلك ! سنقوم بإعادة استخدام العلامة <input />، هذه المرة نحدد لها النوع checkbox:

<input type="checkbox" name="choice" />
أضف <label>في مكان جيدًا فقط!

<form method="post" action="traitement.php">
   <p>
        اختر من الأطعمة التي تحب تناولها:<br />
       <input type="checkbox" name="fries" id="fries" /> <label for="frites"> بطاطس مقلية </label><br />
       <input type="checkbox" name="steak" id="steak" /> <label for="steak"> شريحة لحم </label><br />
       <input type="checkbox" name="spinach" id="spinach" /> <label for="spinach"> سبانخ </label><br />
       <input type="checkbox" name="Oysters" id="Oysters" /> <label for="Oysters"> المحار </label>
   </p>
</form>

وهنا النتيجة في الشكل التالي.

css img form

لا تنسَ أن تعطي اسمًا مختلفًا لكل خانة اختيار ، فهذا سيسمح لك بالتعرف لاحقًا على الأسماء التي قام الزائر بفحصها.

أخيرًا ، كن على دراية بأنه يمكنك التأكد من تحديد مربع افتراضيًا باستخدام السمة checked:


<input type="checkbox" name="choice" checked />
عادة ، أي سمة لها قيمة. في هذه الحالة ، ومع ذلك ، فإن إضافة قيمة ليست إلزامية: وجود السمة يكفي لجعل الكمبيوتر يفهم أنه يجب تحديد المربع. إذا كان هذا يزعجك ، فتعرف أنه يمكنك إعطاء أي قيمة للسمة (يكتب بعض مصممي المواقع في بعض الأحيان checked="checked" ولكنها زائدة عن الحاجة!). في جميع الحالات ، سيتم فحص المربع.
مجالات الخيار RADIO

تتيح لك حقول الخيار إمكانية الاختيار (فقط واحد) من قائمة الاحتمالات. إنها تشبه مربعات الاختيار إلى حد ما ولكن هناك صعوبة إضافية: يجب تنظيمها في مجموعات. الخيارات في نفس المجموعة لها نفس الاسم ( name) ، ولكن يجب أن يكون لكل خيار قيمة ( value) مختلفة .

العلامة المراد استخدامها دائمًا واحدة <input />، في هذه المرة نضع قيمة radio في السمة type

ستكون الأمور أكثر وضوحًا في المثال التالي:


<form method="post" action="traitement.php">
   <p>
       يرجى الإشارة إلى الفئة العمرية التي توجد فيها:<br />
       <input type="radio" name="age" value="under15" id="under15" /> <label for="moins15"> تحت 15 سنة </label><br />
       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25"> 15-25 سنة </label><br />
       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40"> 25-40 سنة </label><br />
       <input type="radio" name="age" value="over40" id="over40" /> <label for="plus40"> حتى أقدم من ذلك?!</label>
   </p>
</form>

الذي يعطينا الرقم التالي.

css img form

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

ستلاحظ أن هذه المرة اخترنا id مختلفة عن name في الواقع ، قيم name اذا كانوا متطابقين ، لن نتمكن من التمييز بين id (وأنت تعلم أن id يجب أن تكون الفرد فريدة) هذا هو السبب في أننا اخترنا إعطاء id نفس القيمة value.

إذا كان لديك منطقتان مختلفتان للخيارات ، فيجب أن تمنح نفس name لكل مجموعة ، مثل هذا:


<form method="post" action="traitement.php">
   <p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
   </p>
   <p>
       في أي قارة تعيش؟?<br />
       <input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">اوروبا</label><br />
       <input type="radio" name="continent" value="Africa" id="Africa" /> <label for="Africa">افريقيا</label><br />
       <input type="radio" name="continent" value="asie" id="asie" /> <label for="asie">آسيا</label><br />
       <input type="radio" name="continent" value="America" id="America" /> <label for="America">امريكا</label><br />
       <input type="radio" name="continent" value="Australia" id="Australia" /> <label for="australia">استراليا</label>
   </p>
</form>

السمة checked، مرة أخرى ، متاحة لتحديد قيمة افتراضية.

القوائم المنسدلة
القوائم المنسدلة هي طريقة أنيقة أخرى للاختيار من بينها العديد من الاحتمالات. العملية مختلفة قليلا. سنستخدم العلامة <select> </select> التي تشير إلى بداية ونهاية القائمة المنسدلة. تتم إضافة السمة name إلى العلامة لإعطاء القائمة اسمًا.
ثم ، في داخل <select> </select>، سنضع العديد من العلامات <option> </option> (واحدة لكل اختيار) تتم إضافة سمة إلى كل منهم value لتحديد ما اختار الزائر.

هنا مثال على الاستخدام:


<form method="post" action="traitment.php">
   <p>
       <label for="country"> في اي بلد تعيش?</label><br />
       <select name="pays" id="pays">
           <option value="france">فرنسا</option>
           <option value="Spain">اسبانيا</option>
           <option value="italiy">ايطاليا</option>
           <option value="united kingdom">المملكة المتحدة</option>
           <option value="canada">كندا</option>
           <option value="united states">الولايات المتحدة</option>
           <option value="china">الصين</option>
           <option value="japan">اليابان</option>
       </select>
   </p>
</form>

تظهر النتيجة التي تم الحصول عليها في الشكل التالي.

css img form

قائمة منسدلة

إذا كنت تريد تحديد خيار افتراضيًا ، فاستخدم هذه المرة السمة selected:


<option value="canada" selected>Canada</option>
يمكنك أيضًا تجميع خياراتك باستخدام العلامة <optgroup> </optgroup> في مثالنا ، لماذا لا تفصل بين الدول حسب قارتهم؟

<form method="post" action="traitement.php">
    <p>
    <label for="country"> في اي بلد تعيش?</label><br />
    <select name="pays" id="pays">
            <optgroup label="Europe">
            <option value="france">فرنسا</option>
            <option value="Spain">اسبانيا</option>
            <option value="italiغ">ايطاليا</option>
            <option value="united kingdom">المملكة المتحدة</option>
            </optgroup>
            <optgroup label="America">
            <option value="canada">كندا</option>
            <option value="united states">الولايات المتحدة</option>
            </optgroup>
            <optgroup label="Asia">
            <option value="china">الصين</option>
            <option value="japan">اليابان</option>
            </optgroup>
    </select>
    </p>
</form>

تظهر النتيجة التي تم الحصول عليها في الشكل التالي.

css img form

يتم تجميع الخيارات حسب القارة

وضع اللمسات الأخيرة وإرسال الاستمارة


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

جمع الحقول
إذا كان النموذج الخاص بك كبيرًا ويحتوي على العديد من الحقول ، فقد يكون من المفيد تجميعها ضمن عدة علامات <fieldset> . كل <fieldset> يمكن أن يحتوي على تعليق مع العلامة <legend> انظر إلى هذا المثال:

<form method="post" action="traitment.php"> 
 
   <fieldset>
       <legend> التفاصيل الخاصة بك </legend> 

       <label for="nom"> ما هو لقبك ?</label>
       <input type="text" name="lastname" id="lastname" />

       <label for="prenom">ما هو اسمك ?</label>
       <input type="text" name="firstname" id="firstname" />
 
       <label for="email">ما هو بريدك الالكتروني ?</label>
       <input type="email" name="email" id="email" />

   </fieldset>
 
   <fieldset>
       <legend>امنيتك</legend> 
 
       <p>
           ضع امنية تريدها ان تتحقق :

           <input type="radio" name="wish" value="rich" id="rich" /> <label for="rich"> أن أكون غنيا </label>
           <input type="radio" name="wish" value="popular" id="popular" /> <label for="popular">مشهور</label>
           <input type="radio" name="wish" value="intelligent" id="intelligent" /> <label for="intelligent">أكون <strong>أكثر</strong> ذكاءا</label>
           <input type="radio" name="wish" value="other" id="other" /> <label for="other">أشياء أخرى...</label>
       </p>
 
       <p>
           <label for="precisions"> إذا كان "غير ذلك" ، فيرجى تحديد ذلك:</label>
           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
       </p>
   </fieldset>
</form>

تظهر النتيجة التي تم الحصول عليها في الشكل التالي.

css img form

يتم تجميع الحقول

حدد الحقل تلقائيًا

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


<input type="text" name="firstname" id="firstname" autofocus />
جعل حقل إلزامي

يمكنك جعل الحقل إلزاميًا من خلال إعطائه السمة required .


<input type="text" name="firstname" id="firstname" required />

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

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

لدينا تنسيقات زائفة في CSS لتغيير نمط العناصر المطلوبة ( :required) وغير صالح ( :invalid). تذكر أيضًا أن لديك التنسيق الزائف :focusلتغيير مظهر الحقل عندما يكون المؤشر بداخله.


:required
{
    background-color: red;
}
زر الإرسال
لم يبقى لنا الا إنشاء زر الإرسال. مرة أخرى ، <input /> تأتي لإنقاذنا. إنه موجود في أربعة إصدارات:
  • type="submit" : زر إرسال الاستمارة الرئيسي. هذا هو الذي ستستخدمه في أغلب الأحيان. سيتم نقل الزائر إلى الصفحة المشار إليها في سمة الاستمارة action .
  • type="reset" : إعادة تعيين الاستمارة.
  • type="image" : ما يعادل الزر submit، قدمت هذه المرة كصورة. أضف السمة src للإشارة إلى عنوان URL للصورة.
  • type="button" : زر عام ، والذي لن يكون له (تلقائيا) أي تأثير. بشكل عام ، تتم إدارة هذا الزر في JavaScript لتنفيذ الإجراءات على الصفحة. لن نستخدمها هنا.

يمكنك تغيير النص المعروض داخل الأزرار مع السمة value .

لإنشاء زر إرسال ، سنكتب ، على سبيل المثال:


<input type="submit" value="Send" />

الذي يعطينا الرقم التالي.

css img form

زر الإرسال

عند النقر فوق الزر "إرسال" ، ستنقلك الاستمارة إلى الصفحة المشار إليها في السمة action . تذكر، كنا نفترضه صفحة وهمية: traitment.php .

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

الخلاصة


  • الاستمارة هي منطقة تفاعلية في الصفحة ، حيث يمكن للزائرين إدخال المعلومات.
  • نحدد استمارة تحتوي على العلامة <form> التي يجب أن نضيف إليها سمتين : method (وضع إرسال البيانات) و action (الصفحة التي سيتم إعادة توجيه الزائر إليها بعد إرسال الاستمارة ومعالجة المعلومات) .
  • يمكن إدراج العديد من عناصر الاستمارة مع العلامة <input /> . تُستخدم قيمة السمة الخاصة به type للإشارة إلى نوع الحقل الذي يجب إدراجه:
    • Text : مربع النص ؛
    • Password : مربع النص لكلمة المرور.
    • Tel : رقم الهاتف ؛
    • Checkbox : مربع الاختيار ؛
    • إلخ
  • العلامة <label> تسمح لك بكتابة تسمية. يرتبط بحقل الاستمارة بالسمة for، والذي يجب أن يكون له نفس قيمة id حقل الاستمارة.
  • يمكنك جعل الحقل إلزاميًا باستخدام السمة required ، و يتم تحديده تلقائيا بـ autofocus، مع إعطاء إشارة في الحقل بـ placeholder...
  • لاستعادة ما أدخله الزوار ، لا يكفي HTML . يجب عليك استخدام لغة "server" مثل PHP ... إذا كنت ترغب في المضي قدمًا ، فسيتعين عليك تعلم لغة جديدة!