Кнопки форми

Кнопки є важливим елементом будь-якої HTML-форми. Розглянемо три основні типи кнопок, їх призначення та стилізацію.

Типи кнопок ↑ до змісту

1. Кнопка надсилання даних — <input type="submit"> або <button type="submit">. Надсилає дані форми на сервер. Атрибут value задає текст на кнопці.

2. Кнопка очищення форми — <input type="reset"> або <button type="reset">. Повертає всі поля до початкових значень.

3. Кнопка загального призначення — <input type="button"> або <button type="button">. Використовується для виклику сценаріїв JavaScript через атрибут onclick.

Демонстрація з обробкою submit ↑ до змісту

Заповніть поле і натисніть кнопку "Надіслати" — форма не перезавантажить сторінку, а покаже повідомлення (перехоплено JavaScript).

HTML-код форми ↑ до змісту

<form id="demoForm">
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name" placeholder="Введіть ім'я">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Введіть email">

    <button type="submit">Надіслати</button>
    <button type="reset">Очистити</button>
    <button type="button" id="normalBtn">Звичайна кнопка</button>
</form>

Копіювати

CSS-код стилізації кнопок ↑ до змісту

/* Стилізація кнопок */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
}

/* Submit – зелена */
.btn-submit {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.4);
}
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 204, 113, 0.6);
}

/* Reset – помаранчева */
.btn-reset {
    background: linear-gradient(135deg, #e67e22, #d35400);
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.4);
}
.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(230, 126, 34, 0.6);
}

/* Звичайна – синя */
.btn-normal {
    background: linear-gradient(135deg, #3498db, #2980b9);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}
.btn-normal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.6);
}

Копіювати