5. Файлы и специальные поля
⑭ file
Для чего: Загрузка файлов.
Особенности:
Обязателен enctype="multipart/form-data" в <form>.
Атрибут multiple для нескольких файлов.
html
Copy
Download
Run
<input type="file" name="document" accept=".pdf,.docx">
⑮ color
Для чего: Выбор цвета (палитра).
html
Copy
Download
Run
<input type="color" name="favcolor" value="#ff0000">
⑯ hidden
Для чего: Скрытое поле (данные не видны пользователю).
Использование: Передача ID, токенов.
html
Copy
Download
Run
<input type="hidden" name="token" value="abc123">
6. Кнопки
⑰ submit
Для чего: Отправка формы.
html
Copy
Download
Run
<input type="submit" value="Отправить">
⑱ reset
Для чего: Сброс формы к значениям по умолчанию.
html
Copy
Download
Run
<input type="reset" value="Очистить">
⑲ button
Для чего: Простая кнопка (без действия по умолчанию).
Применение: Для JavaScript-обработчиков.
html
Copy
Download
Run
<input type="button" value="Нажми меня" onclick="alert('Hello!')">
7. Особые типы
⑳ image
Для чего: Графическая кнопка отправки.
Особенности:
Передаёт координаты клика (x, y).
html
Copy
Download
Run
<input type="image" src="button.png" alt="Отправить">
Итог
Тип |
Назначение |
Ключевые атрибуты |
text |
Текст (одна строка) |
maxlength, pattern |
password |
Пароль |
required |
Валидация формата |
||
number |
Число |
min, max, step |
date |
Дата |
Календарь |
checkbox |
Несколько вариантов |
checked |
radio |
Один вариант из группы |
name должен совпадать |
file |
Загрузка файла |
accept, multiple |
submit |
Кнопка отправки |
value (текст на кнопке) |
Советы:
Для валидации используйте required, pattern, min/max.
На мобильных устройствах некоторые типы (tel, email) меняют клавиатуру.
Тестируйте формы в разных браузерах (особенно date и color).
1. Управление галереей проектов (карусель)
Код:
javascript
Copy
Download
const gallery = document.querySelector('.gallery-container');
const prevBtn = document.querySelector('.gallery-arrow.prev');
const nextBtn = document.querySelector('.gallery-arrow.next');
prevBtn.addEventListener('click', () => {
gallery.scrollBy({
left: -gallery.offsetWidth, // Прокрутка на ширину галереи влево
behavior: 'smooth' // Плавная анимация
});
});
nextBtn.addEventListener('click', () => {
gallery.scrollBy({
left: gallery.offsetWidth, // Прокрутка на ширину галереи вправо
behavior: 'smooth'
});
});
Как работает:
При клике на кнопки «Назад» (.prev) и «Вперед» (.next) галерея плавно прокручивается на один экран влево или вправо.
gallery.offsetWidth — получает текущую ширину контейнера галереи.
behavior: 'smooth' — включает анимированную прокрутку.
