Управление кнопками отправки в HTML: wizard, Enter, tabindex

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

Каждой кнопке присваивается уникальный атрибут name и value для их идентификации при обработке формы сервером.

<form method="post">
    <input type="submit" name="submitAction" value="Сохранить">
    <input type="submit" name="submitAction" value="Удалить">
</form>

Пример обработки данных на сервере на языке PHP:

switch ($_POST['submitAction']) {
    case 'Сохранить': 
        // Логика сохранения
        break;
    case 'Удалить':
        // Логика удаления
        break;
}

Такой подход упрощает обработку данных и чётко разграничивает функционал кнопок.

Определение порядка отправки

Для отправки нужной формы при нажатии Enter, кнопки должны быть правильно расположены в HTML коде.

<form method="post">
    <!-- Визуально важная кнопка Далее -->
    <input type="submit" class="float-right" name="navigate" value="Далее">
    <!-- Кнопка Назад -->
    <input type="submit" name="navigate" value="Назад">
</form>

Используйте CSS для визуального расположения кнопки "Далее" справа, минуя JavaScript:

.float-right {
    float: right; /* Расположение элемента справа */
}

.clear-buttons::after {
    content: "";
    display: table;
    clear: both; /* Очистка после плавающих элементов */
}

Скрытый метод для последовательных действий клавиши 'Enter'

Если стилизация не позволяет явного порядка кнопок, используйте скрытый input для установления действия по умолчанию:

<form method="post">
    <div style="display:none;">
        <input type="submit" name="defaultAction" value="По умолчанию">
    </div>
    <!-- Другие кнопки -->
</form>

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

Выбор основной кнопки с помощью атрибута 'default'

HTML5 предлагает возможность назначить главное действие формы с помощью formaction, что переопределяет action:

<form method="post" action="/DefaultAction">
    <input type="submit" name="submitAction" value="Сохранить">
    <input type="submit" formaction="/SpecialAction" name="submitAction" value="Особое">
</form>

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

Различение действий на стороне сервера

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

if (isset($_POST['submitAction'])) {
    $action = $_POST['submitAction'];
    // Действия в зависимости от значения
}

Эта методика позволяет контролировать поток данных и отвечать на потребности пользователя.

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

Данные формы можно представить в виде поезда, направление которого зависит от выбранной кнопки.

Кнопка 1 направит "поезд" в «Город Валидации» для проверки "билетов" (данных). Кнопка 2 отвезет его прямо в «Город Базы Данных», где данные будут обработаны.

Когда кнопки на борту не предназначены для отправки

Для кнопок, выполняющих функции на стороне клиента и не отправляющих форму, следует использовать <input type="button">:

<form method="post">
    <input type="submit" name="submitAction" value="Отправить">
    <input type="button" onclick="someFunction();" value="Не отправлять">
</form>

Такая кнопка позволяет выполнять скрипты без отправки формы.

Полезные советы и потенциальные недостатки

• Для отправки формы используйте type="submit".
• Проверяйте действия на сервере, не полагаясь исключительно на клиентскую сторону.
• Плавающие элементы упрощают дизайн без JavaScript. Убедитесь, что вы правильно их очистили.
• Обезопасьте согласованное поведение в различных браузерах при изменении порядка кнопок с помощью CSS.
• С точки зрения доступности: упростите навигацию с клавиатуры, правильно размещая элементы в HTML, минимизируя использование tabindex.

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

1. HTML: элементы форм – основы работы с формами и примеры.
2. <form>: Элемент формы – HTML: HyperText Markup Language | MDN – подробная информация о формах и их атрибутах.
3. Как структурировать веб-форму – Учим веб-разработку | MDN – руководство по сложным аспектам использования форм и кнопок отправки.
4. HTML – Две кнопки отправки в одной форме – Stack Overflow – обсуждение, с советами от сообщества и примерами кода.
5. Учимся работать с формами | web.dev – создание форм для улучшения работы и опыта пользователей.
6. Тщательное руководство по удобству веб-форм — Smashing Magazine – использование элементов форм для улучшения удобства.
7. Прогрессивная валидация форм — A List Apart – продвинутые методы валидации для улучшения взаимодействия.