يعد HTML عنصرًا مهمًا في نموذج HTML. يمكن أن تكون سمة 'النوع' لعنصر الإدخال أنواعًا مختلفة، مما يحدد مجال المعلومات. مثل يعطي مربع نص.

فيما يلي قائمة بجميع أنواع عناصر HTML.

أضاف HTML5 أنواعًا جديدة على العنصر. فيما يلي قائمة بأنواع عناصر HTML5

فيما يلي وصف لأنواع العناصر مع الأمثلة.

مسح.التالي جافا

1. :

يتم استخدام عنصر من النوع 'نص' لتحديد حقل نص إدخال سطر واحد.

مثال:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

انتاج:

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

ال 'نص' يحدد الحقل حقل نص إدخال سطر واحد.

ملحوظة: الحد الأقصى الافتراضي لطول الأحرف هو 20.

2. :

يسمح عنصر النوع 'كلمة المرور' للمستخدم بإدخال كلمة المرور بشكل آمن في صفحة الويب. تم تحويل النص المُدخل في ملف كلمة المرور إلى '*' أو '.'، بحيث لا يمكن لمستخدم آخر قراءته.

مثال:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

انتاج:

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

ال 'كلمة المرور' يحدد الحقل حقل كلمة مرور إدخال سطر واحد لإدخال كلمة المرور بشكل آمن.

3. :

يحدد عنصر النوع 'إرسال' زر إرسال لإرسال النموذج إلى الخادم عند وقوع حدث 'النقر'.

مثال:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

انتاج:

نوع الإدخال 'إرسال':

بعد النقر على زر إرسال، سيؤدي ذلك إلى إرسال النموذج إلى الخادم وإعادة توجيه الصفحة إليه فعل القيمة. سنتعرف على سمة 'الإجراء' في الفصول اللاحقة

4. :

يتم تعريف النوع 'إعادة التعيين' أيضًا على أنه زر، ولكن عندما يقوم المستخدم بإجراء حدث نقر، فإنه يقوم افتراضيًا بإعادة تعيين جميع القيم المدخلة.

مثال:

 User id: Password: <br> <br> 

انتاج:

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

حاول تغيير قيم إدخال معرف المستخدم وكلمة المرور، ثم عند النقر فوق إعادة تعيين، سيتم إعادة تعيين حقول الإدخال بالقيم الافتراضية.

5. :

يحدد النوع 'radio' أزرار الاختيار، التي تسمح باختيار خيار بين مجموعة من الخيارات ذات الصلة. في كل مرة، يمكن تحديد خيار زر اختيار واحد فقط في كل مرة.

مثال:

يرجى اختيار اللون المفضل لديك

انتاج:

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

يرجى اختيار اللون المفضل لديك

6. :

يتم عرض النوع 'مربع الاختيار' كمربعات يمكن تحديدها أو إلغاء تحديدها لتحديد الاختيارات من الخيارات المحددة.

ملاحظة: أزرار 'الاختيار' تشبه مربعات الاختيار، ولكن هناك فرق مهم بين كلا النوعين: تسمح أزرار الاختيار للمستخدم بتحديد خيار واحد فقط في كل مرة، بينما تسمح خانة الاختيار للمستخدم بتحديد صفر إلى خيارات متعددة في وقت واحد .

مثال:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

انتاج:

إدخال نوع 'مربع الاختيار'.

إستمارة تسجيل

يرجى اختيار الرياضات المفضلة لديك

7. :

يحدد النوع 'زر' زر ضغط بسيط، والذي يمكن برمجته للتحكم وظيفيًا في أي حدث مثل حدث النقر.

ملحوظة: يعمل بشكل أساسي مع JavaScript.

مثال:

انتاج:

نوع الإدخال 'زر'.

انقر على الزر لرؤية النتيجة:

ملاحظة: في المثال أعلاه، استخدمنا 'التنبيه' الخاص بـ JS، والذي ستتعلمه في البرنامج التعليمي الخاص بنا. يتم استخدامه لإظهار نافذة منبثقة.

8. :

يتم استخدام العنصر ذو النوع 'ملف' لتحديد ملف واحد أو أكثر من مساحة تخزين جهاز المستخدم. بمجرد تحديد الملف، وبعد الإرسال، يمكن تحميل هذا الملف إلى الخادم بمساعدة رمز JS وواجهة برمجة تطبيقات الملف.

مثال:

 Select file to upload: 

انتاج:

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

يمكننا اختيار أي نوع من الملفات حتى لا نحدده! سيظهر الملف المحدد بجوار خيار 'اختيار ملف'.

9. :

يتم استخدام النوع 'صورة' لتمثيل زر إرسال على شكل صورة.

مثال:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

HTML5 عنصر الأنواع المضافة حديثًا

1. :

يتم استخدام النوع 'اللون' لتحديد حقل الإدخال الذي يحتوي على لون. يسمح للمستخدم بتحديد اللون من خلال واجهة الألوان المرئية في المتصفح.

ملاحظة: نوع 'اللون' يدعم فقط قيمة اللون بالتنسيق الست عشري، والقيمة الافتراضية هي #000000 (أسود).

مثال:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

انتاج:

أنواع 'لون' الإدخال:

ملحوظة: القيمة الافتراضية لنوع 'اللون' هي #000000 (أسود). وهو يدعم فقط قيمة اللون بالتنسيق الست عشري.

قائمة الإعدادات أندرويد

2. :

يقوم عنصر النوع 'التاريخ' بإنشاء حقل إدخال، والذي يسمح للمستخدم بإدخال التاريخ بتنسيق معين. يمكن للمستخدم إدخال التاريخ عن طريق حقل النص أو عن طريق واجهة منتقي التاريخ.

مثال:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

انتاج:

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

3. :

يقوم عنصر النوع 'datetime-local' بإنشاء ملف إدخال يسمح للمستخدم بتحديد التاريخ بالإضافة إلى التوقيت المحلي في الساعة والدقيقة بدون معلومات المنطقة الزمنية.

مثال:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

انتاج:

إدخال نوع 'التاريخ والوقت المحلي'.

4. :

يقوم النوع 'البريد الإلكتروني' بإنشاء إدخال يسمح للمستخدم بإدخال عنوان البريد الإلكتروني من خلال التحقق من صحة النمط. تسمح السمات المتعددة للمستخدم بإدخال أكثر من عنوان بريد إلكتروني واحد.

مثال:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

انتاج:

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

ملحوظة: يمكن للمستخدم أيضًا إدخال عناوين بريد إلكتروني متعددة مفصولة بفاصلة أو مسافة بيضاء على النحو التالي:

5. :

ينشئ النوع 'الشهر' حقل إدخال يسمح للمستخدم بإدخال الشهر والسنة بسهولة بتنسيق 'MM، YYYY' حيث يحدد MM قيمة الشهر، ويحدد YYYY قيمة السنة. جديد

مثال:

 Enter your Birth Month-year: 

انتاج:

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

6. :

يقوم رقم نوع العنصر بإنشاء ملف إدخال يسمح للمستخدم بإدخال القيمة الرقمية. يمكنك أيضًا تقييد إدخال الحد الأدنى والحد الأقصى للقيمة باستخدام سمة الحد الأدنى والحد الأقصى.

مثال:

 Enter your age: 

انتاج:

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

ملحوظة: سيسمح بإدخال رقم في نطاق 50-80. إذا كنت تريد إدخال رقم آخر غير النطاق، فسوف يظهر خطأ.

7. :

يقوم عنصر النوع 'url' بإنشاء ملف إدخال يمكّن المستخدم من إدخال عنوان URL.

مثال:

 Enter your website URL: <br> 

انتاج:

أدخل نوع 'عنوان URL'.

8. :

ينشئ نوع الأسبوع حقل إدخال يسمح للمستخدم بتحديد أسبوع وسنة من التقويم المنسدل بدون منطقة زمنية.

مثال:

 <b>Select your best week of year:</b> <br> <br> 

انتاج:

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

9. :

يقوم النوع 'بحث' بإنشاء ملف إدخال يسمح للمستخدم بإدخال سلسلة بحث. وهي متناظرة وظيفيًا مع نوع إدخال النص، ولكن قد يتم تصميمها بشكل مختلف.

مثال:

 Search here: 

انتاج:

أدخل نوع 'البحث'.

10. :

عنصر النوع ؟الهاتف؟ يقوم بإنشاء إدخال مقدم لإدخال رقم الهاتف. لا يحتوي النوع 'tel' على التحقق الافتراضي مثل البريد الإلكتروني، لأن نمط رقم الهاتف يمكن أن يختلف في جميع أنحاء العالم.

تهيئة مجموعة جافا

مثال:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

انتاج:

نوع الإدخال 'الهاتف'.

ملحوظة: نحن هنا نستخدم سمتين هما 'النمط' و'المطلوب' اللذان سيسمحان للمستخدم بإدخال الرقم بتنسيق معين ويلزم إدخال الرقم في حقل الإدخال.