الأزرار في النماذج
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 45 من 60.
تلعب الأزرار دوراً رئيسياً في النماذج، حيث تساعد في إرسال البيانات أو إعادة تعيين الحقول. لنرى كيف تعمل:
زر الإرسال:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": يرسل بيانات النموذج إلى الخادم.
زر إعادة التعيين:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": يقوم بمسح جميع الحقول وإعادتها إلى قيمها الافتراضية.
التحدي
سهلأنشئ مستند HTML يتضمن نموذجاً يحتوي على أنواع مختلفة من الأزرار. يجب أن يحتوي النموذج على العناصر التالية:
- حقل إدخال نصي بالاسم "message" ونص مؤقت (placeholder) يقول "Enter your message".
- أضف زر إرسال (
<button type="submit">) بالنص "Send". - أضف زر إعادة تعيين (
<button type="reset">) بالنص "Clear". - أضف زراً عاماً (
<button>) بالنص "Click Me".
ورقة مرجعية
تحتوي الأزرار في النماذج على أنواع مختلفة لوظائف محددة:
زر الإرسال (Submit Button):
<button type="submit">Submit</button>type="submit": يرسل بيانات النموذج إلى الخادم
زر إعادة التعيين (Reset Button):
<button type="reset">Reset</button>type="reset": يمسح جميع الحقول ويعيد تعيينها إلى قيمها الافتراضية
زر عام (Generic Button):
<button>Click Me</button>- زر افتراضي بدون سلوك محدد للنموذج
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer9النماذج والمدخلات - الجزء الثاني
أزرار الاختيار (Radio Buttons)صناديق الاختيار (Checkboxes)القوائم المنسدلة (Dropdowns)الأزرارالأزرار في النماذجمراجعة - النماذج #1مراجعة - النماذج #2