Кнопки (button, input type='submit', input type='reset')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 23
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
Кнопки — это основа любого интерактивного сайта. С их помощью пользователи отправляют формы, подтверждают действия или просто взаимодействуют с интерфейсом. В этом наборе заданий мы разберем, как создавать кнопки с помощью тега `<button>` и `<input>`. Ты научишься делать стандартные кнопки, а также кнопки для отправки и сброса данных в формах. Попрактикуемся в добавлении атрибутов, чтобы управлять поведением кнопок, например, делать их неактивными. Задания построены от простого к сложному, чтобы ты смог постепенно закрепить материал на практике. Никакой теории, только код и мгновенный результат!
Список тем

Создание простой кнопки

id: 37848_btn-01

Создай простую кликабельную кнопку с текстом 'Кликни'. Для этого нужно правильно указать имя тега. Это самый распространенный способ создания кнопки.

CSS
.btn {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 16px;
}
.btn:hover {
  background-color: #e0e0e0;
}
HTML
<input1 class="btn">Кликни</input1>
Для создания стандартной кнопки используется парный тег `<button>`. Не забудь, что его нужно закрыть. В данном задании закрывающий тег уже есть, нужно вписать только открывающий.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Тип кнопки

id: 37848_btn-02

У каждой кнопки есть тип, который определяет её поведение. Добавь атрибут `type` со значением `button`, чтобы создать обычную кнопку, которая не отправляет форму по умолчанию.

CSS
.btn {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 16px;
}
.btn:hover {
  background-color: #e0e0e0;
}
HTML
<button input1="input2" class="btn">Обычная кнопка</button>
Атрибут `type` для тега `<button>` может принимать значения `button`, `submit` или `reset`. В данном случае нам нужен тип `button` для создания кнопки общего назначения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кнопка через input

id: 37848_btn-03

Кнопки можно создавать и с помощью тега `<input>`. Создай кнопку, указав правильное значение для атрибута `type`. Текст на такой кнопке задаётся через атрибут `value`.

CSS
.btn {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 16px;
  -webkit-appearance: none;
}
HTML
<input type="input1" value="Кнопка из input" class="btn">
Чтобы тег `<input>` стал кнопкой, его атрибуту `type` нужно присвоить значение `button`. В отличие от тега `<button>`, `<input>` является одиночным тегом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кнопка отправки формы

id: 37848_btn-04

Кнопки часто используются для отправки данных формы на сервер. Используй тег `<input>` и укажи правильный тип, чтобы создать кнопку 'Отправить'.

CSS
.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-container input[type='text'] {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.submit {
  background-color: #28a745;
  color: white;
}
.submit:hover {
  background-color: #218838;
}
HTML
<form class="form-container" onsubmit="return false;">
  <input type="text" placeholder="Ваше имя">
  <input input1="submit" value="Отправить" class="btn submit">
</form>
Для создания кнопки, которая отправляет форму, используется значение `submit` в атрибуте `type`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кнопка сброса формы

id: 37848_btn-05

Иногда нужно очистить все поля формы. Для этого есть специальный тип кнопки. Создай кнопку 'Сбросить' с помощью тега `<button>`, которая будет очищать поле ввода.

CSS
.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-container input[type='text'] {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.reset {
  background-color: #dc3545;
  color: white;
}
.reset:hover {
  background-color: #c82333;
}
HTML
<form class="form-container">
  <input type="text" value="Предварительно заполненные данные">
  <button type="input1" class="btn reset">Сбросить</button>
</form>
Чтобы кнопка сбрасывала значения в полях формы до исходных, используй `type="reset"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Неактивная кнопка

id: 37848_btn-06

Иногда кнопку нужно временно отключить, чтобы пользователь не мог на неё нажать. Добавь специальный логический атрибут, чтобы сделать кнопку неактивной.

CSS
.btn {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
.btn:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  border-color: #ced4da;
}
HTML
<button type="button" class="btn" input1>Недоступна</button>
Чтобы сделать элемент неактивным, используется атрибут `disabled`. Ему не нужно значение, достаточно просто его наличия в теге.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная форма

id: 37848_btn-07

Теперь соберем все вместе. В форме есть три кнопки с разным поведением. Правильно укажи значения атрибута `type` для каждой из них: 'Отправить', 'Сбросить' и 'Проверить'.

CSS
.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-container input[type='text'] {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  color: white;
}
.submit {
  background-color: #28a745;
}
.reset {
  background-color: #dc3545;
}
.check {
  background-color: #007bff;
}
HTML
<form class="form-container" onsubmit="return false;">
  <input type="text" value="Какие-то данные">
  <div class="button-group">
    <button type="input1" class="btn submit">Отправить</button>
    <button type="input2" class="btn reset">Сбросить</button>
    <button type="input3" class="btn check">Проверить</button>
  </div>
</form>
Вспомни три основных типа кнопок: `submit` для отправки, `reset` для сброса и `button` для обычных действий, которые не влияют на форму напрямую (например, для запуска скрипта).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кнопка с вложенными элементами

id: 37848_btn-08

Преимущество тега `<button>` в том, что в него можно вкладывать другие HTML-элементы, например, иконки. Создай кнопку, которая будет содержать иконку и текст. В отличие от `<input>`, тег `<button>` является парным.

CSS
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid #007bff;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 16px;
}
.icon-btn img {
  width: 16px;
  height: 16px;
}
HTML
<input1 type="submit" class="icon-btn">
  <img src="https://naytikurs.ru/img/11s.svg" alt="Иконка">
  <span>Сохранить</span>
<input2>
Чтобы создать кнопку с содержимым, используй парный тег `<button>`. Укажи открывающий тег `<button>` и закрывающий `</button>`. Между ними можно размещать другие теги, такие как `<img>` и `<span>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру