Eksik olan şey, anlamsal işaretleme ve DOM anlayışıdır .
Gerçekçi olarak, HTML5 işaretlemesiyle hemen hemen istediğiniz her şeyi yapabilirsiniz ve çoğu tarayıcı bunu ayrıştırır. Son baktığımda, WebKit / Blink bile verir içindeki sözde elemanları <input>elemanları spec açık bir ihlalidir olan - Gecko çok değil. Bununla birlikte, işaretlemenizle istediğinizi yapmak, anlambilim söz konusu olduğunda şüphesiz onu geçersiz kılacaktır.
<input>Öğeleri neden öğelerin içine koyarız <form>? Aynı nedenden ötürü <li>etiketleri <ul>ve <ol>öğelerinin içine koyarız - ait oldukları yerdir. Bu var semantik olarak doğru ve işaretlemeyi tanımlamak için yardımcı olur. Ayrıştırıcılar, ekran okuyucular ve çeşitli yazılımlar, anlamsal olarak doğru olduğunda işaretlemenizi daha iyi anlayabilir - işaretlemenin sadece yapısı değil, anlamı olduğunda.
<form>Eleman ayrıca tanımlamanızı sağlar methodve actionform gönderildiğinde ne yapacağını tarayıcısına anlatan, hangi bağlıyor. AJAX,% 100 kapsama aracı değildir ve bir web geliştiricisi olarak, zarif bir indirgeme alıştırması yapmalısınız; JS kapalı olsa bile formlar gönderilebilir ve veri aktarılabilir olmalıdır.
Son olarak, formların tümü DOM'a düzgün bir şekilde kaydedilir. JavaScript ile buna bir göz atabiliriz. Konsolunuzu tam da bu sayfada açarsanız ve şunu yazın:
document.forms
Sayfadaki tüm formların güzel bir koleksiyonuna sahip olacaksınız. Arama çubuğu, yorum kutuları, cevap kutusu - tüm uygun formlar. Bu arayüz, bilgiye erişmek ve bu öğelerle etkileşim kurmak için yararlı olabilir. Örneğin formlar çok kolay bir şekilde serileştirilebilir .
İşte bazı okuma materyalleri:
Not: <input>öğeler formların dışında kullanılabilir, ancak niyetiniz herhangi bir şekilde veri göndermekse, bir form kullanmalısınız.
Bu, cevabın soruyu tersine çevirdiğim kısmı.
Formlardan kaçınarak hayatımı nasıl daha da zorlaştırıyorum?
İlk ve en önemlisi - konteyner elemanları. Kimin ihtiyacı var, değil mi ?!
Kesinlikle küçük <input>ve <button>öğeleriniz bir tür konteyner öğesinin içine yerleştirilmiştir ? Her şeyin ortasında öylece yüzüyor olamazlar. Öyleyse a değilse <form>, o zaman ne? A <div>? A <span>?
Bu öğelerin bir yerde bulunması gerekir ve işaretlemeniz çılgın bir karmaşa değilse, kapsayıcı öğesi yalnızca bir form olabilir.
Hayır? Oh.
Bu noktada kafamdaki sesler, tüm bu farklı AJAX durumları için olay işleyicilerinizi nasıl yarattığınızı çok merak ediyor. Baytlardan tasarruf etmek için işaretlemenizi azaltmanız gerekirse, çok şey olmalı. Daha sonra, her bir öğe 'kümesine' karşılık gelen her AJAX olayı için özel işlevler oluşturmalısınız - bunları tek tek veya sınıflarla hedeflemeniz gerekir, değil mi? Bu unsurları genel olarak gruplamanın bir yolu yok, çünkü bunların sadece işaretleme etrafında dolaştıklarını, ihtiyaç duyulana kadar her şeyi yaptıklarını belirledik.
Yani birkaç işleyiciyi özel olarak kodlarsınız.
$('#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>
Bu, şöyle bir şey söylediğiniz kısımdır:
Yine de tamamen yeniden kullanılabilir işlevler kullanıyorum. Abartmayı bırak. "
Yeterince adil, ancak yine de bu benzersiz unsurları veya hedef sınıf setlerini yaratmanız gerekiyor, değil mi? Yine de bu unsurları bir şekilde gruplamanız gerekiyor .
Bana gözlerinizi ödünç verin (veya kulaklarınız, eğer bir ekran okuyucu kullanıyorsanız ve biraz yardıma ihtiyacınız varsa - iyi ki tüm bu anlamsal işaretlemeye biraz ARIA ekleyebiliriz , değil mi?) Ve genel formun gücünü görün.
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>
Bunu herhangi bir ortak biçimde kullanabilir, zarif bozulmamızı koruyabilir ve formun nasıl çalışması gerektiğini tamamen açıklamasına izin verebiliriz . Genel bir tarzı korurken bu temel işlevselliği genişletebiliriz - daha modüler, daha az baş ağrısı. JavaScript, uygun öğeleri gizlemek veya aldığımız herhangi bir yanıtla ilgilenmek gibi kendi şeyleri hakkında endişelenir.
Ve şimdi diyorsun:
"Ancak sözde formlarımı <div>belirli kimliklere sahip öğelere sarıyorum - daha sonra girdileri .find, ve .serializeonlarla gevşek bir şekilde hedefleyebilirim ve ... '
Ah o ne? Aslında senin sarın <input>bir kapta elemanlarını?
Öyleyse neden henüz bir form değil?