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>
قيود الإدخال
فيما يلي قائمة ببعض قيود الإدخال الشائعة:
الصفة | الوصف |
---|---|
disabled | يحدد أنه يجب تعطيل حقل الإدخال |
max | يحدد الحد الأقصى لقيمة حقل الإدخال |
maxlength | يحدد الحد الأقصى لعدد الأحرف لحقل الإدخال |
min | يحدد الحد الأدنى لقيمة حقل الإدخال |
pattern | يحدد تعبيرًا عاديًا للتحقق من قيمة الإدخال |
readonly | يحدد أن حقل الإدخال للقراءة فقط (لا يمكن تغييره) |
required | يحدد أن حقل الإدخال مطلوب (يجب ملؤه) |
size | يحدد العرض (بالأحرف) لحقل الإدخال |
step | يحدد فترات الرقم القانوني لحقل الإدخال |
value | يحدد القيمة الافتراضية لحقل الإدخال |
يعرض المثال التالي حقل إدخال رقمي ، حيث يمكنك إدخال قيمة من 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
الصفة | الوصف |
---|---|
<input type=””> | يحدد نوع الإدخال المطلوب عرضه |
One Comment