code-crispies/lessons/ar/28-html-forms-fieldset.json

{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-forms-fieldset",
	"title": "مجموعة الحقول",
	"description": "جمّع عناصر التحكم في النموذج باستخدام fieldset و legend",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "fieldset-basic",
			"title": "التجميع مع Fieldset",
			"description": "عنصر <kbd>&lt;fieldset&gt;</kbd> يجمع عناصر التحكم المرتبطة في النموذج معاً. أضف <kbd>&lt;legend&gt;</kbd> كأول عنصر فرعي لإعطاء المجموعة عنواناً.<br><br>هذا يساعد في إمكانية الوصول والتنظيم البصري للنماذج المعقدة.",
			"task": "أنشئ نموذجاً مع fieldset:<br>1. عنصر <kbd>&lt;form&gt;</kbd><br>2. عنصر <kbd>&lt;fieldset&gt;</kbd> بداخله<br>3. عنصر <kbd>&lt;legend&gt;</kbd> يقول <code>المعلومات الشخصية</code><br>4. حقلين مُعنونين للاسم والبريد الإلكتروني",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<form>\n  <fieldset>\n    <legend>Personal Info</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "form",
					"message": "أضف عنصر <kbd>&lt;form&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "fieldset",
					"message": "أضف <kbd>&lt;fieldset&gt;</kbd> داخل النموذج"
				},
				{
					"type": "element_exists",
					"value": "legend",
					"message": "أضف <kbd>&lt;legend&gt;</kbd> لعنونة مجموعة الحقول"
				},
				{
					"type": "element_count",
					"value": { "selector": "label", "min": 2 },
					"message": "أضف على الأقل عنوانين"
				},
				{
					"type": "element_count",
					"value": { "selector": "input", "min": 2 },
					"message": "أضف على الأقل حقلي إدخال"
				}
			]
		},
		{
			"id": "fieldset-textarea",
			"title": "إضافة Textarea",
			"description": "عنصر <kbd>&lt;textarea&gt;</kbd> ينشئ حقل إدخال نص متعدد الأسطر، مثالي للمحتوى الطويل مثل الرسائل أو الأوصاف.<br><br>استخدم سمات <kbd>rows</kbd> و <kbd>cols</kbd> لتعيين الحجم الافتراضي.",
			"task": "أنشئ نموذج اتصال:<br>1. عنصر <kbd>&lt;fieldset&gt;</kbd> مع <kbd>&lt;legend&gt;</kbd> <code>تواصل معنا</code><br>2. حقل <kbd>&lt;input&gt;</kbd> مُعنون للبريد الإلكتروني<br>3. حقل <kbd>&lt;textarea&gt;</kbd> مُعنون للرسالة<br>4. زر <kbd>&lt;button&gt;</kbd> للإرسال",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<form>\n  <fieldset>\n    <legend>Contact Us</legend>\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n    <label for=\"message\">Message:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Send Message</button>\n  </fieldset>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "fieldset",
					"message": "أضف عنصر <kbd>&lt;fieldset&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "legend",
					"message": "أضف عنصر <kbd>&lt;legend&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "textarea",
					"message": "أضف <kbd>&lt;textarea&gt;</kbd> للرسالة"
				},
				{
					"type": "element_exists",
					"value": "button",
					"message": "أضف زر إرسال"
				},
				{
					"type": "element_exists",
					"value": "input",
					"message": "أضف حقل للبريد الإلكتروني"
				}
			]
		},
		{
			"id": "fieldset-multiple",
			"title": "مجموعات حقول متعددة",
			"description": "النماذج المعقدة يمكنها استخدام عناصر <kbd>&lt;fieldset&gt;</kbd> متعددة لتنظيم أقسام مختلفة.<br><br>هذا يحسن قابلية الاستخدام للنماذج الطويلة مثل التسجيل أو الدفع.",
			"task": "أنشئ نموذج تسجيل مع 2 مجموعات حقول:<br>1. <code>معلومات الحساب</code> مع حقول اسم المستخدم وكلمة المرور<br>2. <code>التفضيلات</code> مع textarea للسيرة الذاتية<br>3. زر إرسال خارج مجموعات الحقول",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<form>\n  <fieldset>\n    <legend>Account Info</legend>\n    <label for=\"username\">Username:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Preferences</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Register</button>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_count",
					"value": { "selector": "fieldset", "min": 2 },
					"message": "أنشئ على الأقل 2 مجموعات حقول"
				},
				{
					"type": "element_count",
					"value": { "selector": "legend", "min": 2 },
					"message": "أضف legend لكل مجموعة حقول"
				},
				{
					"type": "element_exists",
					"value": "textarea",
					"message": "أضف textarea للسيرة الذاتية"
				},
				{
					"type": "element_exists",
					"value": "button",
					"message": "أضف زر إرسال"
				},
				{
					"type": "element_count",
					"value": { "selector": "input", "min": 2 },
					"message": "أضف على الأقل حقلي إدخال"
				}
			]
		}
	]
}