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

132

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" />?

forms  html  input 
— Vijin Paulraj
sumber
1
— Marc B

Jawaban:

176

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"); }
— Norguard
sumber
12
+1 untuk dua poin yang valid, 1) internal search applet for mobile phone. 2) ability to make better presentation. Namun, saya harus menunggu untuk menerima jawabannya, karena saya ingin memastikan tidak ada tujuan lain :)
— Vijin Paulraj
Saat ini, tidak ada. Input adalah semua hanya nama saja saat ini (seperti hanya ada dukungan parsial untuk input [type = color]), atau browser telah menerapkan penanganan khusus mereka sendiri (seperti type = number atau type = email atau type = range). Tidak ada pilihan lain - itu punya penanganan khusus oleh browser, atau tidak. Saat ini, di sebagian besar browser, ketik = search tidak, dan mungkin tidak akan (kecuali MAYBE membuatnya seperti kotak pencarian di iTunes atau beberapa aplikasi lain). Saat ini, ada di sana sehingga ANDA dapat menambahkan fungsionalitas / presentasi tambahan dengan mengetahui itu kotak pencarian.
— Norguard
39
Satu perbedaan adalah bahwa menekan [Esc] pada input pencarian akan menghapus hasilnya. Sangat berguna jika pengguna Anda sering menggunakannya.
— Josh Habdas
@JoshH yang adalah super-berguna. Adakah yang tahu browser (dan versi) yang mempengaruhi, saat ini? Saya benar-benar bersedia untuk memperbarui jawabannya dan membawanya ke keadaan saat ini (/ masa depan), mengingat bahwa lanskapnya sangat berbeda sekarang, daripada satu setengah tahun yang lalu.
— Norguard
2
Saya tidak akan merekomendasikan menggunakan elemen semu pada elemen yang diganti: itu bertentangan dengan standar , meskipun berfungsi dalam beberapa kasus.
— Paul Kozlovitch
29

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:

— Jashwant
sumber
24

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
— Harsh Raj
sumber
Ini tentu saja tidak terjadi di mana-mana. Di lingkungan manakah ini diamati?
— Stéphane Gourichon
2

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.

— sage88
sumber
1

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

— Yidea
sumber
1

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() }.

— James Groves
sumber
1

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

— qingyang yu
sumber
0

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.

— Fil
sumber
-1

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.

— BAJA
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.