أنواع إدخال HTML

هذه الفقرة توضح أنواع إدخال علامة <input>.

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

<input type="text"> تحديدإدخال نصيحقل الإدخال المباشر:

مثال

<form>
 الاسم:<br>
<input type="text" name="firstname">
<br>
 اسم العائلة:<br>
<input type="text" name="lastname">
</form>

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

الاسم:


اسم العائلة:

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

<input type="password"> تعريفحقل كلمة المرور:

مثال

<form>
 اسم المستخدم:<br>
<input type="text" name="username">
<br>
 كلمة المرور المستخدمة:<br>
<input type="password" name="psw">
</form>

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

اسم المستخدم:


كلمة المرور المستخدمة:

ملاحظة:الرموز في حقل كلمة المرور سيتم تعاملها كتمية (سيتم عرضها كنجمة أو دائرة مملوءة).

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

<input type="submit"> تعريفإرسالبيانات النموذج إلىبرنامج معالجة النماذجالنوع: submit

برنامج معالجة النماذج (form-handler) هو صفحة خادمة تحتوي على سكريبتات معالجة البيانات المدخلة.

يحدد خاصية action في النموذج معالج النموذج (form-handler):

مثال

<form action="action_page.php">
الاسم:<br>
<input type="text" name="firstname" value="Mickey">
<br>
اسم العائلة:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

الاسم:


اسم العائلة:


إذا كنت قد تتجاهلت خاصية القيمة المحددة للزر الإرسال، فإن الزر سيحصل على النص الافتراضي التالي:

مثال

<form action="action_page.php">
الاسم:<br>
<input type="text" name="firstname" value="Mickey">
<br>
اسم العائلة:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

تجربة شخصية

نوع الدخول: الإذاعة

<input type="radio"> تعريف زر الإذاعة.

تسمح الأزرار الإذاعية للمستخدم باختيار واحدة فقط من عدد محدود من الخيارات:

مثال

<form>
<input type="radio" name="sex" value="male" checked>الجنس
<br>
<input type="radio" name="sex" value="female">الجنسية
</form>

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

الجنس

الجنسية

نوع الدخول: مربع المربعات

<input type="checkbox"> تعريف مربع المربعات.

تسمح المربعات المربعة للمستخدم باختيار عدد صغير من الخيارات بين الصفر وبعضها البعض.

مثال

<form>
<input type="checkbox" name="vehicle" value="Bike">لدي دراجة نارية
<br>
<input type="checkbox" name="vehicle" value="Car">لدي سيارة 
</form>

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

لدي دراجة نارية

لدي سيارة

نوع الدخول: الزر

<input type="button"> تعريفالزر。

مثال

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

تجربة شخصية

يبدو الكود HTML أعلاه هكذا في المتصفح:

نوع المدخل HTML5

أضاف HTML5 أنواع جديدة للمدخل:

  • لون
  • تاريخ
  • تاريخ-وقت
  • تاريخ-وقت محلي
  • بريد إلكتروني
  • شهر
  • رقم
  • مجال
  • بحث
  • رقم هاتف
  • وقت
  • رابط
  • اسبوع

ملاحظة:المدخل القديم للويب لا يدعم هذا النوع من المدخل، ويتم معاملته كنوع نصي.

نوع المدخل: number

<input type="number"> للأدخال الحقول التي يجب أن تحتوي على قيمة رقمية.

يمكنك وضع قيود على الأرقام.

بناءً على دعم المتصفح، يمكن تطبيق القيود على حقل المدخل.

مثال

<form>
  كمية (بين 1 و 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

تجربة شخصية

قيود المدخل

هنا قائمة ببعض القيود الشائعة (بعضها تم إضافته في HTML5):

الخصائص الوصف
غير مفعّل تحديد أن المدخل يجب أن يكون غير مفعّل.
أقصى تحديد القيمة الأقصى للمدخل.
أقصى طول تحديد عدد الحروف الأقصى للمدخل.
أدنى تحديد القيمة الأدنى للمدخل.
نمط تحديد النمط النموذجي للتحقق من قيمة المدخل.
قراءة فقط تحديد أن المدخل قارئ فقط (لا يمكن تعديله).
مطلوب تحديد أن المدخل ضروري (يجب ملئه).
حجم تحديد عرض المدخل (بالمحرف).
خطوة تحديد الفجوة الرقمية المسموح بها للمدخل.
قيمة تحديد القيمة الافتراضية للمدخل.

سوف تتعلم المزيد عن قيود المدخل في الفصل القادم.

مثال

<form>
  كمية:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

تجربة شخصية

نوع المدخل: date

<input type="date"> للأدخال الحقول التي يجب أن تحتوي على تاريخ.

بناءً على دعم المتصفح، سيظهر مكون التحكم في التاريخ في حقل الإدخال.

مثال

<form>
  ميلاد:
  <input type="date" name="bday">
</form>

تجربة شخصية

يمكنك إضافة قيود إلى المدخل:

مثال

<form>
  ادخل تاريخ قبل 01-01-1980:
  <input type="date" name="bday" max="1979-12-31"><br>
  ادخل تاريخ بعد 2000-01-01:
  ادخل تاريخ بعد 2000-01-01:<br>
</form>

تجربة شخصية

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

<input type="color"> للإدخالات التي يجب أن تحتوي على لون.

بناءً على دعم المتصفح، سيظهر مكون التحكم في اللون في حقل الإدخال.

مثال

<form>
  اختر لون المفضل لديك:
  <input type="color" name="favcolor">
</form>

تجربة شخصية

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

<input type="range"> للإدخالات التي يجب أن تحتوي على قيم تتضمن نطاقًا معينًا.

بناءً على دعم المتصفح، يمكن عرض حقل الإدخال كعنصر التحكم في السحب.

مثال

<form>
  <input type="range" name="points" min="0" max="10">
</form>

تجربة شخصية

يمكنك استخدام هذه الخصائص لتعريف القيود: min،max،step،value.

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

<input type="month"> يُسمح للمستخدم باختيار الشهر والسنة.

بناءً على دعم المتصفح، سيظهر مكون التحكم في التاريخ في حقل الإدخال.

مثال

<form>
  تاريخ الميلاد (الشهر والسنة):
  <input type="month" name="bdaymonth">
</form>

تجربة شخصية

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

<input type="week"> يُسمح للمستخدم باختيار الأسبوع والسنة.

بناءً على دعم المتصفح، سيظهر مكون التحكم في التاريخ في حقل الإدخال.

مثال

<form>
  اختر أسبوعًا:
  <input type="week" name="week_year">
</form>

تجربة شخصية

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

<input type="time"> يُسمح للمستخدم باختيار الوقت (بدون منطقة زمنية).

بناءً على دعم المتصفح، سيظهر مكون التحكم في الوقت في حقل الإدخال.

مثال

<form>
  اختر وقتًا:
  <input type="time" name="usr_time">
</form>

تجربة شخصية

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

<input type="datetime"> يُسمح للمستخدم باختيار التاريخ والوقت (بمنطقة زمنية).

بناءً على دعم المتصفح، سيظهر مكون التحكم في التاريخ في حقل الإدخال.

مثال

<form>
  تاريخ الميلاد (التاريخ والوقت):
  <input type="datetime" name="bdaytime">
</form>

تجربة شخصية

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

<input type="datetime-local"> يُسمح للمستخدم باختيار التاريخ والوقت (بدون منطقة زمنية).

بناءً على دعم المتصفح، سيظهر مكون التحكم في التاريخ في حقل الإدخال.

مثال

<form>
  تاريخ الميلاد (التاريخ والوقت):
  <input type="datetime-local" name="bdaytime">
</form>

تجربة شخصية

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

<input type="email"> للمساحة الإدخال التي يجب أن تحتوي على عنوان البريد الإلكتروني.

يتم التحقق تلقائيًا من عنوان البريد الإلكتروني عند تقديم الطلب بناءً على دعم المتصفح.

بعض الهواتف الذكية تتعرف على نوع البريد الإلكتروني وتضيف ".com" إلى لوحة المفاتيح لمطابقة إدخال البريد الإلكتروني.

مثال

<form>
  البريد الإلكتروني:
  <input type="email" name="email">
</form>

تجربة شخصية

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

<input type="search"> للمساحة البحث (تظهر مساحة البحث مثل مساحة النص العادي).

مثال

<form>
  البحث في Google:
  <input type="search" name="googlesearch">
</form>

تجربة شخصية

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

<input type="tel"> للمساحة الإدخال التي يجب أن تحتوي على رقم الهاتف.

يتم دعم نوع tel حاليًا فقط من قبل Safari 8.

مثال

<form>
  رقم الهاتف:
  <input type="tel" name="usrtel">
</form>

تجربة شخصية

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

<input type="url"> للمساحة الإدخال التي يجب أن تحتوي على عنوان URL.

يتم التحقق تلقائيًا من حقل URL عند تقديم الطلب بناءً على دعم المتصفح.

بعض الهواتف الذكية تتعرف على نوع URL وتضيف ".com" إلى لوحة المفاتيح لمطابقة إدخال URL.

مثال

<form>
  أضف موقعك الرئيسي:
  <input type="url" name="homepage">
</form>

تجربة شخصية