الأزرار في النماذج
جزء من قسم الأساسيات في رحلة 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".
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer9النماذج والمدخلات - الجزء الثاني
أزرار الاختيار (Radio Buttons)صناديق الاختيار (Checkboxes)القوائم المنسدلة (Dropdowns)الأزرارالأزرار في النماذجمراجعة - النماذج #1مراجعة - النماذج #2تدرّب بنفسك: Playground لـ Web