دليل أساسي لـ HTML5

API HTML5

وسائط HTML5

رسومات HTML5

أنواع إدخال HTML5

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

أنواع "Input" الجديدة في HTML5

يحتوي HTML5 على العديد من أنواع المدخلات الجديدة للنماذج. توفر هذه الميزات الجديدة تحكمًا وتحققًا أفضل للمدخلات.

هذه الفصل تقدم شرحًا شاملاً لهذه الأنواع الجديدة من المدخلات:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

ملاحظة:ليس كل المتصفحات الشائعة يدعم أنواع "input" الجديدة، ولكن يمكنك استخدامها في جميع المتصفحات الشائعة. حتى لو لم يتم دعمها، يمكن عرضها كحقل نصي عادي.

نوع "Input": color

يستخدم نوع "color" في حقل "input" لاختيار الألوان، مثل ما يلي:

مثال على الإنترنت

اختر لونًا من مسبار اختيار اللون:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　اختر اللون الذي تفضله: <input type="color" name="favcolor"><br>
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع "Input": date

نوع "date" يسمح لك باختيار تاريخ من مسبار اختيار التاريخ.

مثال على الإنترنت

تحديد محكم الزمن:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　تاريخ الميلاد: <input type="date" name="bday">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع الإدخال: datetime

يُسمح لنوع "datetime" باختيار تاريخ (بوقت UTC).

مثال على الإنترنت

تحديد مقياس تاريخ ووقت (توقيت محلي):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　ميلاد (التاريخ والوقت): <input type="datetime" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع الإدخال: datetime-local

يُسمح لنوع "datetime-local" باختيار تاريخ ووقت (بدون توقيت المنطقة).

مثال على الإنترنت

تحديد تاريخ ووقت (بدون توقيت المنطقة):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　ميلاد (التاريخ والوقت): <input type="datetime-local" name="bdaytime">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع الإدخال: email

يُستخدم نوع "email" للوحدات التي يجب أن تحتوي على عنوان بريد إلكتروني.

مثال على الإنترنت

سيتم التحقق تلقائيًا من صحة قيمة حقل البريد الإلكتروني عند تقديم النموذج:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　البريد الإلكتروني: <input type="email" name="usremail">
　　<input　type="submit">
</form>
<p><b>ملاحظة:</b> لا يدعم متصفح Internet Explorer 9 وأحدث إصدارات IE نوع "email".</p>
</body>
</html>

اختبار لرؤية ‹/›

إشارة: يدعم متصفح Safari في iPhone نوع الإدخال "email" ويتناسب معه من خلال تغيير لوحة المفاتيح اللمس (إضافة خيارات @ و .com).

نوع الإدخال: month

يُسمح لنوع "month" باختيار شهر.

مثال على الإنترنت

تحديد الشهر والسنة (بدون توقيت المنطقة):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　ميلاد (الشهر والسنة): <input type="month" name="bdaymonth">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع الإدخال: number

يُستخدم نوع "number" للوحدات التي يجب أن تحتوي على قيمة عددية.

يمكنك أيضًا تعيين القيود المقبولة للعدد:

مثال على الإنترنت

تحديد مجال إدخال عددية (محدد):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　العدد (من 1 إلى 5): <input type="number" name="quantity" min="1" max="5">
　　<input　type="submit">
</form>
<p><b>ملاحظة:</b> لا يدعم متصفح Internet Explorer 9 وأحدث إصدارات IE نوع "number".</p>
</body>
</html>

اختبار لرؤية ‹/›

استخدم الصفات التالية لتعريف القيود على النوع الرقمي:

صفة	وصف
disabled	يُحدد أن حقل الإدخال معطل
max	يُحدد الحد الأقصى المسموح به
maxlength	يُحدد طول الحد الأقصى للوحدات المسموح بها لحقل الإدخال
min	يُحدد الحد الأدنى المسموح به
pattern	يُحدد النمط المستخدم للتحقق من قيمة حقل الإدخال
readonly	يُحدد أن قيمة حقل الإدخال غير قابلة للتعديل
required	تحديد أن القيمة في حقل الإدخال ضرورية
size	تحديد عدد الحروف المرئية في حقل الإدخال
step	تحديد الفجوة الرقمية المسموح بها للإدخال
value	تحديد القيمة الافتراضية لحقل الإدخال

نوع إدخال: range

يستخدم نوع range في الحقول التي يجب أن تحتوي على قيم عددية معينة.

يظهر نوع range كشريط تمرير.

مثال على الإنترنت

تعريف قيمة غير دقيقة جدًا للعدد (مثل التحكم في السلك):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php" method="get">
نقاط: <input type="range" name="points" min="1" max="10">
<input　type="submit">
</form>
<p><b>ملاحظة:</b> Internet Explorer 9 وكل إصداراته الأقدم لا يدعم type="range".</p>
</body>
</html>

اختبار لرؤية ‹/›

استخدم الخاصيات التالية لتعريف الحدود للنوع الرقمي:

max - تحديد القيمة الأعلى المسموح بها
min - تحديد القيمة الأدنى المسموح بها
step - تحديد الفجوة الرقمية المسموح بها
value - تحديد القيمة الافتراضية

نوع إدخال: search

يستخدم نوع search في مجالات البحث، مثل بحث الموقع أو Google.

مثال على الإنترنت

تعريف حقل البحث (مثل بحث موقع أو Google):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　ابحث في Google: <input type="search" name="googlesearch"><br>
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع إدخال: tel

مثال على الإنترنت

تعريف حقل إدخال رقم الهاتف:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　رقم الهاتف: <input type="tel" name="usrtel"><br>
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع إدخال: time

يسمح نوع time باختيار وقت.

مثال على الإنترنت

تعريف مدير الوقت القابل للإدخال (بدون منطقة زمنية):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　اختر الوقت: <input type="time" name="usr_time">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

نوع إدخال: url

نوع url يستخدم في الحقول التي يجب أن تحتوي على عنوان URL.

سيتم التحقق تلقائيًا من قيمة مجال URL عند تقديم النموذج.

مثال على الإنترنت

تعريف حقل إدخال URL:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　أضف صفحتك الرئيسية: <input type="url" name="homepage"><br>
　　<input　type="submit">
</form>
<p><b>ملاحظة:</b> Internet Explorer 9 وكل إصداراته الأقدم لا يدعم type="url".</p>
</body>
</html>

اختبار لرؤية ‹/›

إشارة: متصفح Safari في iPhone يدعم نوع إدخال URL ويعمل مع لوحة المفاتيح اللمسية لتكاملها (إضافة خيار .com).

نوع إدخال: week

نوع week يسمح لك باختيار الأسبوع والسنة.

مثال على الإنترنت

تحديد الأسبوع والسنة (بدون منطقة زمنية):

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل تعليمي (oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo-form.php">
　　اختر الأسبوع:　<input　type="week"　name="year_week">
　　<input　type="submit">
</form>
</body>
</html>

اختبار لرؤية ‹/›

علامة <input> في HTML5

العلامة	وصف
<input>	وصف مكون إدخال

عناصر النموذج في HTML5 صوت في HTML5