عناصر نموذج التصميم (حدد، خانة الاختيار، الراديو، الخ)؟

Question

يمكن أن يكون تصميم عناصر النموذج باستخدام CSS مشكلة نظرًا لأن كل متصفح يعرض العلامة بطريقة مختلفة (تمامًا كما هو الحال عند عرض مربع اختيار Safari).

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

انظر هذه الصفحات:
جلد خانة الاختيار
حدد السلخ
جلد الراديو

لقد سمعت أن بعض أطر عمل JS مثل EXTJS أو MooTools يمكنها القيام بذلك، لكنني لا أريد حل إطار عمل واسع النطاق، فقط JS مستقل ويمكننا تعديل المظهر كما نحب، من فضلك لا يوجد حل JQuery، لأنني لا أريد ذلك. لا تستخدمه.

هل هناك أي فكرة للقيام بذلك دون استخدام إطار محدد؟

Answer 1

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

• ولعل أشهرها هو بوتستراب إطار CSS:
  https://getbootstrap.com/docs/4.0/components/forms

• https://www.psd2html.com/js-custom-forms (البرنامج المساعد مسج)

• https://purecss.io/forms

• https://github.com/select2/select2

• https://github.com/harvesthq/chosen

• خانات الاختيار/أجهزة الراديو:
  

  • https://codepen.io/vsync/pen/aBOOZB
  • https://codepen.io/vsync/pen/wKkuz
  • https://codepen.io/manabox/pen/raQmpL

يمكنك اليوم العثور على العديد من أنواع تصميم عناصر النموذج Codepen.com

---

الإجابة القديمة (من 16 مايو 09):

نعم، فمن السهل جدا.

يمكنك استخدام Niceforms، وهو برنامج نصي مستقل
لصنع أشكال جميلة المظهر ، يمكنك التعديل ثم يمكنك التعديل
صور الرسومات / CSS كأمنى.

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

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

Answer 2

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

إذا كنت لا ترغب في استخدام إطار عمل، فالأمر يتعلق بشكل أساسي بـ DIY.

ومع ذلك، فإن المفهوم برمته لديه بعض المشاكل.

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

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