علامة <input> في HTML

  • الصفحة السابقة <img>
  • الصفحة التالية <ins>

تعريف والاستخدام

<input> تعريف العنصر يحدد حقل الإدخال الذي يمكن للمستخدم إدخال البيانات فيه.

<input> العنصر هو العنصر الأكثر أهمية في النموذج.

<input> يمكن عرض العنصر بطرق متعددة، اعتمادًا على سمة type.

هناك أنواع مختلفة من أنواع الإدخال:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">القيمة الافتراضية)
  • <input type="time">
  • <input type="url">
  • <input type="week">

الرجوع إلى سمة type،للنظر في أمثلة كل نوع من أنواع الإدخال!

مثال

يحتوي النموذج HTML على ثلاثة حقول إدخال؛ حقل نصيين و زر تقديم:

<form action="/action_page.php">
  <label for="fname">اسم:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">اسم العائلة:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="تقديم">
</form>

جرب بنفسك

نصائح وتعليقات

نصيحة:الرجاء دائمًا استخدام علامة <label> لتعريف العلامات التالية:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

خصائص

خصائص قيمة وصف
accept
  • امتداد ملف
  • audio/*
  • video/*
  • image/*
  • نوع وسائط

يحدد نوع الملفات التي سيتم تقديمها عبر تحميل الملف.

يحدد أنواع الملفات التي يمكن أن يتم اختيارها من نافذة اختيار الملفات (يستخدم فقط مع type="file").
alt النص يحدد النص البديل للصورة (يستخدم فقط مع type="image").
autocomplete
  • on
  • off
 يحدد ما إذا كان يجب تمكين إكمال النص تلقائيًا لـ عنصر <input>.
autofocus autofocus يحدد أن يجب أن يحصل عنصر <input> على التركيز تلقائيًا عند تحميل الصفحة.
checked checked يحدد أن يجب اختيار عنصر <input> مسبقًا عند تحميل الصفحة (يستخدم مع type="checkbox" أو type="radio").
dirname inputname.dir يحدد اتجاه النص الذي سيتم تقديمه.
disabled disabled يحدد أن يجب تعطيل عنصر <input>.
form id للنموذج يحدد النموذج الذي ينتمي إليه عنصر <input>.
formaction URL يحدد URL لمعالجة ملفات التحكم في المدخلات عند تقديم النموذج (يستخدم مع type="submit" و type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 يحدد كيفية ترميز بيانات النموذج عند إرسالها إلى الخادم (يستخدم مع type="submit" و type="image").
formmethod
  • get
  • post
 يحدد الطريقة التي سيتم استخدامها لتحويل البيانات إلى URL الهدف عند تقديم النموذج (يستخدم مع type="submit" و type="image").
formnovalidate formnovalidate يحدد أنه لا يجب التحقق من صحة العنصر عند تقديم النموذج.
formtarget
  • _blank
  • _self
  • _parent
  • _top
اسم الصندوق 		يحدد أين سيتم عرض الاستجابة بعد تقديم النموذج (يستخدم مع type="submit" و type="image").
height البكسل يحدد الارتفاع لعنصر <input> (يستخدم فقط مع type="image").
list معرف العنصر المضمن يحدد العنصر المضمن الذي يحتوي على الخيارات المسبقة للـ <input>.
max
  • رقم
  • التاريخ
 يحدد القيمة الأقصى المسموح بها لـ <input>.
maxlength رقم يحدد عدد الحروف الأقصى المسموح به لـ <input>.
min
  • رقم
  • التاريخ
 يحدد القيمة الأدنى المطلوبة لـ <input>.
minlength رقم يحدد عدد الحروف الأدنى المطلوب في عنصر <input>.
multiple multiple يحدد أن المستخدم يمكنه إدخال قيم متعددة في عنصر <input>.
name النص يحدد اسم عنصر <input>.
pattern تعبير النمط العادي يحدد تعبير النمط العادي لقيمة <input>.
placeholder النص يحدد التلميح القصير للتقدير المتوقع لـ <input>.
popovertarget معرف العنصر يحدد العنصر الذي سيتم استدعاؤه (يستخدم فقط مع type="button").
popovertargetaction
  • hide
  • show
  • toggle
 يحدد ما سيحدث عند النقر على الزر (يستخدم فقط مع type="button").
readonly readonly يحدد أن حقل الإدخال قابل للقراءة فقط.
required required يحدد أنه يجب ملء حقل الإدخال قبل تقديم النموذج.
size رقم يحدد عرض عنصر <input> (بعدد الحروف).
src URL URL المستخدم كصورة للزر التقديمي (يستخدم فقط مع type="image").
step
  • رقم
  • any
 يحدد الفجوة بين الأرقام المقبولة في حقل الإدخال.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 يحدد نوع العنصر <input> الذي سيُعرض.
value النص يحدد القيمة للعنصر <input>.
width البكسل يحدد عرض عنصر <input> (يُستخدم فقط مع type="image").

خصائص العالمية

<input> الدعم عن طريق خصائص العالمية في HTML.

خصائص الحدث

<input> الدعم عن طريق خصائص الحدث في HTML.

إعدادات CSS الافتراضية

لا يوجد.

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم

الصفحات ذات الصلة

دليل HTML:

دليل مرجع HTML DOM:

  • الصفحة السابقة <img>
  • الصفحة التالية <ins>