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

Мета

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

Завдання

Додати зручну для користувача форму на ваш сайт, підвищуючи залученість та взаємодію. Ваше завдання:

Для поля імені: створити текстове поле для введення імені користувача. Використати відповідні атрибути для забезпечення зручності.
1. Вказати відповідний type для текстового поля;
2. Встановити placeholder як John;
3. Зробити це поле активним за замовчуванням.
Для поля електронної пошти: створити поле для введення електронної пошти користувача. Забезпечити коректність даних за допомогою відповідних атрибутів.
1. Вказати правильний type для поля електронної пошти;
2. Встановити placeholder як example@gmail.com;
3. Зробити це поле обов'язковим для заповнення.
Для поля пароля: створити захищене поле для введення пароля, щоб забезпечити безпеку даних користувача. Використати відповідні атрибути для підвищення захисту даних.
1. Вказати правильний type для поля пароля;
2. Зробити це поле обов'язковим для заповнення.

index.html

index.css

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

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how each input attribute improves the user experience?

What other accessibility features can I add to this form?

How can I validate the form inputs before submission?

Awesome!

Completion rate improved to 2.56

Свайпніть щоб показати меню

Мета

Завдання

Додати зручну для користувача форму на ваш сайт, підвищуючи залученість та взаємодію. Ваше завдання:

Для поля імені: створити текстове поле для введення імені користувача. Використати відповідні атрибути для забезпечення зручності.
1. Вказати відповідний type для текстового поля;
2. Встановити placeholder як John;
3. Зробити це поле активним за замовчуванням.
Для поля електронної пошти: створити поле для введення електронної пошти користувача. Забезпечити коректність даних за допомогою відповідних атрибутів.
1. Вказати правильний type для поля електронної пошти;
2. Встановити placeholder як example@gmail.com;
3. Зробити це поле обов'язковим для заповнення.
Для поля пароля: створити захищене поле для введення пароля, щоб забезпечити безпеку даних користувача. Використати відповідні атрибути для підвищення захисту даних.
1. Вказати правильний type для поля пароля;
2. Зробити це поле обов'язковим для заповнення.

index.html

index.css

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

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 6