النص
من اكثر الانواع استعمالا, الجميع يستخدمها في كل مكان, ولكن يجب ان تفكر, هل فعلا المستخدم يدخل نصا؟ اذا كان الجواب نعم فجيد, لكن اذا كان الجواب لا, جرب ان تجد نوعا اخر اكثر ملائمة.
<input type="text">

واحدة من اسهل وازهد واسرع والاكثر الطرق فعالية لتحسين جوده تجربة الهواتف في موقعك, هي اختيار النوع الصحيح من المخدلات, يوفر على المستخدم الكثير من الازعاج ويتطلب منك بعض الضفطات على لوحة المفاتيح
لن يقوم بتحويل تجربة التصفح الهاتف الفظيعة الى تجربة رائعة, لكن يحسن تجربة المستخدم , هناك عشرات من الانواع للمدخلات, اذا اكملت تصفح الموقع ستكتشف ما يجب وما لا يجب استخدامه في كل حالة.
من اكثر الانواع استعمالا, الجميع يستخدمها في كل مكان, ولكن يجب ان تفكر, هل فعلا المستخدم يدخل نصا؟ اذا كان الجواب نعم فجيد, لكن اذا كان الجواب لا, جرب ان تجد نوعا اخر اكثر ملائمة.
<input type="text">
عملية ادخال بريد الكتروني مؤملة, لوحات المفاتيح تضيف رمز @ و .com في اماكن قريبة, مما يسهل العملية.
<input type="email">
يوفر للمستخدم لوحة مفاتيح عددية, اذا اردت من المستخدم فقط ادخال ارقام, فبالتاكيد يجب استعماله, لا تستخدم Number لانه يحتوي على مجموعة من الازرار التي هي ليست ارقام.
<input type="tel">
هذا النوع مخادع ونتيجة لذلك يستخدم كثيرا في مواضع خاطئة, عندما تنظر الى نوع "الهاتف" تجده خيار متفوق على "الارقام", في الحقيقة انه ليس الخيار الافضل لادخال الارقام, يستخدم في الحالات التي تحتاج من المستخدم ادخال ارقام ورموز, وهي حالات نادرة جدا.
<input type="number">
نعم انت تفكر بشكل صحيح, هذا النوع يستخدم عندما تريد من المستخدم ان يدخل كلمه سر, لكن يجب عليك اضافة ميزة "اظهار واخفاء الكلمه" لانه من المزعج عدم معرفة ما تكتب.
<input type="password">
جميعنا نرى تقويم صغير تم استبداله بلوحة المفاتيح, بعض الناس يستخدمون النوع "نص" لادخال التواريخ, لا تفعل هذا, لان من الصعب التحقق من صحه الأدخال, فقط استخدم النو ع "تاريخ" والمتصفح سيقوم بكل شيء.
<input type="date">
ادخال التاريخ والتوقيت في تفس اللحظة صعب, لان المستخدم يجب ان ينزل اليوم كله مع تواقيته, فالافضل وضعها منفصلة.
<input type="datetime">
قائمة من الاشهر يمكن للمستخدم الاختيار بينها بسهولة.
<input type="month">
لوحة مفاتيح عادية لكن تغير لزر من "اذهب" الى "البحث", شيء صغير لكن يؤخذ في الحسبان
<input type="search">