Навіщо використовувати тег форми, коли ви подаєте через ajax?

Філософське питання:

Скажімо, у мене є веб-програма, яка вимагає javascript та сучасний браузер, тому прогресивне вдосконалення не є проблемою. Якщо моя форма будується за допомогою javascript, і всі мої оновлення даних виконуються за допомогою ajax POST і PUT, чи справді є якась причина, щоб обернути мої елементи керування тегом форми? Якщо я все-таки збираюся використовувати тег, скажімо з семантичних чи структурних причин, чи є якась причина для використання параметрів дії та методу, які я збираюся ігнорувати? Мені здається, це затримка попередньої епохи.

Існує принаймні одна важлива функція взаємодії з користувачем, яка надається спеціально шляхом загортання входів всередину тегу форми:

Клавіша Enter вводить форму. Насправді, в Mobile Safari, це, як ви отримаєте «Go» кнопку , щоб з'явитися на клавіатурі .

Без форми, яка обертає вхідні дані, немає чого подавати.

Звичайно, ви можете забезпечити поведінку клавіш Enter за допомогою події натискання клавіші, але я не знаю, чи це працює для мобільних пристроїв. Я не знаю про вас, але я волів би працювати із семантикою, наданою браузером, ніж змушувати їх імітувати подіями.

У вашому випадку ви просто надасте onsubmitобробник події для форми, який буде виконувати ваше подання AJAX, а потім return falseскасовує фактичне подання.

Ви можете просто вказати action=""(що означає "самостійно"), і methodне потрібно - це за замовчуванням GET.

Якщо вам не потрібно прогресивне вдосконалення, вам теоретично вони не потрібні.

З іншого боку, forms мають деякі круті групування та семантичні ефекти. Використовуючи їх, ви можете логічно групувати елементи форми та полегшувати скриптам збір значень певних елементів.

Наприклад, якщо ви хочете подати ajax якийсь вхід користувача, завжди простіше сказати: "давайте візьмемо всі елементи у цій формі та надішлемо їх", ніж сказати "давайте візьмемо цей вхід, ці два виділення та ці три текстові області та подамо їх ". З мого досвіду, це насправді допомагає розробнику, якщо formприсутні теги.

AJAX чудовий, але, як сказав JamWaffles (+1 йому), використання formтегів забезпечує резервний метод.

Особисто я використовую теги форми, навіть для речей, які я подаю разом з AJAX, оскільки це синтаксично зрозуміло і дозволяє легко захопити всі входи в межах певної форми. Так, ви могли б це зробити за допомогою divабо чогось іншого, але, як я вже сказав, використання форми синтаксично приємне.

До речі, екранні зчитувачі трактують вміст усередині по- formрізному, тому є проблеми з доступністю, які слід розглядати незалежно від того, яким шляхом ви вирішите піти. Зауважте, що анекдотичні дані свідчать про те, що Google враховує доступність у своїх рейтингах, тому, якщо SEO турбує вас, використовуйте форму та робіть це правильно.

Короткий зміст: форми OK для MVC, прості веб-програми, погано для орієнтованих на компоненти, багатих веб-програм.

Причина: форми не можуть вкладати інші форми: велике обмеження для архітектури, орієнтованої на компоненти.

Деталі: Для типових програм MVC форми чудові. У багатих, складних веб-додатках, що використовують багато javascript та AJAX, а також безліч компонентів тут і там, я не люблю форми. Причина: форми не можуть вкладати інші форми. Тоді, якщо кожен компонент відображає форму, компоненти не можуть вкласти один одного. Шкода. Змінивши всі форми на div, я можу їх вкласти, і кожен раз, коли я хочу захопити всі параметри, щоб передати їх в ajax, я просто роблю (за допомогою jQuery):

$ ("# id_of_my_div"). find ("[name]"). serialize ();

(або якась інша фільтрація)

замість:

$ ("# id_of_my_form"). serialize ();

Хоча, із сентиментальних та семантичних причин, я продовжую називати свої divs something_form, коли вони діють як форми.

Не те, що я бачу. На даний момент я створюю веб-додаток, яке використовує <form>s, але я використовую їх, тому у мене є резервний метод, якщо користувач вимкнув JavaScript ( e.preventDefaultзупинка розміщення форми нормально зупиняється). Для вашої ситуації, коли ви говорите, що користувач МОЖЕ мати JavaScript, <form>тег не потрібен, але все-таки може бути ідеєю зберегти його на випадок, якщо браузер щось з цим зробить, або отримати доступ до нього як свого роду клас.

Коротше кажучи, ні, вам не потрібно використовувати, <form>якщо ви робите чистий AJAX, хоча залишити це в ньому може стати ідеєю, якщо ви раптом вирішите створити резервний код у майбутньому.

На мою думку: якщо ви використовуєте його із семантичних міркувань, то використовуйте за призначенням. Атрибут action потрібно (також можна залишити порожнім), щоб бути сформованим, також ви можете відокремити свої URI від логіки js, встановивши атрибут action і прочитавши його перед викликом ajax.

Я не розумію, чому вам потрібно було б використовувати тег форми тут. Єдина причина використовувати тег форми (крім того, щоб отримати вашу розмітку для перевірки) - це якщо ви хочете, щоб користувач "подавав" дані за допомогою введення sumbit або тегу кнопки. Якщо вам не потрібно це робити, тоді форма не потрібна. Однак не впевнений, чи буде це вважатися "дійсною" розміткою. Якщо ви все-таки використовуєте його, ви можете просто зробити, <form action="">оскільки дія є єдиним необхідним атрибутом тегу форми. Тим не менш, ви зазначаєте добру думку, майбутнє веб-додатків, мабуть, більше не потребуватиме форми та традиційної методології подання. Дуже цікаво і робить мене щасливим. хе-хе :)