أنواع إدخال 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) هو صفحة خادمة تحتوي على سكريبتات لمعالجة بيانات الإدخال.

يحدد مبدأ العمل (form-handler) الخاص بالاستمارة في خاصية action الخاصة بها.

مثال

<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 أعلاه في المتصفح كما يلي:

اسم الأول:


اسم العائلة:


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

مثال

<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"> تعريف الأزرار الإذاعية.

Radio buttons let a user select ONLY ONE of a limited number of choices:

مثال

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

جرب بنفسك

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

Male

Female

نوع الإدخال: الخيارات المدمجة

<input type="checkbox"> تعريف الخيارات المدمجة.

الخيارات المدمجة تسمح للمستخدم باختيار عدد صغير من الخيارات بين لا شيء وعدد غير محدود.

مثال

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

جرب بنفسك

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

I have a bike

I have a car

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

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

مثال

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

جرب بنفسك

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

أنواع مدخل HTML5

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

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

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

نوع المدخل: عدد

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

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

حسب دعم المتصفح، يمكن تطبيق القيود على مربعات النص.

مثال

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

جرب بنفسك

قيود المدخل

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

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

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

مثال

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

جرب بنفسك

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

<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:
  <input type="date" name="bday" min="2000-01-02"><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"> للفیلترهای ورودی التي يجب أن تحتوي على رقم الهاتف.

فقط Safari 8 يدعم نوع tel.

مثال

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

جرب بنفسك

نوع ورودی: url

<input type="url"> للفیلترهای ورودی التي يجب أن تحتوي على عنوان URL.

حسب دعم المتصفح، يمكن التحقق تلقائيًا من حقل URL عند تقديم الطلب.

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

مثال

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

جرب بنفسك