Praktik Terbaik: Mengakses elemen formulir dengan ID HTML atau atribut nama?

Seperti yang diketahui oleh setiap pengembang JavaScript berpengalaman, ada banyak (terlalu banyak) cara untuk melakukan hal yang sama. Misalnya, Anda memiliki bidang teks sebagai berikut:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

Ada banyak cara untuk mengakses ini di JavaScript:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

Metode [1] dan [3] didokumentasikan dengan baik di dokumentasi Mozilla Gecko, tetapi keduanya tidak ideal. [1] terlalu umum untuk digunakan dan [3] membutuhkan id dan nama (dengan asumsi Anda akan memposting data ke bahasa sisi server). Idealnya, akan lebih baik jika hanya memiliki atribut id atau atribut nama (memiliki keduanya agak berlebihan, terutama jika id tidak diperlukan untuk css apa pun, dan meningkatkan kemungkinan salah ketik, dll).

[2] tampaknya yang paling intuitif dan tampaknya digunakan secara luas, tetapi saya belum melihatnya direferensikan dalam dokumentasi Gecko dan saya khawatir tentang kompatibilitas ke depan dan kompatibilitas lintas browser (dan tentu saja saya ingin menjadi sesuai standar mungkin).

Jadi apa praktik terbaik di sini? Adakah yang bisa menunjukkan sesuatu dalam dokumentasi DOM atau spesifikasi W3C yang dapat menyelesaikan masalah ini?

Catatan Saya secara khusus tertarik pada solusi non-perpustakaan (jQuery / Prototype).

Berikan formulir Anda hanya dengan id , dan masukkan nama saja:

<form id="myform">
  <input type="text" name="foo">

Maka cara yang paling sesuai standar dan paling tidak bermasalah untuk mengakses elemen input Anda adalah melalui:

document.getElementById("myform").elements["foo"]

menggunakan .elements["foo"]alih-alih hanya .foolebih disukai karena yang terakhir mungkin mengembalikan properti bentuk bernama "foo" daripada elemen HTML!

[1] document.forms [0] .elements [0];

" No-omg-never! " Muncul di benak saya ketika saya melihat metode akses elemen ini. Masalahnya adalah bahwa DOM mengasumsikan bahwa DOM adalah struktur data normal (misalnya: array) di mana urutan elemennya statis, konsisten, atau dapat diandalkan. Kami tahu bahwa 99,9999% dari waktu, bahwa ini bukanlah masalahnya. Penyusunan ulang atau inputelemen dalam formulir, menambahkan yang lain formke halaman sebelum formulir yang dipermasalahkan, atau memindahkan formulir yang dipermasalahkan adalah semua kasus di mana kode ini rusak. Cerita pendek: ini sangat rapuh. Begitu Anda menambah atau memindahkan sesuatu, itu akan rusak.

[2] document.myForm.foo;

Saya bersama Sergey ILinsky dalam hal ini:

• Akses elemen arbitrer dengan mengacu pada idatributnya:document.getElementById("myform");
• Akses elemen formulir bernama menurut nama, relatif terhadap elemen formulir induknya: document.getElementById("myform").foo;

Masalah utama saya dengan metode ini adalah nameatribut tidak berguna saat diterapkan ke formulir. Nama tidak diteruskan ke server sebagai bagian dari POST / GET dan tidak berfungsi untuk penanda gaya hash.

[3] document.getElementById ('foo');

Menurut pendapat saya, ini adalah metode yang paling disukai. Akses langsung adalah metode yang paling ringkas dan jelas.

[4] document.getElementById ('myForm'). Foo;

Menurut pendapat saya, ini bisa diterima, tetapi lebih bertele-tele dari yang diperlukan. Metode # 3 lebih disukai.

Saya kebetulan menonton video dari Douglas Crockford dan dia membahas tentang subjek ini. Tempat tujuan berada di -12: 00. Untuk meringkas:

• Koleksi dokumen (document.anchor, document.form, dll) sudah usang dan tidak relevan (metode 1).
• The nameatribut digunakan untuk nama hal-hal, tidak untuk mengaksesnya. Ini untuk menamai hal-hal seperti windows, kolom input, dan tag jangkar.
• "ID adalah hal yang harus Anda gunakan untuk mengidentifikasi elemen secara unik sehingga Anda bisa mendapatkan akses ke sana. Mereka (nama dan ID) dulunya dapat dipertukarkan, tetapi sekarang tidak lagi."

Jadi begitulah. Secara semantik, ini paling masuk akal.

Untuk mengakses elemen bernama yang ditempatkan di formulir, praktik yang baik adalah menggunakan formobjek itu sendiri.

Untuk mengakses elemen arbitrer di pohon DOM yang terkadang dapat ditemukan dalam formulir, gunakan getElementByIddan elemen id.

Saya lebih suka metode ke-5. Yaitu
[5] Gunakan pengenal JavaScript khusus ini untuk meneruskan objek formulir atau bidang ke fungsi dari event handler.

Khususnya, untuk formulir:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

dan

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

Dengan menggunakan teknik ini, fungsi tidak perlu tahu
- urutan di mana formulir didefinisikan di halaman,
- ID formulir, atau
- nama formulir

Demikian pula untuk bidang:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

dan

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

Dalam kasus ini, fungsi tidak perlu mengetahui nama atau id dari bidang bobot tertentu, meskipun perlu mengetahui nama bidang batas bobot.

Ini tidak benar-benar menjawab pertanyaan Anda, tetapi hanya pada bagian ini:

[3] membutuhkan baik id dan nama ... memiliki keduanya agak berlebihan

Anda kemungkinan besar harus memiliki idatribut pada setiap bidang formulir, sehingga Anda dapat mengaitkan <label>elemennya dengannya, seperti ini:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

Ini diperlukan untuk aksesibilitas (misalnya jika Anda tidak mengaitkan label dan kontrol formulir, mengapa Anda begitu membenci orang buta?).

Ini agak mubazir, meskipun kurang begitu bila Anda memiliki kotak centang / tombol radio, di mana beberapa di antaranya dapat berbagi file name. Pada akhirnya, iddan nameuntuk tujuan yang berbeda, meskipun keduanya sering kali disetel ke nilai yang sama.

Ini agak tua tapi saya ingin menambahkan sesuatu yang menurut saya relevan.
(Saya bermaksud untuk mengomentari satu atau 2 utas di atas tetapi tampaknya saya memerlukan reputasi 50 dan saya hanya memiliki 21 pada saat menulis ini. :))
Hanya ingin mengatakan bahwa ada kalanya jauh lebih baik untuk mengakses elemen formulir berdasarkan nama, bukan dengan id. Saya tidak berbicara tentang formulir itu sendiri. Bentuknya, OK, Anda bisa memberinya id dan kemudian mengaksesnya dengan itu. Tetapi jika Anda memiliki tombol radio dalam formulir, jauh lebih mudah menggunakannya sebagai objek tunggal (mendapatkan dan menyetel nilainya) dan Anda hanya dapat melakukannya dengan nama, sejauh yang saya tahu.

Contoh:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

Anda bisa mendapatkan / menyetel nilai yang dicentang dari tombol radio R1 secara keseluruhan dengan menggunakan
document.mainForm.R1.value
atau
document.getElementById ("mainForm"). R1.value
Jadi jika Anda ingin memiliki gaya kesatuan, Anda mungkin ingin selalu menggunakan metode ini, apa pun jenis elemen formulirnya. Saya, saya sangat nyaman mengakses tombol radio dengan nama dan kotak teks dengan id.

Menjadi kuno, saya selalu menggunakan sintaks 'document.myform.myvar' tetapi baru-baru ini saya menemukannya gagal di Chrome (OK di Firefox dan IE). Itu adalah halaman Ajax (yaitu dimuat ke dalam properti innerHTML dari sebuah div). Mungkin Chrome tidak mengenali formulir sebagai elemen dokumen utama. Saya menggunakan getElementById (tanpa mereferensikan formulir) sebagai gantinya dan berfungsi dengan baik.

Hanya untuk menambahkan semua yang telah dikatakan, Anda dapat mengakses input s baik dengan nameatau idmenggunakan elementsproperti dari formulir Objek, karena tanpanya Anda bisa mendapatkan properti dari formulir bernama "foo" daripada elemen HTML. Dan menurut @Paul D. Waite tidak masalah untuk memiliki nama dan id.

var myForm = document.getElementById("myform")
console.log(myForm.foo.value) // hey
console.log(myForm.foo2.value) // hey
//preferable
console.log(myForm.elements.foo.value) // hey
console.log(myForm.elements.foo2.value) // hey

<form id="myform">
  <input type="text" name="foo" id="foo2" value="hey">
</form>

Menurut MDN di halaman HTMLFormElement.elements

Elemen properti HTMLFormElement mengembalikan HTMLFormControlsCollection yang mencantumkan semua kontrol formulir yang terdapat dalam elemen. Secara independen, Anda hanya dapat memperoleh jumlah kontrol formulir menggunakan properti panjang.

Anda dapat mengakses kontrol bentuk tertentu dalam koleksi dikembalikan oleh baik menggunakan indeks atau elemen nama atau id .

namelapangan bekerja dengan baik. Ini memberikan referensi keelements .

parent.children- Akan mencantumkan semua elemen dengan bidang nama induk. parent.elements- Akan daftar hanya form elementssepertiinput-text, text-area, etc

var form = document.getElementById('form-1');
console.log(form.children.firstname)
console.log(form.elements.firstname)
console.log(form.elements.progressBar); // undefined
console.log(form.children.progressBar);
console.log(form.elements.submit); // undefined

<form id="form-1">
  <input type="text" name="firstname" />
  <input type="file" name="file" />
  <progress name="progressBar" value="20" min="0" max="100" />
  <textarea name="address"></textarea>
  <input type="submit" name="submit" />
</form>

Catatan: Untuk .elementsbekerja, parentkebutuhannya adalah a <form> tag. Padahal, .childrenakan bekerja pada apa HTML-element- seperti<div>, <span>, etc .

Semoga berhasil...

Formulir 2 tidak masalah, dan formulir 3 juga direkomendasikan.
Redundansi antara nama dan id disebabkan oleh kebutuhan untuk menjaga kompatibilitas, pada html 5 beberapa elemen (seperti img, form, iframe dan semacamnya) akan kehilangan atribut "name" -nya, dan disarankan untuk hanya menggunakan id mereka untuk mereferensikannya mulai sekarang di :)

Untuk melengkapi jawaban lainnya, document.myForm.foo adalah yang disebut DOM level 0, yang merupakan cara yang diterapkan oleh Netscape dan oleh karena itu sebenarnya bukan standar terbuka meskipun didukung oleh sebagian besar browser.

Lihat halaman ini: https://developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName('foo')[0]; // returns you element.

Ini harus berupa 'elemen' dan harus mengembalikan array karena lebih dari satu elemen dapat memiliki nama yang sama.

Jawaban saya akan berbeda pada pertanyaan pastinya. Jika saya ingin mengakses elemen tertentu secara khusus, maka saya akan menggunakan document.getElementById (). Contohnya adalah menghitung nama lengkap seseorang, karena ia membangun di beberapa bidang, tetapi ini adalah rumus yang dapat diulang.

Jika saya ingin mengakses elemen sebagai bagian dari struktur fungsional (formulir), maka saya akan menggunakan:

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

Beginilah cara kerjanya dari perspektif bisnis. Perubahan di dalam loop mengikuti perubahan fungsional dalam aplikasi dan karenanya berarti. Saya menerapkannya sebagian besar untuk validasi yang ramah pengguna dan mencegah panggilan jaringan untuk memeriksa data yang salah. Saya ulangi sisi server validasi (dan menambahkannya di sana lagi), tetapi jika saya dapat membantu sisi klien pengguna, apakah itu bermanfaat bagi semua.

Untuk agregasi data (seperti membuat diagram lingkaran berdasarkan data di formulir) saya menggunakan dokumen konfigurasi dan objek Javascript yang dibuat khusus. Lalu adalah arti sebenarnya dari bidang yang penting dalam kaitannya dengan konteksnya dan apakah saya menggunakan document.getElementById ().

Saya lebih suka Yang Ini

document.forms['idOfTheForm'].nameOfTheInputFiled.value;

Karena case [2] document.myForm.fooadalah dialek dari Internet Exploere. Jadi daripada itu, saya lebih suka document.forms.myForm.elements.fooatau document.forms["myForm"].elements["foo"].