Challenge: Створення Форми з Полями Введення та Мітками
Свайпніть щоб показати меню
Мета
Покращення взаємодії користувача з сайтом шляхом створення інтерактивної форми, яка містить поля для введення імені, електронної пошти та пароля разом із відповідними мітками.
Завдання
Додати просту, зручну для користувача форму на сторінку. Дотримуйтесь наступних вимог:
- Поле для імені
- Використати текстове поле.
- Встановити підказку
John. - Зробити це поле активним за замовчуванням (autofocus).
- Поле для електронної пошти
- Використати поле для електронної пошти.
- Встановити підказку
example@gmail.com. - Зробити це поле обов'язковим.
- Поле для пароля
- Використати поле для пароля.
- Зробити це поле обов'язковим.
index.html
index.css
Підказка
autofocus: автоматичне фокусування на полі введення при завантаженні сторінки;required: позначає поле введення як обов'язкове, не дозволяючи відправити форму, якщо воно порожнє;placeholder: підказка або приклад тексту для поля введення;forтаid: зв'язують мітку з полем введення для покращення доступності;type: визначає тип даних, які очікуються у полі введення, наприклад, текст, email або пароль.
Розв'язок
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="John" autofocus />
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="example@gmail.com"
required
/>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 5. Розділ 6
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Секція 5. Розділ 6
