input type = "text" vs input type = "search" di HTML5

Saya baru mengenal HTML5 karena mulai bekerja dengan bidang input formulir baru HTML5. Ketika saya bekerja dengan bidang input formulir, terutama <input type="text" />dan <input type="search" />IMO tidak ada perbedaan di semua browser utama termasuk Safari, Chrome, Firefox, dan Opera. Dan bidang pencarian juga berperilaku seperti bidang teks biasa.

Jadi, apa perbedaan antara input type="text"dan input type="search"dalam HTML5?

Apa tujuan sebenarnya <input type="search" />?

Saat ini, tidak ada masalah besar di antara mereka - mungkin tidak akan pernah ada. Namun, intinya adalah untuk memberikan pembuat browser kemampuan untuk melakukan sesuatu yang istimewa dengannya, jika mereka mau.

Pikirkan tentang <input type="number">ponsel, memunculkan bantalan nomor, atau type="email"memunculkan versi khusus keyboard, dengan @ dan .com dan sisanya tersedia.

Pada ponsel, pencarian dapat memunculkan applet pencarian internal, jika mereka mau.

Di sisi lain, ini membantu pengembang saat ini dengan css.

input[type=search]:after { content : url("magnifying-glass.gif"); }

Sama sekali tidak ada artinya di sebagian besar browser. Itu hanya berperilaku seperti input teks. Ini bukan masalah. Spek tidak mengharuskannya melakukan sesuatu yang istimewa. Browser WebKit memang memperlakukannya sedikit berbeda, terutama dengan gaya.

Input pencarian di WebKit secara default memiliki batas inset, sudut bulat, dan kontrol tipografi yang ketat.

Juga,

Ini tidak didokumentasikan di mana pun saya tahu atau tidak ada dalam spesifikasi, tetapi Anda jika Anda menambahkan parameter hasil pada input, WebKit akan menerapkan kaca pembesar kecil dengan panah dropdown yang menunjukkan hasil sebelumnya.

<input type=search results=5 name=s>

Referensi

Di atas semua itu, ia memberikan makna semantik kepada input type.

Memperbarui:

Chrome 51 menghapus dukungan untuk atribut hasil:

Secara visual / fungsional, 2 perbedaan jika tipe inputnya adalah ' pencarian ': -

1. Anda mendapatkan simbol ' X ' di akhir kotak input / pencarian untuk menghapus teks di dalam kotak
2. Menekan tombol ' Esc ' pada keyboard juga menghapus teks

Pada beberapa browser, ini juga mendukung atribut "hasil" dan "penyimpanan otomatis" yang menyediakan fungsionalitas "pencarian terkini" otomatis dengan ikon kaca pembesar.

Info lebih lanjut

Sebenarnya berhati-hatilah dengan menganggapnya tidak melakukan apa-apa. Saat Anda masuk ke input gaya dengan pencarian tipe, mereka memiliki atribut tertentu yang tidak dapat diubah. Cobalah untuk mengubah perbatasan pada satu dan Anda akan merasa sangat tidak mungkin. Ada beberapa atribut CSS yang dilarang lainnya, lihat ini untuk semua detail.

Juga seperti yang disebutkan oleh Jashwant ada atribut hasil, meskipun tidak bekerja dengan baik kecuali Anda juga menyertakan atribut autosave. Namun, drop down tidak akan berfungsi di sebagian besar browser, jadi gunakan risiko Anda sendiri.

Ada perbedaan browser dalam aksi, ketika Anda mengetik beberapa kata lalu memasukkan ESC dalam input type="search"di chrome / safari kotak input akan dihapus. tetapi dalam type="text"skenario, kata-kata tidak akan dihapus. Jadi berhati-hatilah memilih jenis terutama ketika Anda menggunakannya untuk fitur autocomplete atau pencarian terkait

Poin bonus: input type="search"memiliki kemampuan untuk menggunakan onsearchatribut (meskipun saya perhatikan ini TIDAK bekerja di Browser Edge baru Microsoft), yang menghilangkan kebutuhan untuk menulis sesuatu yang khusus onkeypress=if(key=13) { function() }.

menggunakan input type = "search" buat kata kunci keybord memperlihatkan "pencarian", yang dapat meningkatkan pengalaman pengguna. Namun, Anda harus menyesuaikan gaya jika menggunakan tipe ini.

Tergantung pada sudut pandang programmer, seorang programmer dapat dengan mudah menentukan tujuan input dengan melihat jenisnya dan mudah untuk style CSS dan untuk JavaScript atau JQuery untuk memverifikasi aturan dalam input.

Tetapi memiliki pengaruh buruk pada elemen input Anda, jika Anda atur

<input type="search">

Dan di css Anda, Anda mengatur

input {background: url("images/search_bg.gif");}

Itu tidak akan muncul sama sekali.