Інпут у вигляді кнопки в HTML

Вивчаємо кнопки форми через input submit та reset для відправлення і очищення даних.

Інпут у вигляді кнопки в HTML

У HTML елемент input може використовуватися не тільки для введення тексту, але й для створення кнопок форми.

submit — кнопка для відправлення форми.
reset — кнопка для очищення всіх полів форми та повернення початкових значень.

Кнопка submit

Тип submit створює кнопку, яка відправляє дані форми на сервер.

<form>

  <input type="text" name="name">

  <input type="submit" value="Відправити">

</form>

<form action="/send">

  <label>
    Ім'я:
    <input type="text" name="username">
  </label>

  <br>

  <input 
    type="submit" 
    value="Надіслати"
  >

</form>

Кнопка reset

Тип reset очищає введені користувачем значення і повертає форму до початкового стану.

<form>

  <input 
    type="text" 
    value="Андрій"
  >

  <input 
    type="reset" 
    value="Очистити"
  >

</form>

Стилізація кнопок через CSS

input[type="submit"],
input[type="reset"] {
  padding: 10px 20px;
  border: none;
  color: white;
  background-color: blue;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: darkblue;
}

❗ Важливо:

У сучасних проєктах часто використовують тег button замість input для кнопок, оскільки він дозволяє додавати складніший вміст усередину кнопки.

Практичне завдання

📌 Завдання:

№1. Створіть форму з полем для введення імені.
№2. Додайте кнопку submit з текстом «Відправити».
№3. Додайте кнопку reset з текстом «Очистити».

<!-- Початковий код -->

<form>

  <input type="text">

</form>

💡 Показати підказку

Для створення кнопки використовуйте input з атрибутом type="submit" або type="reset".

✅ Показати відповідь

<form>

  <label>
    Ім'я:
    <input type="text">
  </label>

  <br>

  <input 
    type="submit" 
    value="Відправити"
  >

  <input 
    type="reset" 
    value="Очистити"
  >

</form>