Ответ 1
То, что вам не хватает, - это понимание семантической разметки и DOM.
Реально, вы можете в значительной степени делать все, что захотите, с помощью разметки HTML5, и большинство браузеров проанализирует ее. В прошлый раз, когда я проверил, WebKit/Blink даже допускает псевдоэлементы внутри элементов <input>, что является явным нарушением спецификации - Gecko не так много. Однако делать то, что вам нравится с вашей разметкой, несомненно, будет аннулировать ее в отношении семантики.
Почему мы помещаем элементы <input> внутри элементов <form>? По этой же причине мы помещаем теги <li> внутри элементов <ul> и <ol> - там, где они принадлежат. Он семантически корректен и помогает определить разметку. Анализаторы, программы для чтения с экрана и различное программное обеспечение могут лучше понимать вашу разметку, когда она семантически корректна - когда разметка имеет смысл, а не только структуру.
Элемент <form> также позволяет вам определять атрибуты method и action, которые сообщают браузеру, что делать, когда форма отправлена. AJAX не является инструментом покрытия 100%, и как веб-разработчик вы должны практиковать грациозную деградацию - формы должны быть представлены и передаваться, даже когда JS отключен.
Наконец, все формы зарегистрированы в DOM. Мы можем взглянуть на это с помощью JavaScript. Если вы откроете консоль на этой самой странице и введите:
document.forms
Вы получите красивую коллекцию всех форм на странице. Панель поиска, поля комментариев, блок ответов - все правильные формы. Этот интерфейс может быть полезен для доступа к информации и взаимодействия с этими элементами. Например, формы могут быть сериализованы очень легко.
Вот некоторые материалы для чтения:
Примечание. Элементы <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>