Атрибут autofocus
Атрибут autofocus в HTML используется для установки фокуса на определенный элемент формы при загрузке страницы. Когда атрибут autofocus присутствует в теге элемента формы, этот элемент автоматически получает фокус, что позволяет пользователям сразу начать вводить данные без необходимости щелкать на поле ввода.
Пример использования атрибута autofocus:
В данном примере, при загрузке страницы, поле ввода с id "name" будет автоматически получать фокус, что позволит пользователю сразу начать вводить свое имя.
Атрибут autofocus может быть использован с различными элементами формы, такими как текстовые поля, поля для ввода пароля, чекбоксы и радиокнопки. Однако, рекомендуется использовать его с умеренностью, чтобы не создавать ненужных проблем для пользователей, особенно для тех, кто использует вспомогательные технологии или имеет особые потребности в доступности.
#html | #теория
Атрибут autofocus в HTML используется для установки фокуса на определенный элемент формы при загрузке страницы. Когда атрибут autofocus присутствует в теге элемента формы, этот элемент автоматически получает фокус, что позволяет пользователям сразу начать вводить данные без необходимости щелкать на поле ввода.
Пример использования атрибута autofocus:
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" autofocus>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Отправить">
</form>
В данном примере, при загрузке страницы, поле ввода с id "name" будет автоматически получать фокус, что позволит пользователю сразу начать вводить свое имя.
Атрибут autofocus может быть использован с различными элементами формы, такими как текстовые поля, поля для ввода пароля, чекбоксы и радиокнопки. Однако, рекомендуется использовать его с умеренностью, чтобы не создавать ненужных проблем для пользователей, особенно для тех, кто использует вспомогательные технологии или имеет особые потребности в доступности.
#html | #теория
👍3
Какой псевдокласс сработает при установке курсора в текстовое поле?
Anonymous Quiz
21%
:hover
14%
:active
2%
:not(:disabled)
55%
:focus
3%
:visited
5%
Посмотреть ответы
Задача: Создание интерактивной формы регистрации
Описание задачи:
Создайте простую веб-страницу с формой регистрации. Форма должна содержать поля для ввода имени, электронной почты и пароля. Пользователь должен увидеть сообщение об ошибке, если введенные данные не соответствуют следующим требованиям:
- Имя: не может быть пустым и должно содержать минимум 3 символа.
- Электронная почта: должна быть в формате email (например, user@example.com).
- Пароль: должен содержать минимум 8 символов, хотя бы одну цифру и одну заглавную букву.
Требования:
- HTML для создания формы.
- CSS для стилизации формы.
- JavaScript для проверки введенных данных в реальном времени и отображения соответствующих сообщений об ошибках.
Шаги:
- Создайте HTML файл с формой.
- Стилизуйте форму с помощью CSS.
- Добавьте JavaScript код для валидации полей формы в реальном времени.
#домашка
Описание задачи:
Создайте простую веб-страницу с формой регистрации. Форма должна содержать поля для ввода имени, электронной почты и пароля. Пользователь должен увидеть сообщение об ошибке, если введенные данные не соответствуют следующим требованиям:
- Имя: не может быть пустым и должно содержать минимум 3 символа.
- Электронная почта: должна быть в формате email (например, user@example.com).
- Пароль: должен содержать минимум 8 символов, хотя бы одну цифру и одну заглавную букву.
Требования:
- HTML для создания формы.
- CSS для стилизации формы.
- JavaScript для проверки введенных данных в реальном времени и отображения соответствующих сообщений об ошибках.
Шаги:
- Создайте HTML файл с формой.
- Стилизуйте форму с помощью CSS.
- Добавьте JavaScript код для валидации полей формы в реальном времени.
#домашка
👍3
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Микрофронтенды
2. Оптимизация производительности веб сайтов
3. Атрибут autofocus
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик РУТ КОД
2. Frontend-разработчик OWNR SOLUTIONS
3. Frontend-разработчик
Лучшие дизайн вакансии @job_webdesign:
1. UI/UX дизайнер
2. Web-дизайнер ZephyrLab
3. Web-дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Микрофронтенды
2. Оптимизация производительности веб сайтов
3. Атрибут autofocus
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик РУТ КОД
2. Frontend-разработчик OWNR SOLUTIONS
3. Frontend-разработчик
Лучшие дизайн вакансии @job_webdesign:
1. UI/UX дизайнер
2. Web-дизайнер ZephyrLab
3. Web-дизайнер
#лучшеезанеделю
🌭1
С помощью какого ключевого слова можна присвоить метод самой функции-классу, а не ее "prototype"?
Anonymous Quiz
18%
public
30%
get
29%
set
23%
static
👍6👎1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Как создать простую галерею изображений с увеличением по клику
2. CSS margin-block
3. Как сделать светлую и темную тему?
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик Тильда
2. HTML верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web дизайнер
3. UI-UX дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Как создать простую галерею изображений с увеличением по клику
2. CSS margin-block
3. Как сделать светлую и темную тему?
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик Тильда
2. HTML верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web дизайнер
3. UI-UX дизайнер
#лучшеезанеделю
👍3
Какой тег определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации?
Anonymous Quiz
1%
<main>
91%
<aside>
2%
<header>
2%
<main>
4%
Посмотреть ответы
👍10
Задача: Фильтрация и сортировка списка пользователей
Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).
Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:
Пример выходных данных:
Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.
#домашка
Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).
Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:
const users = [
{ name: 'Alice', age: 25, isActive: true },
{ name: 'Bob', age: 30, isActive: false },
{ name: 'Charlie', age: 20, isActive: true },
{ name: 'David', age: 35, isActive: true },
{ name: 'Eve', age: 28, isActive: false }
];
Пример выходных данных:
['Charlie', 'Alice', 'David']
Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.
#домашка
👍5