وثائق HTML قابلة للتشغيل: أنواع input

Q: كم عدد أنواع input في HTML؟

22 نوعًا: button وcheckbox وcolor وdate وdatetime-local وemail وfile وhidden وimage وmonth وnumber وpassword وradio وrange وreset وsearch وsubmit وtel وtext وtime وurl وweek. النوع المجهول أو الغائب يتصرف كـ text.

Q: ما نوع input الافتراضي في HTML؟

text. العنصر بلا type، أو بنوع لا يعرفه المتصفح، حقل نصي من سطر واحد.

Q: هل أستخدم type="number" لأرقام الهواتف أو الرموز البريدية؟

لا. number للكميات: يضيف أزرار زيادة ونقصان، ويرفض + والمسافات والشرطات التي تحتويها أرقام الهواتف. استخدم type="tel" لأرقام الهواتف، وtype="text" مع inputmode="numeric" للرموز مثل الرموز البريدية وأرقام البطاقات.

Q: ما الصيغة التي يستخدمها input type date؟

القيمة دائمًا YYYY-MM-DD، مثل 2026-09-24، أيًا كانت الصيغة التي يراها القارئ على الشاشة. العرض يتبع إعدادات القارئ المحلية، أما القيمة المرسلة والمقروءة في السكربت فلا.

Q: هل يحتاج وسم input إلى وسم إغلاق؟

لا. عنصر فارغ: اكتب . وسم الإغلاق غير صالح، والشرطة المائلة في مسموحة لكنها لا تفعل شيئًا.

الوسم input وأنواعه

<input> حقل في نموذج، وسمته type تحدد نوعه. الوسم نفسه يصنع صندوق نص أو شريط تمرير أو منتقي تاريخ أو منتقي ألوان. جرّب كل حقل أدناه واضغط Submit لترى ما يرسله النموذج:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> عنصر فارغ، فليس له وسم إغلاق. name هو المفتاح الذي تُرسل القيمة تحته، وvalue هي القيمة الابتدائية. غياب type أو خطأ في كتابته يعطي حقلًا نصيًا عاديًا.

كل أنواع input في HTML

`type`	ما هو	ملاحظات
`text`	سطر نص واحد	الافتراضي
`password`	نص يظهر كنقاط	ليس مشفرًا بذاته، فأرسله عبر HTTPS
`email`	عنوان بريد إلكتروني	يتحقق من الصيغة، ومفتاح `@` في لوحات مفاتيح الهواتف
`url`	عنوان ويب	يجب أن يبدأ بمخطط مثل `https://`
`tel`	رقم هاتف	لوحة أرقام الهاتف على الجوال، بلا فحص للصيغة
`search`	صندوق بحث	يعرض غالبًا زرًا للمسح
`number`	رقم	أزرار زيادة ونقصان، و`min` و`max` و`step`
`range`	شريط تمرير	غير دقيق عن قصد، والقيمة رقم
`date`	تاريخ	القيمة `YYYY-MM-DD`
`time`	وقت من اليوم	القيمة `HH:MM` (نظام 24 ساعة)
`datetime-local`	تاريخ ووقت بلا منطقة زمنية	القيمة `YYYY-MM-DDTHH:MM`
`month`	سنة وشهر	غير مدعوم في كل المتصفحات
`week`	سنة ورقم أسبوع	غير مدعوم في كل المتصفحات
`color`	منتقي ألوان	القيمة `#rrggbb` بأحرف صغيرة
`checkbox`	مربع تشغيل وإيقاف	راجع مربع الاختيار checkbox
`radio`	خيار واحد من مجموعة	راجع زر الاختيار radio
`file`	منتقي ملفات	`accept` و`multiple`
`hidden`	قيمة تُرسل ولا تظهر	للمعرّفات والرموز
`submit`	زر إرسال	`<button type="submit">` أكثر مرونة
`reset`	زر إعادة ضبط	نادرًا ما يكون فكرة جيدة
`button`	زر لا يفعل شيئًا بنفسه	لـ JavaScript
`image`	زر إرسال مرسوم كصورة	يرسل أيضًا إحداثيات النقرة

الأنواع النصية ولوحات مفاتيح الهواتف

email وurl وtel وsearch وtext كلها تبدو كصندوق نص على الحاسوب. الفرق في التحقق، وعلى الهواتف في لوحة المفاتيح التي تُفتح. الحد في هذا المثال يتحول إلى الأخضر أو الأحمر بحسب حكم المتصفح على القيمة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example بريد صالح في نظر المتصفح: فهو يتحقق فقط من وجود نص و@ ونطاق، لا من احتواء النطاق على نقطة. الفحص الحقيقي يجري على الخادم.
example.com ليس url صالحًا لأنه بلا مخطط. أما https://example.com فصالح.
tel يقبل أي شيء. صيغ الهواتف تختلف كثيرًا بين الدول، فلا يوجد فحص مدمج، وأضف pattern إن احتجت إلى واحد.
inputmode="numeric" تطلب من الهواتف لوحة أرقام من دون مشاكل type="number"، ولهذا فهي الخيار الصحيح للرموز البريدية ورموز التحقق لمرة واحدة وأرقام البطاقات.

number وrange

كلاهما يأخذ min وmax وstep. number للقيم الدقيقة، وrange شريط تمرير للقيم التي لا يهم فيها الرقم الدقيق كثيرًا. شريط range لا يعرض رقمًا، فاقرنه بـ <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

القيمة الافتراضية لـ step في number هي 1، لذلك فحقل السعر الذي بلا step="0.01" يرفض 4.99 عند إرسال النموذج. في JavaScript تكون input.value نصًا دائمًا، فاستخدم input.valueAsNumber للحصول على رقم.

التواريخ والأوقات

أنواع التاريخ والوقت تفتح منتقي المتصفح الخاص. ما يراه القارئ يتبع إعداداته المحلية (09/24/2026، 24.09.2026)، لكن القيمة دائمًا بالصيغة الثابتة نفسها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

هذه الصيغة الثابتة هي ما يستقبله الخادم وما تقرؤه JavaScript، فلا تحتاج أبدًا إلى تحليل «24.09.2026». وتأخذ min وmax الصيغة نفسها. datetime-local بلا منطقة زمنية: إن كان ذلك مهمًا، فحوّل على الخادم باستخدام منطقة القارئ.

color وfile

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" تحصر منتقي الملفات في الصور (وتعرض الكاميرا على الهواتف)، وتقبل أيضًا الامتدادات مثل accept=".pdf,.docx". هي مجرد تلميح للمنتقي، فافحص نوع الملف على الخادم. وmultiple تسمح بعدة ملفات. والرفع الحقيقي يحتاج أيضًا إلى method="post" وenctype="multipart/form-data" على النموذج.

اقتراحات بـ datalist

<datalist> يعطي حقل النص قائمة اقتراحات مع السماح بأي قيمة. اربطهما بالسمة list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

اكتب «ja» في الحقل لترى الاقتراحات المطابقة. وعلى عكس القائمة المنسدلة select، يستطيع القارئ كتابة قيمة ليست في القائمة.

سمات تعمل على حقول input

السمة	وظيفتها
`name`	المفتاح الذي تُرسل القيمة تحته
`value`	القيمة الابتدائية
`placeholder`	تلميح يظهر ما دام الحقل فارغًا (ليس تسمية)
`required`	يجب ملؤه قبل الإرسال
`disabled`	لا يمكن استخدامه، ولا يُرسل
`readonly`	لا يمكن تحريره، لكنه يُرسل
`autocomplete`	ما الذي يُملأ تلقائيًا: `email` أو `name` أو `current-password` أو `one-time-code` أو `off`
`min`, `max`, `step`	حدود للأرقام وأشرطة التمرير والتواريخ والأوقات
`minlength`, `maxlength`	حدود الطول للأنواع النصية
`pattern`	تعبير نمطي يجب أن تطابقه القيمة كاملة
`inputmode`	أي لوحة مفاتيح تظهر على الهاتف: `numeric` أو `decimal` أو `email` أو `tel` أو `url`
`list`	قيمة `id` لعنصر `<datalist>`
`multiple`	عدة قيم، لـ `email` و`file`
`accept`	أنواع الملفات لـ `file`

أخطاء شائعة

type="number" لأرقام الهواتف أو الرموز البريدية أو أرقام البطاقات. هذه ليست كميات. استخدم tel أو text مع inputmode="numeric".
حقل سعر بلا step="0.01". القيم العشرية تفشل في التحقق.
استخدام placeholder كتسمية. يختفي بمجرد أن يكتب القارئ.
الاعتماد على accept أو type="email" للأمان. هي وسائل راحة، والخادم يفحص مجددًا.
type="month" أو type="week" بلا بديل. بعض المتصفحات تعرض حقلًا نصيًا عاديًا.
وسم إغلاق </input>. <input> عنصر فارغ.

الأسئلة الشائعة

كم عدد أنواع input في HTML؟

22 نوعًا: button وcheckbox وcolor وdate وdatetime-local وemail وfile وhidden وimage وmonth وnumber وpassword وradio وrange وreset وsearch وsubmit وtel وtext وtime وurl وweek. النوع المجهول أو الغائب يتصرف كـ text.

ما نوع input الافتراضي في HTML؟

text. العنصر <input> بلا type، أو بنوع لا يعرفه المتصفح، حقل نصي من سطر واحد.

هل أستخدم type="number" لأرقام الهواتف أو الرموز البريدية؟

لا. number للكميات: يضيف أزرار زيادة ونقصان، ويرفض + والمسافات والشرطات التي تحتويها أرقام الهواتف. استخدم type="tel" لأرقام الهواتف، وtype="text" مع inputmode="numeric" للرموز مثل الرموز البريدية وأرقام البطاقات.

ما الصيغة التي يستخدمها input type date؟

القيمة دائمًا YYYY-MM-DD، مثل 2026-09-24، أيًا كانت الصيغة التي يراها القارئ على الشاشة. العرض يتبع إعدادات القارئ المحلية، أما القيمة المرسلة والمقروءة في السكربت فلا.

هل يحتاج وسم input إلى وسم إغلاق؟

لا. <input> عنصر فارغ: اكتب <input type="text" name="city">. وسم الإغلاق </input> غير صالح، والشرطة المائلة في <input /> مسموحة لكنها لا تفعل شيئًا.

مفاهيم ذات صلة