Установка дефолтной кнопки отправки в HTML форме

Быстрый ответ

Для назначения основной кнопки отправки используйте атрибут type="submit". При нажатии на клавишу Enter в форме эта кнопка автоматически активируется. Все прочие кнопки определите как type="button" и привяжите к ним обработчики событий с использованием JavaScript, следуйте приведенному ниже примеру:

<form>
  <!-- Эта кнопка сработает при нажатии Enter -->
  <button type="submit">Отправить</button>
  
  <!-- Управление этой кнопкой осуществляется через JavaScript -->
  <button type="button" onclick="alert('Клик!')">Другое действие</button>
</form>

Нажатие Enter активирует функцию кнопки Отправить, управление остальными кнопками осуществляется с помощью JavaScript.

Как следует работать c кнопкой по умолчанию

Если в форме есть несколько кнопок отправки, стоит придерживаться определенных правил и рекомендаций:

Невидимые кнопки-заглушки: утайка с целью

Если главная кнопка в коде не расположена на первом месте, можно использовать невидимую кнопку-заглушку. Разместите ее в начале формы и присвойте ей те же значения атрибутов name и value, что и у вашей основной кнопки:

<form>
  <input type="text">
  <!-- Невидимая кнопка-заглушка размещена вначале для главного действия -->
  <button type="submit" name="action" value="default" style="display:none"></button>
  
  <!-- Остальные дополнительные кнопки -->
  <button type="submit" name="action" value="save">Сохранить</button>
  <button type="submit" name="action" value="cancel">Отменить</button>
</form>

Сокрытие кнопки с помощью стилей display: none или visibility: hidden делает ее недоступной не только визуально, но и для экранных чтецов, влияя на доступность.

Подробнее об этом расскажет наш спикер на видео

Изменение порядка с использованием CSS-свойства float

Чтобы визуально переместить кнопку "Далее" в начало формы без корректировки HTML, используйте свойство float css:

.left { float: left; }
.right { float: right; }

<form>
  <!-- Визуальный порядок кнопок меняется -->
  <button type="submit" class="left">Отменить</button> 
  <button type="submit" class="right">Далее</button> 
  <!-- Кнопка "Далее" теперь кажется первой -->
</form>

Применение скриптов: мощь кода

JavaScript или метод jQuery .prepend() позволяют изменить расположение кнопок. Но не допускайте, чтобы «чудеса» скриптов нарушили логику формы и усложнили её использование. Вполне возможно сделать элементы невидимыми за пределами экрана или использовать техники скрытого переполнения:

$(document).ready(function() {
  $("<button type='submit' name='action' value='default'></button>")
    .css({position: "absolute", left: "-9999px", width: "1px", height: "1px", overflow: "hidden"})
    .prependTo("form");
});

Ориентация на удобство: Пользователь в центре внимания

Интерфейс вашего приложения должен быть удобным и интуитивно понятным. Главная кнопка должна находиться там, где ее ожидают пользователи. Не забудьте провести кроссбраузерное тестирование для обеспечения корректной работы формы в разных браузерах.

Визуализация

Выбор основной кнопки для отправки данных формы можно уподобить выбору капитана футбольной команды:

Команда (📄): [Кнопка 1 ⚽, Кнопка 2 ⚽, Кнопка 3 ⚽ (Капитан), Кнопка 4 ⚽]

В ходе игры (взаимодействие с формой), когда приходит время забить гол (отправить данные):

Если ни одна кнопка не была нажата:
- 🏃‍♂️💨 Мяч (данные формы) автоматически передаётся к Капитану (кнопке по умолчанию)

Капитан ведет игру, даже не получая прямых указаний. 🎯🏆

Взаимодействие и доступность

Сделайте использование формы максимально простым и доступным для всех пользователей, включая людей с ограниченной способностью восприятия.

Визуальное выделение кнопки по умолчанию с помощью CSS

Используйте заметные цвета или стили для основной кнопки через CSS-классы:

button.default {
  /* Стили для основной кнопки */
  font-weight: bold;
  border-color: #007bff;
  background-color: #007bff;
  color: white;
}

<form>
  <button type="submit" class="default">Отправить</button>
  <button type="button">Другое действие</button>
</form>

Тип "button" для вспомогательных действий

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

<form>
  <button type="submit" class="default">Отправить</button>
  <button type="button">Сохранить как черновик</button>
  <button type="button">Предпросмотр</button>
</form>

Гарантирование работы клавиши "Enter"

Убедитесь, что нажатие Enter в любом текстовом поле активирует основную кнопку. Тестирование этой функциональности в разных браузерах и на различных устройствах обеспечит удобство использования.

Скрипты: Поставьте удобство пользователя на первое место

Скрипты могут быть полезны, но их использование требует тщательного продумывания. При использовании скриптов для установки кнопки по умолчанию, убедитесь, что это не отражается негативно на пользовательском опыте и не ограничивает доступность функций.

Полезные материалы

1. Как структурировать веб-форму – Обучение веб-разработке | MDN — Руководство по созданию структурированных HTML-форм.
2. HTML Forms – W3Schools — Инструкция и примеры работы с HTML-формами.
3. Отправка формы нажатием на Enter без кнопки отправки – Stack Overflow — Советы по использованию клавиши Enter для отправки формы.
4. Емкое руководство по удобству веб-форм — Smashing Magazine — Подробное рассмотрение вопроса удобства веб-форм.
5. HTML Standard – WHATWG — Официальная спецификация HTML для методов отправки форм.
6. Автозаполнение | web.dev — Советы по улучшению пользовательского опыта с помощью функции автозаполнения.
7. JavaScript – Валидация форм – TutorialsPoint — Уроки валидации форм на JavaScript.