## Мета
Покращення взаємодії користувача з сайтом шляхом створення інтерактивної форми, яка вимагає введення імені, електронної пошти та пароля з відповідними мітками.

## Завдання
Додайте просту, зручну для користувача форму на вашу сторінку. Дотримуйтесь наступних вимог:
1. Поле для імені
   - Використати текстове поле вводу.
   - Встановити placeholder на `John`.
   - Зробити це поле активним за замовчуванням (autofocus).
2. Поле для електронної пошти
   - Використати поле вводу типу email.
   - Встановити placeholder на `example@gmail.com`.
   - Позначити поле як обов'язкове.
3. Поле для пароля
   - Використати поле вводу типу password.
   - Зробити це поле обов'язковим.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQ2hhbmdlIHRoZSBjb2RlIGJlbG93IC0tPgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHBsYWNlaG9sZGVyPSJfX18iIF9fXyAvPgoKICAgICAgPGxhYmVsIGZvcj0iX19fIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iX19fIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBwbGFjZWhvbGRlcj0iX19fIiBfX18gLz4KCiAgICAgIDxsYWJlbCBfX189Il9fXyI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgX19fPSJfX18iIG5hbWU9InBhc3N3b3JkIiBfX18gLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKYm9keSB7CiAgZm9udC1mYW1pbHk6ICJDb21pYyBTYW5zIE1TIiwgY3Vyc2l2ZSwgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmNlMzhhOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKCiAgbWFyZ2luOiAwOwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmZvcm0gewogIG1hcmdpbi10b3A6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBwYWRkaW5nOiAzMHB4OwogIGJvcmRlci1yYWRpdXM6IDE1cHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIHdpZHRoOiAzNTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCmgxIHsKICBjb2xvcjogI2U3MWQzNjsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIGZvbnQtc2l6ZTogMjhweDsKfQoKbGFiZWwgewogIGRpc3BsYXk6IGJsb2NrOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjZjljNzRmOwogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCmlucHV0W3R5cGU9InRleHQiXSwKaW5wdXRbdHlwZT0iZW1haWwiXSwKaW5wdXRbdHlwZT0icGFzc3dvcmQiXSB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMTJweDsKICBtYXJnaW4tYm90dG9tOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkICNmOWM3NGY7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzQ0NDsKICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4zcyBlYXNlLWluLW91dDsKfQoKaW5wdXRbdHlwZT0idGV4dCJdOmZvY3VzLAppbnB1dFt0eXBlPSJlbWFpbCJdOmZvY3VzLAppbnB1dFt0eXBlPSJwYXNzd29yZCJdOmZvY3VzIHsKICBib3JkZXItY29sb3I6ICNmZjZiNmI7Cn0KCmlucHV0OjpwbGFjZWhvbGRlciB7CiAgY29sb3I6ICM4ODg7CiAgZm9udC1zdHlsZTogaXRhbGljOwp9CgpidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNlNzFkMzY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMnB4IDI0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZS1pbi1vdXQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmNmI2YjsKfQ==

1. `autofocus`: автоматично встановлює фокус на полі введення при завантаженні сторінки.
2. `required`: позначає поле введення як обов'язкове, не дозволяючи відправити форму, якщо воно порожнє.
3. `placeholder`: надає підказку або приклад тексту для поля введення.
4. `for` та `id`: пов'язує мітку з полем введення для покращення доступності.
5. `type`: визначає тип даних, які очікуються у полі введення (наприклад, text, email, password).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICA8bGFiZWwgZm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgcGxhY2Vob2xkZXI9IkpvaG4iIGF1dG9mb2N1cyAvPgoKICAgICAgPGxhYmVsIGZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgIDxpbnB1dAogICAgICAgIHR5cGU9ImVtYWlsIgogICAgICAgIGlkPSJlbWFpbCIKICAgICAgICBuYW1lPSJlbWFpbCIKICAgICAgICBwbGFjZWhvbGRlcj0iZXhhbXBsZUBnbWFpbC5jb20iCiAgICAgICAgcmVxdWlyZWQKICAgICAgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0icGFzc3dvcmQiIGlkPSJwYXNzd29yZCIgbmFtZT0icGFzc3dvcmQiIHJlcXVpcmVkIC8+CgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICA8L2Zvcm0+CiAgPC9ib2R5Pgo8L2h0bWw+

Вивчайте основи HTML (HyperText Markup Language), фундаменту веб-розробки. Цей курс для початківців охоплює теги, атрибути, елементи та структурування веб-сторінок. Отримайте практичні навички створення заголовків, абзаців, списків, зображень, посилань, форм і таблиць. Ознайомтеся з найкращими практиками, оптимізацією та веб-доступністю. Почніть свій шлях у веб-розробці з HTML.

Дослідження принципів роботи вебу. Вивчення шляхів передачі даних через мережі, ознайомлення з роллю протоколів, розкриття суті IP-адрес і доменних імен. Отримання загального уявлення про взаємодію веб-браузерів і серверів для доставки веб-контенту.

Дізнайтеся про можливості тегів для структурування контенту: від заголовків і абзаців до списків і таблиць. Ознайомтеся зі способами розширення елементів за допомогою атрибутів.

Основи структури HTML-документа. Вивчення складових HTML-документа, зокрема декларації doctype, head та body. Розуміння призначення кожного елемента та їхнього внеску в загальну структуру вебсторінки.

Покращення привабливості вебсторінки за допомогою медіа, таких як зображення, аудіо та відео. Робота зі структурованими табличними даними у вигляді таблиць.

Дослідження багатофункціональності HTML-форм. Вивчення проєктування інтуїтивно зрозумілих і зручних для користувача форм із використанням основних концепцій і технік. Ознайомлення з тим, як форми забезпечують взаємодію користувача та надсилання даних на вебсайтах.

Завдання: Створення Форми з Полями Введення та Мітками

Мета

Завдання