الآن بعد أن رأينا كيفية إضافة أزرار إلى صفحة الويب الخاصة بنا.
في هذا التمرين، سننظر في النماذج وكيف يمكننا إضافة نماذج إلى
صفحة الويب الخاصة بنا ونمط عناصر النموذج هذه باستخدام فئات Bootstrap.
بالعودة إلى صفحة contactus.html،
قم بالتمرير لأسفل حتى ترى هذا التعليق هناك يسمى «النموذج يذهب هنا».
نحن ذاهبون لاستبدال هذا مع النموذج في هذه الصفحة على شبكة الإنترنت.
لذا، دعنا نحذف ذلك ثم نبني
النموذج في هذا الموقع المعين داخل div هناك.
للبدء في النموذج،
سأقوم باستخدام علامة HTML للنموذج وبناء النموذج داخل علامة HTML هذه.
لذلك، ضمن علامة النموذج هذه،
دعونا نضيف عناصر نصف قطرها من نموذجنا.
لذلك، داخل هذا النموذج،
سأقوم بتقسيم هذا النموذج إلى عدة صفوف هناك.
لتقسيم النموذج الخاص بك إلى صفوف،
يمكنك ببساطة استخدام div مع class = «form-group» ثم تطبيق فئة الصف عليه.
لذلك، مع هذا، ونحن في طريقنا لإضافة في مجموعتين نموذج هنا.
أنا ذاهب لنسخ هذا ومن ثم لصقه أسفل هنا.
لذلك، يمكنك أن ترى أنني ذاهب لإضافة صفين إلى هذا النموذج هنا.
لذلك، لإضافة عنصر في هذا النموذج،
ونحن نذهب إلى هذا ديف وبعد ذلك سوف تبدأ باستخدام علامة التسمية هنا.
وبالنسبة لعلامات التسمية،
لذلك سيكون لدي صفين؛
واحد يسمح للمستخدم لملء اسمه الأول،
والثاني لاسم العائلة.
لذلك، هذا هو المكان الذي سنستخدم فيه هذا الملصق لتحديد الفئة هناك.
الآن, وبالإضافة إلى ذلك, Bootstrap يسمح لنا لاستخدام شبكة Bootstrap
لتحديد كيف سيتم وضع هذه النماذج من الإعلان لذلك سوف تطبيق col-md-2.
يمكنك أن ترى أنني قمت بتطبيق فئات العمود md-2 على هذا العنصر معين.
لذلك، سيشغل هذا العنصر في النموذج عمودين.
لذلك، داخل هذا العنصر النموذج،
قمنا بتقسيم كل صف إلى 12 عمودًا.
لذلك، لأننا قد استخدمنا بالفعل الصف الخاص بـ div،
بحيث يوفر لنا 12 عمودًا داخل div هناك.
بالإضافة إلى ذلك، لا بد لي من تطبيق تسمية نموذج العقيد على هذا.
لذلك، هذا هو ما يسمح لي بتحديد تسمية هنا.
لذلك، لهذا التسمية،
وسوف ملء التسمية كاسم أول ثم أغلق علامة التسمية.
لذا، تسمح لي علامة التسمية هذه بإعطاء تسمية،
والتي ستشغل عمودين يسار في هذا الصف بالذات.
على الجانب الأيمن، سأستخدم div آخر طبقته الطبقة كـ col-md-10.
لاحظ أن التسمية السابقة تستخدم col-md-2 هناك.
لذلك، لهذا ديف،
وأنا ذاهب لتطبيق كول-مد-10 هناك.
ثم داخل هذا div،
سأقوم بتطبيق عنصر إدخال،
وهو من نوع النص.
لذا، إذا كنت معتادًا على النماذج من HTML،
فسترى أننا نستخدم عناصر النموذج من HTML
لإنشاء هذا النموذج هنا بحيث يكون مربع الإدخال هنا من نوع النص.
الآن، هذا هو المكان الذي سنقوم بتطبيق فئات Bootstrap على هذا
وفئة Bootstrap المقابلة لهذا
هو عنصر تحكم النموذج ومن ثم يمكنني تحديد
معرف لهذا الاسم كاسم أول.
لذلك، لاحظ أن هذا المعرف يطابق هذا التصنيف لـ div.
لذا، الاسم الأول، ثم الاسم
كاسم أول، كما سأحدد
عنصرًا نائبًا لهذا، لذا دعني أستخدم السطر التالي هنا،
العنصر النائب، أنا متأكد من معرفتك بـ HTML،
فأنت تفهم كيف تتم هذه المواصفات هنا.
لذلك، مع هذا، أنشأنا الآن عنصر النموذج الأول لدينا في شكلنا.
دعونا نلقي نظرة سريعة على صفحة الويب.
الذهاب إلى صفحة الويب الخاصة بنا، يمكنك الآن أن ترى كيف أدت إضافة عناصر النموذج إلى إنشاء
مربع نص الإدخال هذا والتسمية على الجانب الأيسر.
الآن، أنا ذاهب لإضافة في صف آخر مع الاسم الأخير.
بالعودة إلى contactus.html الخاص بي،
اسمحوا لي ببساطة نسخ هذا الجزء ثم لصقه في div الثاني هنا،
ثم انتقل وتحرير ذلك.
من الاسم الأول أغير ذلك إلى الاسم الأخير.
تأكد من إكمال كافة التعديلات بشكل صحيح.
حتى واحد مفقود تحرير غير لائق،
سوف يسبب النموذج الخاص بك لا يعمل بشكل صحيح، لذلك تأكد من أن
جميع الأشياء الاسم الأول هنا يتم استبدالها باسمي الأخير.
لذلك، الاسم الأخير،
md-10 عنصر تحكم نموذج النص.
يجب أن يكون المعرف هنا اسم العائلة ويجب أن
يكون الاسم أيضًا اسم العائلة والعنصر النائب
مرة أخرى الاسم الأخير لذلك يجب أن يضيف هذا في صف ثاني باسم العائلة.
الذهاب إلى صفحة الويب الخاصة بك،
يمكنك أن ترى الآن النموذج
يحصل ببطء في الشكل بحيث يكون لديك الاسم الأول واسم العائلة.
الآن، يتيح إضافة عناصر الإدخال التالية.
سنرى كيف يعمل هذا كما نضيف في التعليمات البرمجية.
الانتقال الآن إلى الجزء التالي من التمرين،
هنا سوف نضيف حقلين آخرين في
نموذجنا هنا لإدخال رقم الهاتف ومعرف البريد الإلكتروني.
نظرًا لأن البنية الأساسية للشفرة مشابهة
للاسم الأول والاسم الأخير الذي قمت بإضافته بالفعل إلى النموذج،
لذلك سأقوم بنسخ الشفرة من الاسم الأول والاسم
الأخير ثم لصقها هنا ثم قم بتعديل الشفرة وفقًا لذلك.
لذلك، لقد لصق الرمز من الاسم الأول والاسم الأخير هنا.
دعونا المضي قدما والآن تعديل هذا لتحويله إلى الحقول
التي تمكن المستخدم من إدخال رقم الهاتف ومعرف البريد الإلكتروني.
لذلك، بالنسبة لرقم الهاتف،
لذلك لدينا هنا بالفعل الاسم الأول والاسم الأخير أعلاه.
لذا، الثالث، سأقوم بتغيير هذا إلى تسمية «telnum».
لذا، هذا من رقم الهاتف ثم الطبقات،
سأقوم بتطبيق فئة col-12 على هذا القول بأن هذا الملصق سيكون في
السحب الخاص به عندما يظهر النموذج على أحجام شاشة صغيرة جدًا إلى صغيرة جدًا.
ومن ثم، بالنسبة لحجم الشاشة المتوسط إلى الأعلى،
سيتم عرض هذا في عمودين
من هذا الصف بالذات هنا بحيث يكون التغيير الذي سنقوم به هناك.
ثم أيضا، التسمية نفسها،
اسمحوا لي تغيير ذلك للاتصال رقم الهاتف، الاتصال تل.
الآن، رقم الهاتف نفسه،
سوف ندع المستخدم يدخله كجزأين؛ واحد،
وهو رمز المنطقة والثاني،
والذي سيكون رقم الهاتف الفعلي.
لذا، سآخذ هذا الجزء من الشفرة،
والذي كان حقل الإدخال الذي كان لدينا
للاسم الأول ومن ثم إنشاء واحد آخر أسفل هنا،
والذي سأستخدمه لرقم الهاتف نفسه.
والآن سنقوم بتحويل هذا أول واحد إلى حقل لإدخال رمز المنطقة.
يمكنك أيضًا استخدامه على سبيل المثال،
لرمز البلد إذا كان هذا ما ترغب في وضعه في النموذج.
لذلك، بالنسبة لرمز المنطقة نفسه،
سأقوم بالتقدم بطلب للحصول على div،
والطبقات = «col-5 col-md-3 هنا».
لذلك، لاحظ أنه بالنسبة للشاشة المتوسطة،
لدينا عمودين تحتلهما التسمية،
وثلاثة أعمدة يشغلها رمز المنطقة نفسه
والأعمدة السبعة المتبقية سأعطيها إلى حقل النص هنا.
لذلك، وبالمثل، لرمز المنطقة أقول العقيد خمسة.
لذا، بالنسبة للشاشات الصغيرة جدًا إلى الصغيرة، سيشغل هذا
خمسة أعمدة ثم بالنسبة للأعمدة السبعة المتبقية،
سنترك رقم الهاتف يغذي نفسه في.
لذلك، اسمحوا لي أن تغيير واحد المقبل إلى كول-7 و كول-مد-7 هنا.
الآن، هذا الحقل سوف أغير هذا إلى الهاتف،
نوع الإدخال الهاتف لرقم الهاتف والطبقة هي التحكم
في النموذج، والمعرف هو رمز المنطقة والاسم هو رمز المنطقة ثم العنصر النائب،
وسوف أغير هذا إلى رمز المنطقة.
والجزء التالي،
وسوف نقوم بتغيير هذا أيضا نوع الهاتف والمعرف هو telnum،
والاسم هو telnum والعنصر النائب، في
حد ذاته، سيكون رقم الهاتف.
لذا، سيشكل هذا حقل رقم الهاتف،
والذي سيتم إدخاله كجزأين؛
رمز المنطقة ورقم الهاتف.
لذلك، نحن نستخدم، مرة أخرى،
فئات العمود من أجل هيكلة كيفية
عرض جزأين من حقل الإدخال في النموذج هناك.
الآن آخر واحد، بطبيعة الحال،
سيكون هذا لمعرف البريد الإلكتروني حتى التسمية،
وأنا تحويل ذلك إلى معرف البريد الإلكتروني ومن ثم التسمية نفسها
هي البريد الإلكتروني ونوع الإدخال هو البريد الإلكتروني.
الآن، نقوم بتغيير النوع إلى البريد الإلكتروني،
وهو مسموح به في HTML بحيث في وقت لاحق إذا كنا بحاجة إلى القيام بالتحقق من صحة النموذج،
فإننا نعلم أن هذا الحقل يجب أن
يحتوي فقط على نوع البريد الإلكتروني من الإدخال هناك، والمعرف
نفسه، ومعرف البريد الإلكتروني واسم البريد الإلكتروني والعنصر النائب.
البريد الإلكتروني. هذا كل شيء
دعونا حفظ التغييرات والذهاب ونلقي نظرة على النموذج المحدث.
الذهاب إلى النموذج في المتصفح،
ترى الآن صفين إضافيين إضافيين في نموذجنا.
يتم إضافة الاسم الأول واسم العائلة في الجزء السابق من التمرين.
لذلك، هنا، لدينا رقم هاتف الاتصال،
الذي ينقسم إلى رمز المنطقة ورقم الهاتف.
لاحظ كيف استخدمنا فئات الأعمدة لوضع هذين الاثنين في
النموذج نفسه ثم حقل البريد الإلكتروني هنا.
دعونا نلقي نظرة على نفس الشيء على حجم شاشة صغيرة إضافية.
لذلك، عندما تذهب إلى حجم شاشة صغيرة إضافية،
ستلاحظ كيف يتم وضع النموذج نفسه بها.
سترى أن التسمية في الأعلى ثم الحقل نفسه في الأسفل.
لذا الاسم الأول، الاسم الأخير.
لاحظ كيف
يتم وضع حقول إدخال رقم هاتف جهة الاتصال باستخدام فئات الأعمدة،
وبالتالي فإن رمز المنطقة هنا،
ورقم الهاتف،
ثم معرف البريد الإلكتروني هنا.
الآن، سنستمر في التمرين
الاستمرار في الخطوة التالية،
وسوف نضيف في مربع الاختيار وبعد ذلك سوف نضيف في اختيار اثنين أو أربعة.
لإضافة مربع اختيار،
دعنا فقط نسخ مجموعة النماذج هذه هنا حتى نضيفها كصف آخر هنا،
ثم نضيف في div مجموعة النماذج هنا،
ثم نغلق div هنا.
ثم داخل هذا الصف مجموعة النموذج،
لذلك هذا يعطينا صف واحد آخر في النموذج.
حتى داخل هذا الصف مجموعة النموذج،
اسمحوا لي أن أضيف في أولا مربع الاختيار.
لذلك، للقيام بذلك، سنضيف في div مع class = «col-md-6"
لذلك سترى أن هذا سيشغل
ستة أعمدة في حجم الشاشة المتوسطة إلى الكبيرة،
ثم إزاحة md-2، لذلك هذا سوف يقابله إلى
اليمين بواسطة عمودين ثم يعرض مربع الاختيار هناك.
الآن، في الداخل هنا، لإضافة مربع اختيار،
سنقول div مع class = «form-check»
وداخل فئة الاختيار هذه سنضيف في نوع الإدخال = «مربع الاختيار»
و class = «form-check input» ثم دعني أذهب إلى السطر التالي ثم
أقول name = «الموافقة» و
id = «الموافقة» والقيمة عبارة عن سلسلة فارغة هناك.
وإلى مربع الاختيار هذا،
دعونا إضافة تسمية.
لذلك، لإضافة تسمية،
سنذهب وإضافة في
فئة التسمية = «form-check label» ثم هذه التسمية
هي لمربع الاختيار هذا الذي أضفناه للتو.
لذلك، هذا هو السبب في أننا سوف نقول ل = «الموافقة» لذلك لاحظ أنه بالنسبة لمربع الاختيار،
كنا قد أعطينا الاسم والمعرف كما الموافقة لذلك هذا هو السبب هنا،
ونحن سوف حفظ للتسمية للموافقة.
ثم داخل هذا الملصق،
سنقوم بتحديد المحتوى على أنه «هل يمكننا الاتصال بك؟»
ثم حفظ التغييرات ودعونا نذهب ونلقي نظرة على شكلنا.
الذهاب إلى صفحة الويب،
يمكنك الآن أن ترى أننا قد أضفنا في مربع اختيار جنبا إلى جنب مع تسمية هنا ولاحظ
أن هذا التسمية هو بخط غامق بسبب استخدام علامة «قوية» هناك،
ونحن فعلنا إزاحة MD-2.
لهذا السبب ندفع مربع الاختيار هذا على طول الطريق إلى هنا.
هذا ليس لديه تسمية هنا ولكن بدلا من ذلك يتم دفع هذا الحق هنا،
لذلك هذا هو السبب في استخدام إزاحة مد-2 هنا،
وهذا واحد يحتل مد-6 حتى ستة أعمدة هنا.
لم ننتهي من ذلك بعد
أنا ذاهب لإضافة في الجزء التالي هنا،
وهو مربع اختيار هناك.
لذلك سوف أطبق ديف واحد أكثر هنا مع
فئة = «كول-مد-3 إزاحة مد-1" هنا.
وداخل هذا div،
سأقوم بتحديد تحديد.
لذا، مرة أخرى، من معرفتك بـ HTML،
تعرف ما يفعله التحديد لك.
الآن، سيطبق التحديد
عنصر تحكم نموذج الفئات بحيث تكون فئة Bootstrap التي أقوم بتطبيقها على التحديد هنا،
ثم أغلق التحديد.
وداخل هنا، أحتاج إلى إعطاء خيارات للتحديد.
لذلك، أنا باستخدام اختيار بسيط هنا،
وبالتالي فإن أول واحد هو خيار
للهاتف أو البريد الإلكتروني وإغلاق الخيار.
لذلك، هذا يخلق عنصر تحديد في النموذج الخاص بي،
الذي يحتوي على خيارين؛
الهاتف والبريد الإلكتروني، لذلك،
دعونا حفظ التغييرات.
إلقاء نظرة على صفحة الويب الخاصة بنا،
يمكنك الآن أن ترى كيف يتم الآن إنشاء مربع تحديد الهاتف والبريد الإلكتروني هنا حتى
يسمح لي هذا بتحديد أي واحد للقيام به وبعد ذلك يمكنك أيضا التحقق من مربع الاختيار مثل هذا.
لذلك، هذا ينتهي الصف التالي.
دعونا نضيف في صف واحد آخر،
والتي سوف تسمح للمستخدم لكتابة فعلا في ملاحظاتهم.
لذلك، سأستخدم منطقة نص لتنسيق ذلك.
بالنسبة للمرحلة التالية، سأستخدم منطقة نص.
لذا، ما سأفعله هو أنني سأصعد ونسخ جزء البريد الإلكتروني هذا منه.
أنا كسول جدا للحفاظ على الكتابة في كل شيء في كل وقت.
لذلك، أنا أميل إلى القيام بالقص واللصق حيثما كان ذلك ممكنا، ولكن لهذا واحد،
يجب أن يكون التسمية ردود الفعل وتسمية نموذج العمود،
ثم النص الفعلي هو، «ملاحظاتك هنا».
إذن هذا هو الملصق
وبعد ذلك، هنا، الثانية،
أنا ذاهب إلى تنسيق هذا واحد.
بدلاً من نوع الإدخال،
سأقوم بتغيير ذلك إلى منطقة نص،
ثم لا أحتاج إلى النوع هناك.
منطقة النص، لا يزال الفصل عنصر تحكم النموذج والمعرف هو ردود الفعل.
الاسم هو ردود الفعل والعنصر النائب غير مطلوب
هنا وبدلا من ذلك تغييره إلى عدد الصفوف التي
أريد أن أعطي من ردود الفعل لمنطقة النص؟
لذلك سأقول 12 صفًا ثم أغلق النص.
لذلك لاحظ كيف قمت بتضمين textarea في النموذج الخاص بي.
احفظ التغييرات.
ألقِ نظرة الذهاب إلى صفحة الويب الخاصة بي،
والآن ترى النموذج الخاص بي يأخذ شكله الكامل هنا.
لديك الاسم الأول، اسم العائلة،
الهاتف، البريد الإلكتروني هناك، ثم التعليقات.
مساحة النص من 12 صفًا.
الآن، سوف تحتاج إلى زر الذي يجب على المستخدم النقر عليه لإرسال ملاحظاتهم.
لذلك، يتيح إضافة زر إرسال إلى هذا النموذج.
بالعودة إلى النموذج مرة أخرى،
قم بإنشاء صف واحد آخر
هنا باستخدام div هنا مع صف مجموعة النموذج
هنا، وداخل هنا سأقوم بإضافة زر هنا.
لذلك، أود أن أقول، div
class = «offset-md-2" لأنني أريد أن
يتم وضع الزر الخاص بي أسفل كل تلك الحقول التي
لدي هنا بحيث يتم استخدام العمودين الأيسر للتسمية.
وبالتالي فإن زر الإرسال لا يحتاج إلى تسمية لذلك أنا مجرد الذهاب لدفعه إلى
اليمين هنا وبعد ذلك أود أن
أقول «كول-مد-10" لذلك هذا من شأنه أن تحتل الأعمدة العشرة المتبقية هناك.
ثم داخل تلك div،
سأقوم بإضافة زر هناك.
لذلك، عند إضافة زر إلى النموذج الخاص بك،
استخدم علامة الزر هنا مع إرسال نوع.
لذا، هذا هو زر الإرسال للنموذج الخاص بك هناك والطبقة.
تذكر الطبقات زر، زر الأساسي،
لذلك هذا من شأنه أن يخلق زر أزرق داكن في النموذج الخاص بك ومن
ثم إغلاق زر هناك، وبعد ذلك أنا ذاهب للذهاب ببساطة داخل وداخل الزر،
وسوف أعطي اسم باسم «إرسال ردود الفعل» ومن ثم حفظ التغييرات.
الآن، شكلنا مكتمل.
لذلك، دعونا نلقي نظرة على النسخة النهائية من نموذجنا.
الذهاب إلى صفحة الويب الخاصة بنا،
يمكنك الآن رؤية النموذج المكتمل.
كل هذه الحقول رأيناها بالفعل،
الزر في الجزء السفلي مع عبارة «إرسال
ردود الفعل» والزر الأزرق الداكن اللون بسبب استخدام زر «الأساسي».
لذلك، هذا يكمل النموذج الذي أردنا إنشاءه في صفحة الويب الخاصة بنا.
مع هذا، نكمل هذا التمرين،
حيث رأينا كيف يمكننا بناء نموذج وإدراجه في صفحة الويب الخاصة بنا.
سوف تعمل مع النماذج في بعض
التدريبات اللاحقة بما في ذلك مهمتك الثانية.
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع نماذج الرسالة.