مراجعة - النماذج #2

جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 47 من 60.

التحدي

سهل

لنقم ببناء نموذج تسجيل بسيط تماماً مثل النموذج الموجود في الصورة أدناه!

إليك ما يجب تضمينه:

وسم <form> لتجميع كل العناصر معاً.
حقل اسم المستخدم (Username) مع تسمية (label) ومدخل نصي. يجب أن تكون التسمية "Username:" وتستخدم for="username". يجب أن يحتوي المدخل على id="username"، و name="username"، و type="text"، و placeholder "Enter your username".
حقل البريد الإلكتروني (Email) مع تسمية ومدخل بريد إلكتروني. يجب أن تكون التسمية "Email:" وتستخدم for="email". يجب أن يحتوي المدخل على id="email"، و name="email"، و type="email"، و placeholder "Enter your email".
حقل كلمة المرور (Password) مع تسمية ومدخل كلمة مرور. يجب أن تكون التسمية "Password:" وتستخدم for="userpassword". يجب أن يحتوي المدخل على id="userpassword"، و name="userpassword"، و type="password"، و placeholder "Enter your password".
مجموعة من أزرار الاختيار (radio buttons) للسماح للمستخدمين باختيار نوعهم: "Student" أو "Teacher". أضف فقرة أو عنواناً يقول "User Type:" فوق أزرار الاختيار. يجب أن يحتوي زر الاختيار "Student" على id="student"، و name="usertype"، و value="student"، وتسمية تقول "Student". يجب أن يحتوي زر الاختيار "Teacher" على id="teacher"، و name="usertype"، و value="teacher"، وتسمية تقول "Teacher". تذكر: يجب أن يكون لكلا زري الاختيار نفس سمة الاسم ("usertype") بحيث يمكن اختيار واحد فقط في كل مرة.
مجموعة من مربعات الاختيار (checkboxes) للسماح للمستخدمين باختيار اهتماماتهم: "Sports"، و "Music"، و "Technology". أضف فقرة أو عنواناً يقول "Interests:" فوق مربعات الاختيار. يجب أن يحتوي مربع الاختيار "Sports" على id="sports"، و name="interests"، و value="sports"، وتسمية تقول "Sports". يجب أن يحتوي مربع الاختيار "Music" على id="music"، و name="interests"، و value="music"، وتسمية تقول "Music". يجب أن يحتوي مربع الاختيار "Technology" على id="technology"، و name="interests"، و value="technology"، وتسمية تقول "Technology". تذكر: يجب أن يكون لجميع مربعات الاختيار نفس سمة الاسم ("interests") لأنها تنتمي لنفس المجموعة.
زر Sign Up وزر Clear في نهاية النموذج. يجب أن يكون لزر Sign Up النوع type="submit" ولزر Clear النوع type="reset". يجب أن يعرض زر Sign Up النص "Sign Up" ويعرض زر Clear النص "Clear".

تأكد من تضمين التسميات والعناوين المناسبة لتجربة مستخدم سهلة!

تذكر، يجب أن تتضمن المدخلات هذه السمات المهمة: type، و id، و name، و value.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <!-- اكتب الكود هنا -->
    </body>
</html>

جميع دروس Fundamentals

1أساسيات HTML

ما هي HTML؟الهيكل الأساسي لـ HTML الوسوم والعناصر تداخل وإغلاق الوسوم التعليقات في HTML

4بطاقة وصفة

نظرة عامة على المشروع عنوان الوصفة ووصفها

المكونات

الخطوات

7صفحة الملف الشخصي

نظرة عامة على المشروع قسم الترويسة (Header)

صورة الملف الشخصي

قسم نبذة عني

روابط التواصل الاجتماعي

10الجداول

أساسيات الجداول إضافة التسميات التوضيحية دمج الصفوف والأعمدة مراجعة - الجداول

2النصوص والتنسيق

العناوين الفقرات فواصل الأسطر النص العريض والمائل النص العريض والمائل مجدداً مراجعة - التنسيق

5إضافة المحتوى

سمات HTML الروابط روابط لصفحات جديدة الصور سمات الصور

8النماذج والمدخلات - الجزء الأول

أساسيات النماذج مدخلات النصوص سمات المدخلات حقل كلمة المرور تسميات المدخلات ملخص - نموذج أساسي

11صفحة التسجيل في الفعالية

نظرة عامة على المشروع قسم الـ Header

قسم تفاصيل الفعالية

نموذج التسجيل

قسم الـ Footer

3التعامل مع القوائم

قائمة غير مرتبة قائمة مرتبة قوائم متداخلة ملخص - القوائم

6تخطيط الصفحة

التقسيمات عناصر Span المضمنة الوسوم الدلالية الأقسام والمقالات ملخص - التخطيط

9النماذج والمدخلات - الجزء الثاني

أزرار الاختيار (Radio Buttons)صناديق الاختيار (Checkboxes)القوائم المنسدلة (Dropdowns)الأزرار الأزرار في النماذج مراجعة - النماذج #1مراجعة - النماذج #2

12التحديات النهائية

بطاقة ملف شخصي بسيطة بطاقة دعوة لحدث صفحة مقال بسيطة قائمة الكتب المفضلة