Вам не вистачає розуміння семантичної розмітки та 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, яка відповідає кожному "набору" елементів - на які ви повинні націлюватись окремо або за допомогою класів, правда? Існує жодна можливість узагальнити ці елементи загально, оскільки ми встановили, що вони просто блукають навколо розмітки, роблячи все, що завгодно, поки вони не потрібні.
Отже, ви призначите кілька кодів для обробки.
$('#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);
}
});
});
<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>
Це частина, де ви говорите щось на зразок:
'Однак я повністю використовую багаторазові функції. Перестань перебільшувати '.
Досить справедливо, але вам все одно потрібно створити ці набори унікальних елементів або цільові набори класів, так? Вам все одно доведеться якось згрупувати ці елементи.
Позичте мені свої очі (або вуха, якщо ви використовуєте зчитувач з екрана і вам потрібна допомога - добре, що ми могли б додати трохи ARIA до всієї цієї семантичної розмітки, так?), І ось сила загальної форми.
function genericAjaxForm (e) {
e.preventDefault();
var form = $(this);
return $.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: form.data('type'),
data: form.serialize()
});
}
$('#login-form').on('submit', function (e) {
genericAjaxForm.call(this, e).done(function (data) {
console.log(data);
});
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
<input type="text" name="username" value="user" />
<input type="password" name="password" value="mypass" />
<label>
<input type="checkbox" name="remember" /> Remember me
</label>
<button type="submit">Login</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Ми можемо використовувати це з будь-якою поширеною формою, підтримувати нашу витончену деградацію і нехай форма повністю описує, як вона повинна функціонувати. Ми можемо розширити цю базову функціональність, зберігаючи загальний стиль - більше модульний, менше головного болю. JavaScript просто турбується про власні речі, такі як приховування відповідних елементів або обробка отриманих відповідей.
А тепер ти кажеш:
"Але я обертаю свої псевдо-форми в <div>елементи, що мають конкретні ідентифікатори - тоді я можу вільно націлювати вхідні дані за допомогою .find, і .serializeїх, і ..."
О, що це? Ви насправді загортаєте свої <input>елементи в контейнер?
То чому це ще не форма?