{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-forms-fieldset", "title": "Fieldset", "description": "Групуйте елементи форми за допомогою fieldset та legend", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "fieldset-basic", "title": "Групування з Fieldset", "description": "Елемент <fieldset> групує пов'язані елементи форми разом. Додайте <legend> як перший дочірній елемент, щоб дати групі заголовок.

Це допомагає з доступністю та візуальною організацією складних форм.", "task": "Створіть форму з fieldset:
1. Елемент <form>
2. Елемент <fieldset> всередині
3. Елемент <legend> з текстом Особисті дані
4. Два підписаних поля для імені та email", "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": "
\n
\n Personal Info\n \n \n \n \n
\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "form", "message": "Додайте елемент <form>" }, { "type": "element_exists", "value": "fieldset", "message": "Додайте <fieldset> всередину форми" }, { "type": "element_exists", "value": "legend", "message": "Додайте <legend> як заголовок fieldset" }, { "type": "element_count", "value": { "selector": "label", "min": 2 }, "message": "Додайте принаймні 2 мітки" }, { "type": "element_count", "value": { "selector": "input", "min": 2 }, "message": "Додайте принаймні 2 поля введення" } ] }, { "id": "fieldset-textarea", "title": "Додавання Textarea", "description": "Елемент <textarea> створює багаторядкове текстове поле, ідеальне для довшого вмісту як повідомлення або описи.

Використовуйте атрибути rows та cols для встановлення розміру за замовчуванням.", "task": "Створіть контактну форму:
1. Елемент <fieldset> з <legend> Зв'яжіться з нами
2. Підписане <input> для email
3. Підписане <textarea> для повідомлення
4. Кнопка <button> відправки", "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": "
\n
\n Contact Us\n \n \n \n \n \n
\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "fieldset", "message": "Додайте елемент <fieldset>" }, { "type": "element_exists", "value": "legend", "message": "Додайте елемент <legend>" }, { "type": "element_exists", "value": "textarea", "message": "Додайте <textarea> для повідомлення" }, { "type": "element_exists", "value": "button", "message": "Додайте кнопку відправки" }, { "type": "element_exists", "value": "input", "message": "Додайте поле для email" } ] }, { "id": "fieldset-multiple", "title": "Кілька Fieldsetів", "description": "Складні форми можуть використовувати кілька елементів <fieldset> для організації різних секцій.

Це покращує зручність використання довгих форм як реєстрація або оформлення замовлення.", "task": "Створіть форму реєстрації з 2 fieldsetами:
1. Дані облікового запису з полями ім'я користувача та пароль
2. Налаштування з textarea для біо
3. Кнопка відправки поза fieldsetами", "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": "
\n
\n Account Info\n \n \n \n \n
\n
\n Preferences\n \n \n
\n \n
", "previewContainer": "preview-area", "validations": [ { "type": "element_count", "value": { "selector": "fieldset", "min": 2 }, "message": "Створіть принаймні 2 fieldseti" }, { "type": "element_count", "value": { "selector": "legend", "min": 2 }, "message": "Додайте legend до кожного fieldseta" }, { "type": "element_exists", "value": "textarea", "message": "Додайте textarea для біо" }, { "type": "element_exists", "value": "button", "message": "Додайте кнопку відправки" }, { "type": "element_count", "value": { "selector": "input", "min": 2 }, "message": "Додайте принаймні 2 поля введення" } ] } ] }