Saya tidak mengerti tujuan dari tag formulir di html.

Saya dapat dengan mudah menggunakan jenis input apa pun dengan sempurna tanpa menggunakan tag formulir. Tampaknya berlebihan untuk membungkusnya di sekitar input.

Selain itu, jika saya menggunakan ajax untuk memanggil halaman sisi server, saya cukup menggunakan jQuery untuk itu. Satu-satunya pengecualian adalah saya perhatikan bahwa Anda harus membungkus skrip unggahan di sekitar tag formulir karena beberapa alasan.

Jadi mengapa formulir masih banyak digunakan untuk hal-hal sederhana seperti input teks? Sepertinya hal yang sangat kuno dan tidak perlu dilakukan.

Saya hanya tidak melihat manfaat atau kebutuhannya. Mungkin aku melewatkan sesuatu.

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:

• HTML semantik
• Panduan formulir HTML

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);
    }
  });
});

<!-- 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>

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?

Tag formulir masih diperlukan jika Anda ingin mengirimkan formulir tanpa AJAX (yang mungkin berguna pada tahap awal pengembangan). Tetapi meskipun mungkin menggunakan javascript untuk mengirimkan data tanpa tag formulir, beberapa manfaat masih muncul:

1. Menggunakan tag formulir dapat membantu orang membaca dan memahami kode Anda dalam beberapa kasus, dengan menunjukkan kepada mereka maksud Anda.
2. Metode 'kirim' tersedia di formulir. Jika Anda memiliki formulir dengan masukan [type = submit], dan tidak dinonaktifkan, maka ketika seseorang menekan 'enter' saat mengisi salah satu masukan formulir lainnya, formulir tersebut akan dikirim. Anda masih dapat melakukannya dengan mendengarkan event 'keydown' pada elemen input, tetapi ini adalah sedikit ui yang Anda dapatkan secara gratis dengan tag formulir.
3. Ada beberapa hal lain yang hanya berfungsi dengan tag formulir, atau lebih mudah dengan tag formulir. Pengembang pada akhirnya akan mengalami kasus ini, dan memutuskan lebih mudah untuk selalu menggunakannya di mana saja dan menghindari masalah. Sungguh, pertanyaan sebenarnya adalah, mengapa tidak menggunakan tag formulir?

Elemen HTML mewakili bagian dokumen yang berisi kontrol interaktif untuk mengirimkan informasi ke server web.

Kita semua sudah familiar dengan formulir di halaman web html. Untuk berbagai alasan, orang atau perusahaan menanyakan alamat email, nama, dan URL situs kami. Membeli produk di Internet saat ini sebagian besar sangat mudah dan dengan munculnya perangkat keamanan, metode yang digunakan untuk mengirimkan detail Anda dan uang yang diperoleh dengan susah payah biasanya dilakukan melalui formulir.

Info lebih lanjut

link satu

menghubungkan dua

Saya memiliki skenario di mana satu halaman web memiliki 3 formulir, yang semuanya memiliki bidang email terpisah (dengan ID berbeda). Saya membungkusnya secara terpisah <div>pada awalnya. Pengisian otomatis iOS di Safari berperilaku aneh sampai saya membungkus semuanya dalam <form>tag. Salah satu formulir hanya memiliki satu kolom input, untuk berlangganan buletin. Ketika pengguna mengisi input itu secara otomatis, halaman web digulir ke kolom input berikutnya yang terletak di bagian halaman yang berbeda.

Jadi, terima kasih Oka untuk posting yang panjang. Tag dengan makna semantik harus digunakan jika memungkinkan, karena Anda tidak pernah tahu browser / perangkat mana yang tidak menangani solusi lain dengan baik.