Apa perbedaan antara dinonaktifkan = "dinonaktifkan" dan hanya baca = "hanya baca" untuk bidang input formulir HTML?

Saya telah membaca sedikit tentang ini, tetapi saya tidak dapat menemukan sesuatu yang solid tentang bagaimana browser berbeda memperlakukan sesuatu.

Sebuah readonlyelemen tidak dapat diedit, tetapi dikirim ketika sesuai formmengirimkan. Sebuah disabledelemen tidak dapat diedit dan tidak dikirim di submit. Perbedaan lainnya adalah readonlyelemen dapat menjadi fokus (dan menjadi fokus ketika "menabrak" melalui formulir) sementara disabledelemen tidak bisa.

Baca lebih lanjut tentang ini di artikel hebat ini atau definisi oleh w3c . Mengutip bagian penting:

Perbedaan utama

Atribut Dinonaktifkan

• Nilai untuk elemen formulir yang dinonaktifkan tidak diteruskan ke metode prosesor. W3C menyebut ini elemen yang berhasil. (Ini berfungsi mirip dengan bentuk kotak centang yang tidak dicentang.)
• Beberapa browser mungkin mengesampingkan atau memberikan gaya default untuk elemen formulir yang dinonaktifkan. (Abu-abu atau teks emboss) Internet Explorer 5.5 sangat jahat tentang hal ini.
• Elemen formulir yang dinonaktifkan tidak menerima fokus.
• Elemen formulir yang dinonaktifkan dilewati dalam navigasi tab.

Atribut Hanya Baca

• Tidak semua elemen formulir memiliki atribut hanya baca. Paling penting, yang <SELECT>, <OPTION>, dan <BUTTON>unsur-unsur tidak memiliki readonly atribut (meskipun mereka berdua memiliki atribut dinonaktifkan)
• Peramban tidak memberikan umpan balik visual default yang ditimpa bahwa elemen formulir hanya baca. (Ini bisa menjadi masalah ... lihat di bawah.)
• Elemen formulir dengan set atribut readonly akan diteruskan ke prosesor bentuk.
• Elemen formulir hanya baca dapat menerima fokus
• Elemen formulir hanya baca termasuk dalam navigasi tab.

Tidak ada peristiwa yang dipicu ketika elemen memiliki atribut yang dinonaktifkan.

Tak satu pun dari di bawah ini akan dipicu.

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

Sementara readonly akan terpicu.

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

Dinonaktifkan berarti bahwa tidak ada data dari elemen formulir yang akan dikirimkan saat formulir dikirimkan. Hanya Baca berarti setiap data dari dalam elemen akan dikirimkan, tetapi tidak dapat diubah oleh pengguna.

Sebagai contoh:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

Ini akan mengirimkan nilai "Bob" untuk elemen "namamu".

<input type="text" name="yourname" value="Bob" disabled="disabled" />

Ini tidak akan mengirimkan apa pun untuk elemen "namamu".

Sama seperti jawaban lainnya (dinonaktifkan tidak dikirim ke server, hanya baca saja) tetapi beberapa browser mencegah penyorotan bentuk yang dinonaktifkan, sementara hanya baca masih dapat disorot (dan disalin).

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

Bidang baca-saja tidak dapat dimodifikasi. Namun, pengguna dapat menabraknya, menyorotinya, dan menyalin teks darinya.

Jika nilai kotak teks yang dinonaktifkan perlu dipertahankan ketika formulir dihapus (reset), disabled = "disabled"harus digunakan, karena kotak teks hanya-baca tidak akan mempertahankan nilai

Sebagai contoh:

HTML

Kotak teks

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Tombol Atur ulang

<button type="reset" id="clearButton">Clear</button>

Dalam contoh di atas, ketika tombol Hapus ditekan, nilai teks yang dinonaktifkan akan dipertahankan dalam formulir. Nilai tidak akan dipertahankan dalam kasusinput type = "text" readonly="readonly"