نموذج موبايل مسج
سوف مسج الجوال تلقائيا تلقائيا إضافة إلى نمط نماذج HTML، وجعلها تبدو أكثر جاذبية، وأكثر ودية لمسة.
هيكل مسج نموذج موبايل
مسج موبايل لاستخدام CSS لأسلوب عناصر النموذج HTML لجعلها أكثر جاذبية وأسهل للاستخدام.
في مسج موبايل، يمكنك استخدام ضوابط النموذج التالي:
- مربع إدخال النص
- مربع الإدخال البحث
- زر الراديو
- مربع
- اختر القائمة
- المتزلج
- الوجه التبديل تبديل
عند استخدام شكل مسج جوال، يجب أن نعرف:
- <النموذج> يجب أن يكون عنصر طريقة وسمة العمل
- يجب أن يكون كل عنصر النموذج فريدة من نوعها "المعرف" السمة. يجب أن يكون معرف فريد على كافة الصفحات في جميع أنحاء الموقع. هذا هو لأنه قدم آلية الملاحة مسج جوال صفحة واحدة بحيث وافر من صفحات مختلفة في نفس الوقت
- يجب أن يكون كل عنصر النموذج تسمية. علامة التبويب إعدادات خصائص لتتناسب مع هوية العنصر
أمثلة
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
محاولة »
لإخفاء التسمية، واستخدام فئة مخفية الوصول واجهة المستخدم. وكثيرا ما يستخدم هذا عندما تكون سمات العنصر كبصمة نائب:
أمثلة
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
محاولة »
نصيحة: يمكننا استخدام-BTN بيانات واضحة = "الحقيقية " سمة لإضافة زر لمسح محتويات مربع الإدخال (رمز X على يمين مربع الإدخال):
أمثلة
<إدخال نوع = "نص" اسم = "fname" معرف = "fname" بيانات واضحة BTN = "صحيح">
محاولة »
 | زر واضح في مربع الإدخال <إدخال> يتم استخدام عنصر، ولكن ليس في <textarea> من في. مربع بحث BTN بيانات واضحة القيمة الافتراضية هي "الحقيقية"، يمكنك استخدام-BTN بيانات واضحة = "كاذبة" لإزالة الرمز. |
|---|
مسج موبايل رمز نماذج
تشكيل رمز زر هو HTML القياسية <إدخال> العنصر (زر إعادة تعيين، تقدم). وسوف يجعل تلقائيا الأساليب، وتلقائيا التكيف مع الأجهزة النقالة لسطح المكتب:
أمثلة
<نوع الإدخال = "إعادة ضبط" القيمة = "زر إعادة ضبط">
<نوع الإدخال = "تقدم" قيمة = "إرسال زر">
محاولة »
إذا كنت بحاجة إلى إضافة أنماط إضافية في <إدخال> زر، يمكنك استخدام الجدول التالي بالبيانات، سمات *:
| ممتلكات | قيمة | وصف |
|---|---|---|
| ، زوايا البيانات | صحيح | كاذبة | يحدد الزوايا سواء على زر وتقريب |
| أيقونة البيانات | الدليل المرجعي أيقونة | رمز زر التعيين |
| ، iconpos البيانات | يسار | الحق | الأعلى | قاع | notext | تحديد موقع رمز |
| بيانات مضمنة | صحيح | كاذبة | تحدد ما إذا كان زر مضمنة |
| بيانات مصغرة | صحيح | كاذبة | تحديد ما إذا كان زر صغير |
| البيانات الظل | صحيح | كاذبة | يحدد ما إذا كان الزر لإضافة تأثيرات الظل |
زر لإضافة الرموز:
<نوع الإدخال = "إعادة ضبط" القيمة = "زر إعادة ضبط">
<نوع الإدخال = "تقدم" قيمة = "إرسال زر">
محاولة »
الحاويات الميدان
لجعل التسميات وعناصر النموذج تبدو أكثر مناسبة للعريضة، يرجى أو <مجموعة حقول> يتم استخدام عنصر المحيطة عنصر التسمية / شكل مع "، يحتوي على واجهة المستخدم حقل" الطبقة <div>:
أمثلة
<div class="ui-field-contain" >
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
محاولة »
| واجهة المستخدم للحقول تحتوي على فئات بناء على عرض الصفحة لإضافة أنماط للتسميات وضوابط النموذج. عندما عرض الصفحة أكبر من 480px، وسوف تضع تلقائيا تحكم تسمية وشكل على نفس الخط. عندما عرض الصفحة هو أقل من 480px، سيتم وضع علامة على عناصر النموذج الأعلى. |
|---|
نصيحة: لمنع مسج موبايل إضافة نمط العناصر القابلة للنقر عليها تلقائيا، استخدام دور البيانات = "لا شيء" السمة:
أمثلة
<input type="text" name="fname" id="fname" data-role="none" >
محاولة »
| مسج موبايل في تقديم النموذج مسج موبايل التعامل معها تلقائيا من قبل أجاكس تقديم النموذج، ومحاولات خادم التكامل للرد على DOM من التطبيق. |
|---|