Кнопки и формы

Интерактивные элементы

Сайт не только должен рисовать элементы, но и как-то взаимодействовать с пользователем.

За это отвечают два вида элементов:

• <button> — кнопки. На них можно нажимать
• <input>, <textarea>, <select> — поля ввода. В них можно писать

Кнопки

Кнопка создаётся тегом <button>.

<button>Нажми меня</button>

Обычная кнопка

У кнопки есть три типа:

• type="button" — обычная кнопка (ничего не делает)
• type="submit" — отправляет форму (по умолчанию)
• type="reset" — очищает форму

<button type="button">Обычная</button>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>

Кнопку можно отключить — она не будет нажиматься:

<button disabled>Недоступна</button>

Задания по кнопкам ฅ^•ω•^ฅ

1. Создай две кнопки: обычную и отключённую

2. Сделай кнопку с типом submit и кнопку с типом reset

Стилизация кнопок

По умолчанию кнопки выглядят скучно. Но мы можем сделать их красивыми через CSS.

button {
    background: #4a6cf7;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

Разберём каждое свойство:

Стилизованная кнопка

Кнопка при наведении — через псевдокласс :hover:

button:hover {
    background: #3a5bd9;
    transform: scale(1.05);
}

Кнопка при нажатии — через псевдокласс :active:

button:active {
    transform: scale(0.95);
}

Отключённая кнопка — через псевдокласс :disabled:

button:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

Сравнение до и после CSS:

Поля ввода

Поля ввода создаются тегом <input>. У него есть атрибут type, который говорит: что это за поле.

Текстовое поле:

<input type="text" placeholder="Введите имя">

Поле для пароля — символы скрываются точками:

<input type="password" placeholder="Пароль">

Поле для email:

<input type="email" placeholder="example@mail.ru">

Поле для числа:

<input type="number" min="1" max="100">

Разные типы полей

Чекбокс — галочка:

<input type="checkbox" id="agree">
<label for="agree">Согласен с условиями</label>

Радиокнопка — выбор одного из вариантов:

<input type="radio" name="color" id="red">
<label for="red">Красный</label>
<input type="radio" name="color" id="blue">
<label for="blue">Синий</label>

Чекбокс и радиокнопки

Многострочное поле — тег <textarea>:

<textarea rows="4" cols="40" placeholder="Ваш комментарий..."></textarea>

Поле ввода текста

Полезные атрибуты input:

Задания по полям ≽^◕ ˕ ◕^≼

1. Создай текстовое поле с подсказкой «Введите своё имя»

2. Добавь поле для пароля и поле для email

3. Сделай чекбокс «Согласен с правилами» с подписью через <label>

Выпадающие списки и особые поля

Выпадающий список — тег <select>:

<select>
    <option>Москва</option>
    <option>Питер</option>
    <option>Казань</option>
</select>

Поле для выбора даты:

<input type="date">

Поле для выбора цвета:

<input type="color">

Ползунок:

<input type="range" min="0" max="100" value="50">

Загрузка файла:

<input type="file">

Особые поля ввода

Форма целиком

Форма — это контейнер <form>, который объединяет поля и кнопки.

Когда пользователь нажимает кнопку submit, данные из формы отправляются на сервер.

<form action="/send" method="post">
    <input type="text" placeholder="Имя" required>
    <input type="email" placeholder="Email" required>
    <input type="password" placeholder="Пароль" required>
    <button type="submit">Зарегистрироваться</button>
</form>

Атрибуты формы:

Стилизация формы

Поля ввода тоже можно и нужно стилизовать.

input, textarea, select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

input:focus, textarea:focus, select:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15);
}

Что тут важно:

• width: 100% — поле растягивается на всю ширину родителя
• border-radius — скруглённые углы
• outline: none — убирает стандартную синюю обводку браузера
• :focus — стиль, когда поле выбрано (кликнули в него)

Стилизованное поле в фокусе

Сравнение до и после CSS:

СПЕЦЗАДАНИЕ

Клепаем форму регистрации

Что должно быть в форме:

• <form> — контейнер всей формы
• <input type="text"> — поле «Имя»
• <input type="email"> — поле «Email»
• <input type="password"> — поле «Пароль»
• <input type="number"> — поле «Возраст»
• <select> — выбор города
• <input type="checkbox"> — «Согласен с правилами»
• <button type="submit"> — кнопка «Зарегистрироваться»

Стилизуй:

• Поля: рамка, скругление, отступы, :focus
• Кнопку: цвет, :hover, :active
• Форму: background, padding, border-radius

Пример формы регистрации