Ответ 1

То, что вам не хватает, - это понимание семантической разметки и DOM.

Реально, вы можете в значительной степени делать все, что захотите, с помощью разметки HTML5, и большинство браузеров проанализирует ее. В прошлый раз, когда я проверил, WebKit/Blink даже допускает псевдоэлементы внутри элементов <input>, что является явным нарушением спецификации - Gecko не так много. Однако делать то, что вам нравится с вашей разметкой, несомненно, будет аннулировать ее в отношении семантики.

Почему мы помещаем элементы <input> внутри элементов <form>? По этой же причине мы помещаем теги <li> внутри элементов <ul> и <ol> - там, где они принадлежат. Он семантически корректен и помогает определить разметку. Анализаторы, программы для чтения с экрана и различное программное обеспечение могут лучше понимать вашу разметку, когда она семантически корректна - когда разметка имеет смысл, а не только структуру.

Элемент <form> также позволяет вам определять атрибуты method и action, которые сообщают браузеру, что делать, когда форма отправлена. AJAX не является инструментом покрытия 100%, и как веб-разработчик вы должны практиковать грациозную деградацию - формы должны быть представлены и передаваться, даже когда JS отключен.

Наконец, все формы зарегистрированы в DOM. Мы можем взглянуть на это с помощью JavaScript. Если вы откроете консоль на этой самой странице и введите:

document.forms

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

Вот некоторые материалы для чтения:

• Семантический HTML
• Руководство по HTML-форматам

Примечание. Элементы <input> могут использоваться вне форм, но если вы намерены отправить данные каким-либо образом, вы должны использовать форму.

Это часть ответа, где я переворачиваю вопрос.

Как я делаю свою жизнь труднее, избегая форм?

Прежде всего - элементы контейнера. Кому они нужны, правильно?!

Конечно, ваши маленькие <input> и <button> элементы вложены в какой-то контейнерный элемент? Они не могут просто плыть в середине всего остального. Так что если не <form>, то что? A <div>? A <span>?

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

Нет? О.

В этот момент голоса в моей голове очень любопытны относительно того, как вы создаете обработчики событий для всех этих различных ситуаций AJAX. Должно быть много, если вам нужно сократить свою разметку, чтобы сохранить байты. Затем вы должны создать пользовательские функции для каждого события AJAX, которое соответствует каждому "набору" элементов, которые вы должны настроить для индивидуальной или с помощью классов, не так ли? Theres не способ действительно группировать эти элементы в целом, так как мы установили, что они просто видят разметку, делая все, до тех пор, пока они не понадобятся.

Итак, вы настраиваете код для нескольких обработчиков.

$('#searchButton').on('click', function (e) {
  e.preventDefault();

  var search = $('#mySearch');

  $.ajax({
    url: 'http://example.com/text',
    type: 'GET',
    dataType: 'text',
    data: 'query=' + search.val(),
    success: function (data) {
      console.log(data);
    }
  });
});


$('#login').on('click', function (e) {
  e.preventDefault();
  var user = $('#username'),
      pass = $('#password'),
      rem = $('#remember');
  
  $.ajax({
    url: 'http://example.com/login',
    type: 'POST',
    data: user.add(pass, rem).serialize(),
    dataType: 'text',
    success: function (data) {
      console.log(data);
    }
  });
});

<!-- No containers, extra markup is silly. -->

<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ 2

Теги формы все еще необходимы, если вы хотите иметь возможность отправлять форму без AJAX (что может быть полезно на ранних этапах разработки). Но даже при том, что можно использовать javascript для отправки данных без тега формы, на память приходят еще несколько преимуществ:

• Использование тегов формы может помочь людям прочитать и понять ваш код в некоторых случаях, показывая им ваши намерения.
• Метод 'submit' доступен для форм. Если у вас есть форма с вводом [type = submit], и она не отключена, тогда, когда кто-то нажимает 'enter' при заполнении одного из других входов формы, форма будет отправлена. Вы все еще можете это сделать, прослушивая событие "keydown" на элементах ввода, но это хороший бит ui, который вы получаете бесплатно с тегами формы.
• Есть еще несколько вещей, которые работают только с тегом формы или проще с тегом формы. Разработчики в конечном итоге столкнутся с этими случаями и решают, что просто всегда использовать их везде и избегать проблем. Действительно, реальный вопрос: почему не использовать тег формы?

Ответ 3

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

Мы все знакомы с формами на веб-страницах html. По многим причинам люди или компании запрашивают наши адреса электронной почты, имена и URL-адреса сайтов. Покупка товаров в Интернете сегодня в основном ветерок и с появлением устройств безопасности, метод, используемый для отправки ваших данных и с трудом заработанных денег, обычно выполняется через формы.

больше информации

связать один

ссылку два