عندما ننشئ صفحات ويب ، يصبح من الضروري أحيانا إخفاء العناصر حتى لا يتم عرضها للمستخدم. واحدة من أكثر الحالات شيوعا هو إخفاء المدخلات. قد تكون الأسباب مختلفة: من رغبة بسيطة لإخفاء بعض البيانات من أعين المتطفلين إلى الظروف المنطقية المعقدة التي يجب أن تكون مخفية المدخلات.
في هذه المقالة ، سننظر في عدة طرق لإخفاء إدخال على صفحة ويب. هذه الأساليب هي مناسبة لحالات مختلفة ، ولكل واحد منهم مزاياه وعيوبه.
واحدة من أسهل الطرق هي استخدام عرض خاصية كس مع قيمة لا شيء. بسبب هذه الخاصية ، يختفي العنصر تماما من الصفحة ، بينما لا يشغل حجمه وموقعه مساحة على الصفحة. إليك كيفية القيام بذلك:
- }
- إخفاء إدخال على صفحة ويب: لماذا وكيف نفعل ذلك
- طرق لإخفاء إدخال باستخدام خاصية العرض
- كيفية إخفاء إدخال باستخدام السمة المخفية
- إخفاء إدخال باستخدام فئة كس وخاصية الرؤية
- أمثلة التعليمات البرمجية: كيفية إخفاء إدخال على صفحة ويب
- 1. عرض الملكية المغلق: لا شيء
2. رؤية الملكية المغلق: مخفي
3. حذف عنصر باستخدام جافا سكريبت
4. إغلاق المدخلات باستخدام مسج
سؤال وجواب
إخفاء إدخال على صفحة ويب: لماذا وكيف نفعل ذلك
على صفحات الويب ، يصبح من الضروري أحيانا إخفاء بعض العناصر عن المستخدمين. على سبيل المثال ، قد يكون هذا حقل إدخال معلومات يجب أن يكون متاحا للمستخدمين المصرح لهم فقط. من الضروري أيضا في بعض الأحيان إخفاء جزء من النموذج حتى يتم استيفاء شروط معينة أو ببساطة تحسين مظهر الصفحة. في هذه المقالة ، سنلقي نظرة على عدة طرق وأمثلة التعليمات البرمجية لإخفاء المدخلات على صفحة الويب.
1. استخدام خاصية عرض كس
واحدة من أسهل الطرق لإخفاء إدخال على صفحة ويب هو استخدام خاصية عرض كس مع قيمة لا شيء. تخفي هذه الخاصية العنصر ، مما يجعله غير مرئي ولا يشغل مساحة على الصفحة.
2. باستخدام فئة كس
هناك طريقة أخرى لإخفاء إدخال على صفحة ويب وهي إضافة فئة إلى عنصر وتطبيق نمط العرض:لا شيء على تلك الفئة. هذا يسمح لك بالتحكم في رؤية عنصر من خلال أنماط كس.
3. باستخدام السمة المخفية
قدم هتمل5 السمة المخفية ، والذي يسمح لك لإخفاء عنصر على صفحة ويب. عند استخدام هذه السمة ، يصبح العنصر غير مرئي.
4. عنصر جافا سكريبت يختبئ
للحالات الأكثر تعقيدا حيث تحتاج إلى التحكم في رؤية عنصر ديناميكيا ، يمكنك استخدام جافا سكريبت. باستخدام جافا سكريبت ، يمكنك إخفاء إدخال عن طريق تغيير نمط العرض أو إضافة / إزالة فئة عنصر.
5. باستخدام الجدول
طريقة أخرى لإخفاء إدخال على صفحة ويب هو وضعه في جدول وإخفاء صف أو خلية من الجدول باستخدام أنماط كس مثل العرض: لا شيء أو الرؤية: مخفي.
- في هذه المقالة ، درسنا عدة طرق لإخفاء إدخال على صفحة ويب. يعتمد اختيار الطريقة على سياق ومتطلبات المشروع. اختر الأنسب لموقفك وقم بتطبيقه على صفحة الويب الخاصة بك.
- طرق لإخفاء إدخال باستخدام خاصية العرض
إذا كنت بحاجة إلى إخفاء إدخال على صفحة ويب ، فإن إحدى أسهل الطرق هي استخدام خاصية العرض. تتيح لك هذه الخاصية التحكم في عرض عنصر على الصفحة.
لإخفاء الإدخال باستخدام خاصية العرض ، يمكنك استخدام الكود التالي:
قم بتطبيق فئة أو معرف على الإدخال بحيث يمكنك تحديده بسهولة باستخدام كس.
في ملف كس ، أضف القاعدة التالية:
.مخفي-الإدخال {
عرض: لا شيء;
}
هنا.مخفي-الإدخال هو الفئة التي تم تعيين المدخلات التي تحتاج إلى أن تكون مخفية. عرض: لا شيء; - هذه قاعدة كس تخفي عنصرا.
بعد تطبيق هذه القاعدة على الإدخال ، ستختفي تماما من الصفحة ولن يتم عرضها للمستخدمين. في الوقت نفسه ، سيبقى في شفرة هتمل للصفحة وسيكون متاحا للاستخدام في جافا سكريبت.
باستخدام خاصية العرض ، يمكنك أيضا تغيير عرض عنصر على الصفحة ، مما يجعله غير مرئي ، مع الاحتفاظ بمكانه في التخطيط. على سبيل المثال ، يمكنك استخدام قاعدة كس التالية:
.مخفي-الإدخال {
الرؤية: مخفي;
}
هنا ، يتم تعيين خاصية الرؤية على مخفي ، مما يجعل العنصر غير مرئي ، ولكنه يحتفظ بحجمه وموضعه على الصفحة.
تستخدم كلتا الطريقتين خاصية العرض لإخفاء الإدخال على صفحة الويب. يعتمد الاختيار بينهما على متطلبات التصميم ووظائف صفحة الويب الخاصة بك.
كيفية إخفاء إدخال باستخدام السمة المخفية
تتيح لك السمة المخفية إخفاء عنصر على صفحة ويب ، بما في ذلك المدخلات. ما عليك سوى إضافة السمة المخفية إلى علامة الإدخال لإخفائها عن المستخدمين.
مثال على الكود:
في المثال أعلاه ، سيتم إخفاء إدخال يسمى "مثال" على صفحة الويب. لن يتمكن المستخدمون من رؤية هذا الإدخال والتفاعل معه.
لا يزال الإدخال المخفي موجودا في دوم (نموذج كائن المستند) ويمكن استخدامه في جافا سكريبت أو إرساله باستخدام نموذج. انها فقط لن تظهر على صفحة الويب.
يرجى ملاحظة أن الإدخال المخفي سيظل يؤخذ في الاعتبار عن طريق التحقق من صحة النموذج ويمكن إرساله إلى الخادم إذا تم تعيين قيمته.
إخفاء إدخال باستخدام فئة كس وخاصية الرؤية
هناك طريقة أخرى لإخفاء إدخال على صفحة ويب وهي استخدام فئة كس وخاصية الرؤية.
بادئ ذي بدء ، دعونا نضيف رمز هتمل الرئيسي للإدخال:
لإخفاء هذا الإدخال ، قم بإنشاء فئة كس جديدة وتطبيق خاصية الرؤية بالقيمة المخفية عليها:
ثم ، دعونا نطبق هذه الفئة على مدخلاتنا:
الآن سيتم إخفاء الإدخال على صفحة الويب ، لكنه لا يزال يحتل مكانا في بنية مستند هتمل.
إذا كنت بحاجة إلى إزالة الإدخال بالكامل من بنية الصفحة ، فيمكنك استخدام خاصية العرض مع القيمة بلا:
وبالتالي ، عند استخدام فئة كس وخصائص الرؤية أو العرض ، يمكنك بسهولة إخفاء الإدخال على صفحة الويب.
أمثلة التعليمات البرمجية: كيفية إخفاء إدخال على صفحة ويب
هناك عدة طرق لإخفاء إدخال على صفحة ويب. وهنا بعض منهم:
1. عرض الملكية المغلق: لا شيء
باستخدام عرض كس: لا شيء الملكية ، يمكنك إخفاء تماما المدخلات على صفحة ويب. نموذج التعليمات البرمجية:
2. رؤية الملكية المغلق: مخفي
هناك طريقة أخرى لإخفاء الإدخال وهي استخدام رؤية خاصية كس: مخفي. مثال على الكود:
3. حذف عنصر باستخدام جافا سكريبت