Приложение Singe Page: Если я не публикую значения форм на сервере и не использую проверку HTML, могу ли я прекратить использование тега <form>?

Question

Это скорее концептуальный вопрос.

TLDR: Поскольку я не публикую информацию о форме через HTTP на сервере, я также не использую проверку HTML5, есть ли что-нибудьЯ проигрываю, пока не использую <form> и традиционный HTML submit?

---

Я уже некоторое время использую React в проекте.

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

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

Я думал, что любая форма, которую я построил до сих пор, я мог бы сделать то же самое без тега html <form>.

На самом деле, все мои функции отправки компонентов формы имеют что-то вроде:

function onSubmit(event){
  event.preventDefault(); // BASICALLY DON'T SUBMIT ANYTHING AND LET MY CODE HANDLE THIS
  touchAllInputsValidateAndSubmit();
  return;
}

Поскольку я ничего не отправляю на сервер (я буду вызывать облачные функции Firebase)и я не полагаюсь на проверку HTML5, действительно ли мне нужно использовать <form> и <input type="submit"/> или <button type="submit"/>?

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

function SomeFormComponent() {
  const [formState,setFormState] = useState(); // STORE FORM INPUT VALUES IN STATE

  function handlePseudoSubmit() {
    callCloudFunction(formState);  // ON SUBMIT, PASS THE FORMSTATE TO A CLOUD FUNCTION
  }

  return(
    <React.Fragment>

      // Clickable divs for checkboxes
      // Regular inputs
      // Can use contenteditable divs
      // Whatever you can think of that could be part of a form

      <button onClick={handlePseudoSubmit}>
        Click to PseudoSubmit
      </button>

    </React.Fragment>
  );
}

---

ВОПРОС

Поскольку я не публикую информацию о формечерез HTTP на сервер, ни я использую проверку HTML5, есть ли что-нибудьЯ теряю, не используя <form> и традиционный HTML submit?

Answer 1

Я бы порекомендовал вам не использовать элемент <form>. Один из ваших главных приоритетов в коде - сделать его читабельным и выразить намерение. Вот введение MDN в элемент <form> :

Элемент HTML представляет раздел документа, который содержит интерактивные элементы управления для отправки информации на веб-сервер.

Поскольку вы не отправляете информацию на сервер, использование элемента <form> может привести к путанице.

Answer 2

Короткий ответ

Для вашего конкретного случая использования он вам, вероятно, не нужен, потому что затраты на проектирование, вероятно, намного больше, чем выгоды, которые вы получите (не такая уж и высокая рентабельность инвестиций,если есть).

На самом деле, в зависимости от формы, я бы, вероятно, все еще использовал бы элемент формы для захвата события onSubmit, поскольку существует два способа отправки формы:

1. Нажатие какой-либо кнопки отправки.
2. Нажатие ввода внутри формы.

Длинный ответ

Вы можете использовать элемент формы в качестве запасного варианта, когда JavaScript еще не загружен или никогда по какой-либо причине не загружается.Конечно, это может быть огромным крайним случаем, если вы так сильно инвестируете в JavaScript на своем сайте, но в идеальном мире :

1. Никаких предположений относительноподдержка JavaScript пользователем.
2. Все будет ухудшаться изящно (т.е. все будет работать без JavaScript).

Подумайте об этом с точки зрения электронной коммерции.Можете ли вы представить себе нажатие кнопки «Добавить в корзину», которая ничего не делала, потому что JavaScript еще не загружен?Вы все еще можете сделать отправку формы в качестве запасного варианта, но это также требует гораздо большего объема разработки, чтобы захватить эту публикацию формы и сделать то же самое, что было бы сделано на клиенте.

К счастью, с React Universal ApplicationВы можете использовать тот же код JavaScript на задней панели, который вы используете на передней панели.О чем подумать.

Альтернативный подход

Вместо публикации формы можно просто нажать кнопку «Добавить в корзину», чтобы перейти непосредственно на страницу корзины с некоторыми параметрами строки запроса, чтобы сообщить серверу, какойпункт и сколько количество добавить.JavaScript-код на стороне клиента не требуется!

Совет

При создании новой веб-страницы или компонента React я бы хотел использовать трехэтапный подход:

1. Startсначала с кусочками HTML.Посмотрите, как далеко вы можете получить без CSS или JavaScript любого рода.Сделайте так, чтобы ваш метод рендеринга возвращал некоторые примитивные элементы DOM (например, fieldsets , группы переключателей для выбора цвета и размера).Сосредоточьтесь на структуре HTML-документа, набросках , специальных возможностей и навигации с помощью клавиатуры.Подайте запрос на извлечение.
2. Добавьте свой CSS и сделайте так, чтобы он выглядел максимально привлекательно, но на этот раз вы проигнорируете JavaScript и увидите, как далеко вы можете зайти с этим.Используйте CSS :hover и другие псевдоклассы , чтобы получить интерактивное поведение без JS.Создайте еще один запрос на получение с этими изменениями (и снимками экрана)!
3. Последний шаг - ваш JavaScript.Добавьте как можно меньше, чтобы сделать работу, но сделать работу!Подайте ваш последний запрос на получение разрешения.