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

435

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

Andy
sumber
terkait: "bagaimana cara meniru atribut readonly untuk tag pilih, dan masih mendapatkan data POST?" stackoverflow.com/questions/368813/…
Adrien Be

Jawaban:

729

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.
oezi
sumber
5
pada elemen readonly Anda tidak dapat menggunakan CTRL + C tetapi Anda dapat menggunakan klik kanan mouse dan pilih Salin.
Rumplin
7
@Rumplin Anda yakin tentang itu? Saya baru saja menguji dan dapat menyalin dengan pintasan keyboard di Chrome pada OS X.
evanrmurphy
5
"Tidak semua elemen formulir memiliki atribut readonly. Paling terkenal, elemen <SELECT>, <OPTION>, dan <BUTTON> tidak memiliki atribut readonly (meskipun keduanya memiliki atribut yang dinonaktifkan)". Itulah mengapa kadang-kadang Anda harus menggunakan atribut "dinonaktifkan" dengan bidang input tersembunyi untuk formulir pilihan.
Donato
Dalam versi Chrome saat ini, elemen yang hanya dapat dibaca tidak dapat menerima fokus. Ini bermasalah jika Anda mengharapkan pengguna dapat menelusuri nilai-nilai yang lebih panjang dari ukuran input.
Mike Feltman
5
Jadi pemahaman saya yang disabled menyiratkan readonly tetapi readonlytidak menyiratkan disabled. Dengan kata lain jika suatu elemen memiliki disabledatribut maka tidak perlu juga menyertakan readonlyatribut. Benar?
chharvey 615
91

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
Hrishabh Gupta
sumber
35

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".

Michael Irigoyen
sumber
6
Keduanya readonlydan disabledmerupakan nilai boolean. Gunakan disabledsebagai ganti disabled="disabled"(sama untuk hanya baca)
Raptor
5
Keduanya secara semantik benar. HTML5 memungkinkan Anda untuk menggunakan keduanya.
Michael Irigoyen
3
Peringatan bebas konteks untuk menggunakan hanya nama atribut, tanpa nilai, tidak disarankan - karena kode tersebut tidak akan valid XML / XHTML. Saya tahu banyak devs tidak peduli tentang itu, tetapi mereka setidaknya harus menyadari jebakan. Secara pribadi saya berusaha untuk kepatuhan XHTML - kecuali diberikan alasan kuat, yang belum saya terima - jadi saya menggunakan formulir yang panjang / duplikat.
underscore_d
1
@ToolmakerSteve Apakah Anda memiliki kutipan spesifikasi bahwa string kosong adalah XHTML yang valid? Saya hanya dapat menemukan halaman komentar yang mengatakan itu valid untuk HTML5. Semua orang yang saya lihat berbicara tentang XHTML mengatakan bahwa bentuknya untuk atribut boolean harus attrname="attrname". Either way, itu tampaknya tidak didokumentasikan dengan baik, setidaknya tidak saya dapat menemukannya. Nah, ini dia - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - tetapi hanya secara spesifik menyebutkan SGML dan HTML, bukan XHTML .... terlalu banyak akronim: S
underscore_d
1
... tapi melompati bit untuk HTML, di mana ada / tidaknya cukup - kita mendapatkan ini, yang mungkin berlaku karena kelalaian ke XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").Jadi string kosong tampaknya tidak valid.
underscore_d
4

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.

Tim
sumber
1

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"

Syed
sumber