Apa yang Anda lewatkan adalah pemahaman tentang markup semantik , dan DOM.
Secara realistis, Anda dapat melakukan apa saja yang Anda inginkan dengan markup HTML5, dan sebagian besar browser akan menguraikannya. Terakhir kali saya memeriksa, WebKit / Blink bahkan mengizinkan pseudo-elemen di dalam <input>elemen , yang jelas merupakan pelanggaran spesifikasi - Gecko tidak terlalu banyak. Namun, melakukan apa pun yang Anda suka dengan markup Anda pasti akan membatalkannya sejauh menyangkut semantik.
Mengapa kita menempatkan <input>elemen di dalam <form>elemen? Untuk alasan yang sama kami menempatkan <li>tag di dalam <ul>dan <ol>elemen - itu tempatnya. Ini benar secara semantik , dan membantu untuk menentukan markup. Pengurai, pembaca layar, dan berbagai perangkat lunak dapat lebih memahami markup Anda saat markup itu benar secara semantik - bila markup memiliki makna, bukan hanya struktur.
The <form>Elemen juga memungkinkan Anda untuk menentukan methoddan actionatribut yang memberitahu browser apa yang harus dilakukan ketika formulir dikirimkan. AJAX bukanlah alat cakupan 100%, dan sebagai pengembang web Anda harus mempraktikkan degradasi yang anggun - formulir harus dapat dikirim, dan data ditransfer, bahkan ketika JS dimatikan.
Akhirnya, semua formulir terdaftar dengan benar di DOM. Kita bisa mengintip ini dengan JavaScript. Jika Anda membuka konsol Anda di halaman ini, dan ketik:
document.forms
Anda akan mendapatkan koleksi bagus dari semua formulir di halaman. Bilah pencarian, kotak komentar, kotak jawaban - semua formulir yang sesuai. Antarmuka ini dapat berguna untuk mengakses informasi, dan berinteraksi dengan elemen-elemen ini. Misalnya, formulir dapat dibuat berseri dengan sangat mudah.
Berikut beberapa bahan bacaan:
Catatan: <input>elemen dapat digunakan di luar formulir, tetapi jika niat Anda adalah mengirimkan data dengan cara apa pun, Anda harus menggunakan formulir.
Ini adalah bagian dari jawaban di mana saya membalik pertanyaan itu.
Bagaimana saya membuat hidup saya lebih sulit dengan menghindari formulir?
Pertama dan terpenting - elemen wadah. Siapa yang butuh mereka, kan ?!
Tentu saja elemen kecil <input>dan Anda <button>bersarang di dalam semacam elemen kontainer? Mereka tidak bisa hanya mengambang di tengah-tengah hal lainnya. Jadi jika bukan a <form>, lalu apa? A <div>? A <span>?
Elemen-elemen ini harus berada di suatu tempat, dan kecuali markup Anda kacau balau, elemen penampung hanya bisa menjadi bentuk.
Tidak? Oh.
Pada titik ini, suara di kepala saya sangat ingin tahu tentang bagaimana Anda membuat penangan acara untuk semua situasi AJAX yang berbeda ini. Harus ada banyak, jika Anda perlu mengurangi markup Anda untuk menghemat byte. Kemudian Anda harus membuat fungsi kustom untuk setiap acara AJAX yang sesuai dengan setiap 'set' elemen - yang harus Anda targetkan secara individual atau dengan kelas, bukan? Tidak ada cara untuk benar-benar mengelompokkan elemen-elemen ini secara umum, karena kami telah menetapkan bahwa mereka hanya berkeliaran di sekitar markup, melakukan apa pun sampai dibutuhkan.
Jadi, Anda membuat kode khusus untuk beberapa penangan.
$('#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>
Ini adalah bagian saat Anda mengatakan sesuatu seperti:
'Saya benar-benar menggunakan fungsi yang dapat digunakan kembali. Berhenti melebih-lebihkan. '
Cukup adil, tetapi Anda masih perlu membuat kumpulan elemen unik ini, atau kumpulan kelas target, bukan? Anda masih harus mengelompokkan elemen-elemen ini.
Pinjamkan saya mata Anda (atau telinga, jika Anda menggunakan pembaca layar dan membutuhkan bantuan - untungnya kita bisa menambahkan beberapa ARIA ke semua markup semantik ini , bukan?), Dan lihatlah kekuatan bentuk generik.
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>
Kita dapat menggunakan ini dengan bentuk umum apa pun, mempertahankan degradasi anggun kita, dan membiarkan formulir tersebut sepenuhnya menjelaskan bagaimana seharusnya fungsinya. Kami dapat mengembangkan fungsionalitas dasar ini sambil mempertahankan gaya umum - lebih modular, lebih sedikit sakit kepala. JavaScript hanya mengkhawatirkan hal-hal sendiri, seperti menyembunyikan elemen yang sesuai, atau menangani tanggapan apa pun yang kita dapatkan.
Dan sekarang Anda berkata:
'Tapi saya membungkus bentuk semu saya dalam <div>elemen yang memiliki ID spesifik - saya kemudian dapat menargetkan input secara longgar dengan .find, dan .serializemereka, dan ...'
Oh, apa itu? Anda benar-benar membungkus <input>elemen Anda dalam wadah?
Jadi mengapa belum berbentuk bentuk?