0Pricing
HTML Academy · Урок

Элемент button: submit, reset и button

Запускайте отправку формы, сброс или пользовательские действия с помощью кнопок

«Элемент button: submit, reset и button» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент кнопки

Элемент <button> — основной способ создания интерактивных элементов управления:

<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
<button type="button">Do Something</button>

<!-- Three types, each with a different default behavior -->
<!-- Always specify type — the default is submit inside forms -->

Тип отправки

type="submit" отправляет форму при нажатии:

<form action="/register" method="post">
  <input type="email" name="email">
  <button type="submit">Create Account</button>
</form>
<!-- Triggers form validation, then sends the form data -->
<!-- Also triggered by pressing Enter in most text inputs -->

Тип сброса

type="reset" очищает все поля формы, устанавливая значения по умолчанию:

<form>
  <input type="text" name="name" value="">  <!-- empty default -->
  <input type="number" name="qty" value="1">  <!-- default: 1 -->
  <button type="reset">Clear</button>
</form>
<!-- Clicking reset restores qty to 1 and clears name -->
<!-- Use sparingly — users often accidentally reset forms -->

Тип кнопки

type="button" по умолчанию ничего не делает — добавьте JavaScript:

<button type="button" id="toggle-theme">Toggle Dark Mode</button>

<script>
document.getElementById('toggle-theme').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});
</script>
<!-- type="button" prevents accidental form submission
     Always use this for non-submit buttons -->

Кнопка и поле отправки: сравнение

<button> предпочтительнее, чем <input type="submit">:

<!-- Old way (limited): -->
<input type="submit" value="Submit">

<!-- Modern way (flexible — can contain HTML): -->
<button type="submit">
  <svg><!-- icon --></svg>
  Submit Form
</button>
<!-- button can contain icons, emphasis, and any inline HTML
     input type=submit can only have plain text via the value attribute -->

Отключённая кнопка

Отключите кнопку с помощью атрибута disabled:

<button type="submit" disabled>Submit</button>
<!-- Disabled buttons:
  - Cannot be clicked
  - Not in tab order
  - NOT submitted with the form
  - Browser renders them grayed out -->

<!-- Enable/disable with JavaScript: -->
btn.disabled = true;
btn.disabled = false;

Шаблон состояния загрузки

Показывайте состояние загрузки, пока форма отправляется:

<button type="submit" id="submit-btn">
  <span id="btn-text">Submit</span>
  <span id="btn-spinner" hidden aria-hidden="true">⏳</span>
</button>

<script>
form.addEventListener('submit', () => {
  document.getElementById('submit-btn').disabled = true;
  document.getElementById('btn-text').textContent = 'Submitting...';
  document.getElementById('btn-spinner').hidden = false;
  document.getElementById('btn-spinner').removeAttribute('aria-hidden');
});
</script>

Переопределение действия и метода формы

Переопределяйте действие или метод формы для отдельной кнопки:

<form action="/save" method="post">
  <input type="text" name="title">

  <!-- Save: uses form defaults -->
  <button type="submit">Save Draft</button>

  <!-- Publish: overrides action and method -->
  <button type="submit" formaction="/publish" formmethod="post">
    Publish Now
  </button>
</form>

Кнопка с ARIA

Пользовательским кнопкам нужен ARIA, если они выглядят иначе, чем нативные кнопки:

<!-- Icon-only button -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true"><!-- X icon --></svg>
</button>

<!-- Toggle button -->
<button type="button" aria-pressed="false" id="bold-btn">
  Bold
</button>
<script>
document.getElementById('bold-btn').addEventListener('click', function() {
  const pressed = this.getAttribute('aria-pressed') === 'true';
  this.setAttribute('aria-pressed', !pressed);
});
</script>

Рекомендации по доступности кнопок

Список рекомендаций по доступности кнопок:

  • Всегда указывайте type — никогда не полагайтесь на значение по умолчанию
  • Используйте aria-label для кнопок только со значком
  • Используйте aria-pressed для кнопок-переключателей
  • Отключённые кнопки: рассмотрите вариант с aria-disabled="true" и JavaScript, чтобы они оставались доступными для фокусировки
  • Никогда не используйте <div> или <span> в качестве кнопок

Область нажатия и сенсорные цели

Кнопки должны иметь область нажатия достаточного размера для пользователей сенсорных устройств:

button {
  min-height: 44px;   /* Apple HIG minimum */
  min-width: 44px;    /* WCAG 2.5.5 (AAA) recommends 44x44 -->
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Increase tap area without changing visual size: */
button {
  position: relative;
}
button::before {
  content: '';
  position: absolute;
  inset: -8px;
}

Быстрая проверка

Что произойдёт, если не указать атрибут type у кнопки внутри формы?

Повторение: элемент кнопки

Основные сведения о кнопках:

  • type="submit" — отправляет форму
  • type="reset" — сбрасывает все поля к значениям по умолчанию
  • type="button" — поведения по умолчанию нет; добавьте JavaScript
  • Всегда указывайте type — по умолчанию используется submit
  • Предпочитайте <button>, а не <input type="submit">
  • Используйте aria-label для кнопок только со значком

Часто задаваемые вопросы

Урок «Элемент button: submit, reset и button» бесплатный?

Да — полный текст урока «Элемент button: submit, reset и button» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент button: submit, reset и button»?

Запускайте отправку формы, сброс или пользовательские действия с помощью кнопок Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Элемент button: submit, reset и button»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент form: action, method и enctype
  2. Типы input: text, password, email, number и tel
  3. Элемент label и доступность
  4. Элемент button: submit, reset и button
← Назад к HTML Academy