HTML5 New Input Types

يقدم HTML5 العديد من أنواع <input> الجديدة، لتحسين تجربة المستخدم ولجعل النماذج أكثر تفاعلية.

أنواع الإدخالات الجديدة فى HTML5

Input Type email

يسمح نوع الإدخال email للمستخدم بإدخال قيمة بريد إلكتروني فقط.

يستخدم هذا النوع لحقول الإدخال التي يجب أن تحتوي على عنوان بريد إلكتروني، إذا حاولت إرسال نص عادى، فإنه يفرض إدخال عنوان البريد الإلكتروني فقط بتنسيق email@example.com:

<input type="email" name="mymail">

Input Type URL

يمكن استخدام نوع إدخال url لإدخال عناوين الويب.

يستخدم هذا النوع لحقول الإدخال التي يجب أن تحتوي على عنوان URL، إذا حاولت إرسال نص عادى، فإنه يفرض عليك إدخال عنوان URL فقط إما بتنسيق http://www.example.com أو بتنسيق http://example.com:

<input type="url" name="myurl">

يمكنك استخدام السمة Multiple لإدخال أكثر من عنوان URL:

<input type="url" name="myurl" multiple>

Input Type Search

يمكن استخدام نوع الإدخال search لإنشاء حقول إدخال البحث:

<input type="search" name="mysearch">

Input Type Range

يمكن استخدام نوع الإدخال range لإدخال قيمة عددية ضمن نطاق محدد، يعمل بشكل مشابه جدًا لإدخال الأرقام ، لكنه يوفر تحكمًا أبسط لإدخال رقم:

<input type="range" name="myrange">

Input Type Time

يمكن استخدام نوع الإدخال time لإدخال الوقت (الساعات والدقائق):

<input type="time" name="mytime">

Input Type Date

يسمح نوع الإدخال date للمستخدم بتحديد تاريخ من التقويم المنسدل:

<input type="date" name="mydate" value="2020-06-20">

Input Type Datetime-local

يسمح نوع الإدخال datetime-local للمستخدم بتحديد التاريخ والوقت المحليين ، بما في ذلك السنة والشهر واليوم بالإضافة إلى الوقت بالساعات والدقائق:

<input type="datetime-local" name="mydatetime">

Input Type Week

يسمح نوع الإدخال week للمستخدم بتحديد أسبوع وسنة من التقويم المنسدل:

<input type="week" name="myweek">

Input Type Month

يسمح نوع الإدخال month للمستخدم بتحديد شهر وسنة من التقويم المنسدل.

القيمة عبارة عن سلسلة بالتنسيق “YYYY-MM” ، حيث YYYY هي السنة المكونة من أربعة أرقام و MM هي رقم الشهر:

<input type="month" name="mymonth">

Input Type Tel

يمكن استخدام نوع الإدخال tel لإدخال رقم الهاتف.

فى الأصل لا تدعم المتصفحات التحقق من صحة الإدخال عبر الهاتف. ومع ذلك ، يمكنك استخدام سمة placeholder لمساعدة المستخدمين في إدخال التنسيق الصحيح لرقم هاتف ، أو تحديد تعبير عادي للتحقق من صحة إدخال المستخدم باستخدام سمة الـ pattern:

<input type="tel" name="myphone" placeholder="xx-xxxx-xxxx">

Input Type Number

يمكن استخدام نوع الإدخال number لإدخال قيمة عددية:

<input type="number" name="mynumber">

يمكنك أيضًا تقييد المستخدم لإدخال القيم المقبولة فقط باستخدام السمات الإضافية min و max و step:

<input type="number" min="1" max="11" step="1" name="mynumber">

Input Type Color

يسمح نوع الإدخال color للمستخدم بتحديد لون من منتقي الألوان وإرجاع قيمة اللون بتنسيق سداسي عشري (#rrggbb):

<input type="color" value="#f00" name="mycolor">