HTML أنواع الإدخال

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

HTML أنواع الإدخال

فيما يلي أنواع المدخلات المختلفة التي يمكنك استخدامها في HTML:

• <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">

إدخال نوع النص

<input type="text">يعرّف حقل إدخال النص بسطر واحد :

<form>

  First name:<br>

  <input type="text" name="firstname"><br>

  Last name:<br>

  <input type="text" name="lastname">

</form>

نوع الإدخال كلمة المرور

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

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

يتم إخفاء كلمة المرور (تظهر كعلامات نجمية أو دوائر).

نوع الإدخال

<input type="submit">يحدد زرًا لإرسال بيانات النموذج إلى معالج النماذج .

عادةً ما يكون معالج النماذج صفحة خادم تحتوي على برنامج نصي لمعالجة بيانات الإدخال.

يتم تحديد معالج النماذج في action :

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

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

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>

إعادة ضبط نوع الإدخال

<input type="reset">يعرف زر إعادة الضبط الذي سيعيد تعيين جميع قيم النموذج إلى قيمها الافتراضية:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

إذا قمت بتغيير قيم الإدخال ثم انقر فوق الزر “إعادة تعيين” ، فسيتم إعادة تعيين بيانات النموذج إلى القيم الافتراضية.

نوع الإدخال راديو

<input type="radio">يحدد زر الراديو .

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

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

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

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

تتيح مربعات الاختيار للمستخدم تحديد خيارات ZERO أو MORE لعدد محدود من الخيارات.

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

الزر

<input type="button">يحدد زر :

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

أنواع إدخال HTML5

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

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

أنواع المدخلات الجديدة غير المدعومة من متصفحات الويب الأقدم ، سوف تتصرف كما <input type="text">.

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

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

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

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

نوع الإدخال التاريخ

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

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

<form>
  Birthday:
  <input type="date" name="bday">
</form>

يمكنك أيضا استخدام minو max لإضافة قيود إلى تواريخ:

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

نوع الإدخال Datetime المحلي

<input type="datetime-local">يحدد تاريخ ووقت حقل الإدخال، مع وجود المنطقة الزمنية.

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

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

نوع الإدخال البريد الإلكتروني

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

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

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

<form>
  E-mail:
  <input type="email" name="email">
</form>

نوع ملف الإدخال

<input type="file"> يحدد حقل ملف حدد وزر “استعراض” لتحميل الملفات.

<form>
  Select a file: <input type="file" name="myFile">
</form>

نوع الإدخال الشهر

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

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

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

نوع الإدخال رقم

<input type="number">يعرف رقمي حقل الإدخال.

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

يعرض المثال التالي حقل إدخال رقمي ، حيث يمكنك إدخال قيمة من 1 إلى 5:

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

قيود الإدخال

فيما يلي قائمة ببعض قيود الإدخال الشائعة:

يعرض المثال التالي حقل إدخال رقمي ، حيث يمكنك إدخال قيمة من 0 إلى 100 ، في خطوات من 10. القيمة الافتراضية هي 30:

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

نطاق الإدخال

<input type="range">يعرف التحكم لإدخال رقم الذي هو غير مهم (مثل السيطرة على شريط التمرير) قيمة المحدد. النطاق الافتراضي هو 0 إلى 100. ومع ذلك، يمكنك وضع قيود على ما أرقام مقبولة مع min، maxو step:

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

نوع الإدخال البحث

<input type="search">يستخدم لحقول البحث (حقل البحث يتصرف مثل حقل نص عادي).

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

نوع الإدخال

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

<form>
  Telephone:
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

نوع الإدخال الوقت

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

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

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

نوع الإدخال Url

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

اعتمادًا على دعم المتصفح ، يمكن التحقق من صحة عنوان url تلقائيًا عند إرساله.

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

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

نوع الإدخال الأسبوع

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

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

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

سمة نوع إدخال HTML