هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: كيفية استخدام نوع الإدخال “email” في HTML وتحقق البريد الإلكتروني
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
مقدمة عن إدخال البريد الإلكتروني في HTML
يُعد استخدام النماذج في HTML من الأدوات الأساسية لجمع البيانات من المستخدمين على صفحات الويب. ومن أهم أنواع الإدخال هو إدخال البريد الإلكتروني، الذي يتيح للمستخدمين إدخال عناوين البريد الإلكتروني بشكل صحيح والتحقق منها.
استخدام النوع "text" مع وسم الإدخال في HTML
في السابق، تعلمنا كيفية استخدام الخاصية "text" مع وسم الإدخال لاستلام أي محتوى نصي من المستخدم. ولكن عندما نحتاج إلى جمع بيانات خاصة بالبريد الإلكتروني، يجب علينا استخدام النوع المناسب.
استخدام النوع "email" مع وسم الإدخال
النوع "email" مع وسم الإدخال يُستخدم لإعلام المتصفح بأن البيانات المدخلة يجب أن تكون عنوان بريد إلكتروني. يقوم المتصفح بالتحقق من أن البيانات المدخلة تحتوي على رمز "@" وأن التنسيق صحيح.
كيفية جعل المتصفح يتحقق من صحة البيانات المدخلة
يمكن استخدام الخاصية "required" مع وسم الإدخال لضمان عدم ترك الحقل فارغًا. يعمل هذا بالتزامن مع النوع "email" للتحقق من أن البيانات المدخلة هي عنوان بريد إلكتروني صالح.
إضافة إدخال البريد الإلكتروني إلى صفحة الويب
لإضافة إدخال بريد إلكتروني إلى صفحة الويب، نستخدم وسم الإدخال مع النوع "email". يمكن أيضًا إضافة رسالة إرشادية للمستخدم باستخدام الخاصية "placeholder".
التحقق من عنوان البريد الإلكتروني عند الإرسال
عند استخدام الخاصية "required" مع النوع "email" داخل وسم النموذج (form tag)، سيقوم المتصفح بالتحقق من أن المستخدم قد أدخل عنوان بريد إلكتروني صالح قبل السماح بإرسال النموذج.
مثال عملي على استخدام إدخال البريد الإلكتروني
<h1>Send Case Study</h1>
<form action="">
<input type="text">
<input type="email" placeholder="E-mail address" name="email" required>
<input type="password" placeholder="Type your password" name="password" required>
<input type="file" name="file" required>
<input type="file" name="files" multiple="multiple" required>
<button>Send</button>
</form>
أهمية استخدام الخصائص الصحيحة في HTML
يجب على المطورين فهم أهمية استخدام الخصائص المناسبة مع وسوم الإدخال في HTML لضمان جمع البيانات بشكل صحيح. الخصائص مثل "required" و"email" تسهم في تحسين تجربة المستخدم وتجنب الأخطاء عند إدخال البيانات.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي كيفية استخدام نوع الإدخال “email” في HTML وتحقق البريد الإلكتروني
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة في هذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي لنماذج إرسال البيانات في صفحة الإنترنت
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
تعلم كيفية استخدام CSS لتصميم صفحات ويب مميزة ومرنة. ستكتسب مهارات التحكم بالألوان، الأحجام، الخطوط، والمسافات لإنشاء تصاميم متجاوبة وجذابة، مما يجعل مواقعك متوافقة مع مختلف الشاشات والأجهزة
دبلوم بناء مواقع الإنترنت للمبتدئين تعلم من الصفر HTML وCSS وJavaScript
ابدأ رحلتك في تطوير مواقع الإنترنت مع دبلوم شامل للمبتدئين. تعلم HTML وCSS وJavaScript من الصفر واكتسب المهارات الأساسية لبناء مواقع احترافية. دورة مصممة لتدعمك في كل خطوة على الطريق.
مقالات ذات صلة
تطبيق حركات الانيميشن والتحريك ال 3d وخلق اشكال انسيابية للعناصر داخل الصفحة
تطبيق حركات الانيميشن والتحريك الـ 3D في بناء صفحات الويب باستخدام HTML و CSS في عالم تصميم الويب الحديث، أصبحت حركات الانيميشن...
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
