.
Apa bedanya
Apa bedanya ? Tidak ada perbedaan dalam aksi tombol kirim yang dibuat dengan cara pertama atau kedua. Perbedaannya adalah bahwa elemen adalah wadah, sehingga elemen lain dapat ditempatkan di dalamnya, seperti gambar atau ikon.
Anda dapat menambahkan teks ke bidang formulir dengan dua cara:
Input::-webkit-input-placeholder ( color: #B6C0A5; font-style: italic; background: #E0EFCA; ) input:-moz-placeholder ( color: #B6C0A5; font-style: italic; background: #E0EFCA; ) input:-ms-input-placeholder ( warna: #B6C0A5; gaya font: miring; latar belakang: #E0EFCA; )
2)
Masukan (warna: putih; )
Untuk menampilkan ikon, jangan lupa sertakan .
2. Bidang pencarian dengan tombol ikon
* (ukuran kotak: kotak perbatasan;) bentuk ( posisi: relatif; lebar: 300 piksel; margin: 0 otomatis; ) masukan ( lebar: 100%; tinggi: 42 piksel; padding-kiri: 10 piksel; batas: 2 piksel solid #7BA7AB ; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C; ) tombol ( position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: #7BA7AB; radius batas: 0 5px 5px 0; kursor: penunjuk; ) tombol:sebelum ( konten: "\f002"; font-family: FontAwesome; ukuran font: 16px; warna: #F9F0DA; ) 3. Bidang pencarian dengan tombol di dalamnya
* (ukuran kotak: kotak perbatasan;) bentuk ( posisi: relatif; lebar: 300px; margin: 0 otomatis; ) masukan, tombol ( batas: tidak ada; garis besar: tidak ada; radius batas: 3px; ) masukan ( lebar: 100%; tinggi: 42px; latar belakang: #F9F0DA; padding-left: 15px; ) tombol ( tinggi: 26px; lebar: 26px; posisi: absolut; atas: 8px; kanan: 8px; latar belakang: #F15B42; kursor: penunjuk; ) button:before ( content: "\f105"; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold; ) 4. Bidang pencarian dengan gaya "datar"
* (ukuran kotak: kotak perbatasan;) bentuk ( posisi: relatif; lebar: 300px; margin: 0 otomatis; latar belakang: #A3D0C3; ) masukan, tombol ( batas: tidak ada; garis besar: tidak ada; latar belakang: transparan; ) masukan ( lebar: 100%; tinggi: 42px; padding-left: 15px; ) tombol ( tinggi: 42px; lebar: 42px; posisi: absolut; atas: 0; kanan: 0; kursor: penunjuk; ) tombol:sebelum (isi: "\f002"; font-family: FontAwesome; ukuran font: 16px; warna: #F9F0DA; ) 5. Kotak pencarian dengan batas bawah yang tebal
* (ukuran kotak: border-box;) bentuk ( posisi: relatif; lebar: 300px; margin: 0 otomatis; latar belakang: #F9F0DA; border-bottom: 4px solid #be290e; ) input, tombol ( border: none; outline : tidak ada; latar belakang: transparan; ) input ( lebar: 100%; tinggi: 42px; padding-left: 15px; ) tombol ( tinggi: 42px; lebar: 42px; posisi: absolut; atas: 0; kanan: 0; kursor: pointer; ) button:before ( content: "\f178"; font-family: FontAwesome; font-size: 20px; color: #be290e; ) 6. Bidang pencarian dengan mengubah warna perbatasan
* (ukuran kotak: kotak perbatasan;) bentuk ( posisi: relatif; lebar: 300px; margin: 0 otomatis; ) masukan, tombol ( garis besar: tidak ada; latar belakang: transparan; ) masukan ( lebar: 100%; tinggi: 42px ; padding-left: 15px; border: 3px solid #F9F0DA; ) tombol ( border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; ) button:before ( konten: "\f002"; font-family: FontAwesome; font-size: 16px; warna: #F9F0DA; ) input:fokus ( border-color: #311c24; ) 7. Geser kotak pencarian
Bidang pencarian muncul ketika Anda mengklik tombol ikon.
* (ukuran kotak: kotak perbatasan;) bentuk ( posisi: relatif; lebar: 300px; margin: 0 otomatis; tinggi: 42px; ) masukan ( tinggi: 42px; lebar: 0; padding: 0 42px 0 15px; batas: tidak ada; border-bottom: 2px solid transparent; outline: none; background: transparent; transisi: .4s cubic-bezier (0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index : 2; ) tombol input:focus ( width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; ) ( background: #683B4D; border: none; height: 42px; lebar: 42px; posisi: absolut ; atas: 0; kanan: 0; kursor: penunjuk; ) tombol:sebelum ( konten: "\f002"; font-family: FontAwesome; ukuran font: 16px; warna: #F9F0DA; )8. Meningkatkan bidang pencarian
* (ukuran kotak: kotak perbatasan;) bentuk ( lebar: otomatis; float: kanan; margin-kanan: 30px; ) masukan ( lebar: 250px; tinggi: 42px; padding-kiri: 15px; radius batas: 42px; perbatasan: 2px solid #324b4e; latar belakang: #F9F0DA; garis besar: tidak ada; posisi: relatif; transisi: .3s linier; ) tombol input:fokus (lebar: 300px; ) (lebar: 42px; tinggi: 42px; latar belakang: tidak ada; border: none; position: absolute; top: -2px; right: 0; ) button:before( content: "\f002"; font-family: FontAwesome; color: #324b4e; ) Dalam tutorial ini, kami akan membuat formulir pencarian drop-down yang sangat cocok dengan desain antarmuka untuk perangkat seluler. Hanya CSS yang akan digunakan untuk mengimplementasikan elemen - tidak ada JavaScript atau markup tambahan. Cara sederhana dan efisien untuk menerapkan formulir pencarian yang ringkas.
Tujuan
Pada perangkat seluler, setiap piksel diperhitungkan. Untuk meminimalkan jumlah ruang yang dibutuhkan untuk menampilkan formulir, awalnya akan ditampilkan dalam bentuk kompak dan diperluas ketika menerima input fokus (:fokus). Pendekatan ini memungkinkan Anda menghemat ruang untuk elemen dan konten antarmuka lainnya.
markup HTML
Formulir menggunakan HTML5. Kodenya sangat sederhana:
Menyetel Ulang Tampilan Formulir Pencarian Default di Browser Webkit
Secara default, di browser Webkit, formulir pencarian akan terlihat seperti ini:
Agar formulir pencarian terlihat seperti bidang input teks biasa, Anda perlu menambahkan gaya berikut:
Input ( -penampilan webkit: bidang teks; -ukuran kotak webkit: kotak konten; keluarga font: mewarisi; ukuran font: 100%; ) input::-webkit-search-decoration, input::-webkit- search-cancel-button ( tampilan: tidak ada; )
Membangun formulir pencarian kami
Bidang input akan memiliki lebar reguler 55px dan diperluas hingga 130px dalam keadaan :fokus. Properti transisi digunakan untuk animasi dan bayangan kotak digunakan untuk efek cahaya.
Masukan ( background: #ededed url(img/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; lebar: 55px; /* Lebar default */ -webkit- border -radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: semua .5s; -moz-transition: semua .5s; transisi: semua .5s; ) input: fokus ( lebar : 130px; /* Lebar dengan fokus input */ background-color: #fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109.207.246,.5); -moz-box- shadow: 0 0 5px rgba(109.207.246,.5); bayangan kotak: 0 0 5px rgba(109.207.246,.5); /* efek cahaya */ )
Contoh B
Dalam contoh B, formulir pencarian diminimalkan secara signifikan - hanya ikon yang ditampilkan tanpa mengisi teks. Perhatikan bahwa padding dan properti lebar dari bidang pencarian telah berubah menjadi tombol bulat. Properti color:transparent digunakan untuk membuat teks tidak terlihat.
#demo-b input ( lebar: 15px; padding-left: 10px; warna: transparan; kursor: pointer; ) #demo-b input:hover ( background-color: #fff; ) #demo-b input:fokus (lebar : 130px; padding-left: 32px; warna: #000; warna latar: #fff; kursor: otomatis; )
Kompatibilitas Peramban
Metode yang dijelaskan berfungsi di semua browser utama: Chrome, Firefox, Safari, dan IE8+. Di IE7 dan browser yang lebih lama, fungsionalitas tidak berfungsi karena kurangnya dukungan untuk kelas semu :fokus dan jenis bidang pencarian.
Bagi banyak orang, efektivitas mencari informasi di Internet adalah kaki yang memberi makan serigala. Di mana saya dapat menemukan informasi terkini dan terkini? Dimana untuk membeli lebih murah dan menjual lebih mahal? Di mana saya dapat menemukan instruksi paling akurat untuk melakukan tugas tertentu? Dimana untuk menonton film online? Untuk menjawab pertanyaan ini dan pertanyaan serupa dari pengguna seakurat mungkin, mesin pencari dari tahun ke tahun meningkatkan mekanisme yang sudah canggih untuk menampilkan situs dalam hasil pencarian untuk permintaan pengguna tertentu. Tujuan mesin pencari adalah membawa orang ke situs terbaik untuk mendapatkan jawaban atas pertanyaan mereka.
Selain mesin pencari, mesin pencari itu sendiri dilengkapi dengan filter pencarian sehingga setiap pengguna dapat mempersempit ruang lingkup pencarian informasi atau menentukan permintaan mereka.
Pertimbangkan di bawah ini beberapa ekstensi pencarian yang dapat ditambahkan ke browser populer, dan, sebagai hasilnya, meningkatkan efisiensi pencarian informasi di Internet.
Ekstensi Pencarian untuk Google Chrome
Cari situs saat ini
Tidak setiap situs dilengkapi dengan mesin pencari internal, dan pada sumber daya seperti itu Anda harus berlari dari bagian ke bagian untuk waktu yang lama untuk mencari informasi tertentu. Ekstensi browser untuk mencari di dalam situs adalah alat universal yang akan selalu tersedia, apa pun situs yang Anda buka. Yang perlu Anda lakukan untuk menemukan informasi yang Anda butuhkan di dalam situs adalah memasukkan kueri kunci di bidang pencarian kecil yang muncul saat Anda mengklik tombol ekstensi pada panel browser.
Hasil pencarian mesin pencari akan terbuka di tab browser baru, dan halaman situs tertentu tempat kata kunci muncul akan dipilih di dalamnya.
Cari situs saat ini disematkan dengan mesin pencari Google yang sudah diinstal sebelumnya, tetapi Anda dapat mengatur mesin pencari lain di parameter ekstensi - Yandex, Yahoo atau Bing. Untuk melakukan ini, panggil menu konteks pada tombol ekstensi dan pilih perintah "Parameter".
Opsi ekstensi akan terbuka di tab browser baru, di mana kita dapat memilih mesin pencari yang berbeda. Dan sudah dia akan mencari di dalam situs.
Pencarian Google Alternatif
Mesin pencari Yandex awalnya menyediakan kemampuan untuk mencari informasi di dua mesin pencari lainnya - Google dan Bing - dengan satu klik, meskipun tautan untuk menuju ke mesin pencari ini, bersama dengan kueri kunci yang dimasukkan, berkumpul di bagian paling bawah halaman. halaman hasil pencarian.
Tetapi Google lebih egois dalam hal ini - dalam hasil pencariannya tidak disebutkan tentang mesin pencari yang bersaing. Anda dapat memperbaiki situasi ini dengan menerapkan ekstensi Pencarian Alternatif Google Chrome di Google Chrome.
Daripada terus-menerus mengetik embel-embel kata kunci "torrent" setiap kali mendapatkan hasil pencarian untuk pelacak torrent, lebih mudah untuk menginstal ekstensi khusus untuk tujuan ini TMS (Torrents MultiSearch).
Tombol ekstensi tertanam di bilah alat browser, dan ketika diklik, bidang pencarian kecil akan terbuka untuk memasukkan kueri.
Hasil pencarian muncul di tab terpisah, dan ini akan menjadi konten yang hanya ditemukan di pelacak torrent Runet, dan bukan di situs warez, portal perangkat lunak dan media, atau situs resmi.
Dalam hasil pencarian pelacak torrent, konten yang ditemukan dapat disaring berdasarkan ukuran file atau tanggal unggah. Anda dapat menentukan kata kunci tambahan untuk mempersempit pencarian Anda.
Hasil pencarian juga dapat dilihat secara terpisah untuk pelacak torrent tertentu dan secara terpisah untuk jenis konten seperti film, musik, perangkat lunak.
Selain itu, ekstensi TMS disematkan di menu konteks browser sehingga Anda dapat mengirim kata atau frasa apa pun yang disorot di halaman Internet untuk mencari pelacak torrent tanpa terlalu repot menyalin dan menempel.
Pencarian konteks
Google Chrome telah menerapkan fungsi pencarian kontekstual menggunakan mesin pencari tunggal yang dipasang di browser default. Untuk meningkatkan jumlah mesin pencari yang dengannya Anda dapat mencari kata yang dipilih di halaman situs, ekstensi "Penelusuran Konteks" dimaksudkan.
Ekstensi awalnya memiliki kemampuan untuk mencari pelacak torrent paling populer RuTracker, Wikipedia dan portal media Kinopoisk.Ru.
Mesin pencari lain, sehingga melalui mereka dimungkinkan untuk mencari informasi langsung dari menu konteks browser, ditambahkan dalam parameter ekstensi. Buka menu Google Chrome, pilih "Pengaturan" dan buka bagian ekstensi yang dipasang di browser.
Dalam daftar ekstensi, pilih yang kita butuhkan - "Pencarian Konteks". Klik tautan "Pengaturan".
Ekstensi pencarian untuk Opera
Cari di dalam situs
Tombol ekstensi terletak di bilah alat browser, dan dengan mengkliknya, Anda dapat memanggil bidang pencarian untuk memasukkan kueri kunci, serta mengubah mesin pencari.
Yandex dan Google yang sudah diinstal sebelumnya dalam pengaturan ekstensi dapat dilengkapi dengan mesin pencari lainnya. Panggil menu konteks pada tombol ekstensi dan pilih perintah "Pengaturan".
Dengan cara yang sama seperti dalam kasus ekstensi Pencarian Konteks untuk Google Chrome, untuk menambahkan mesin pencari baru, Anda harus memasukkan string URL-nya.
Torrents MultiSearch
Pencarian gambar serupa
Pencarian gambar serupa menambahkan perintah tambahan ke menu konteks browser Opera untuk mencari gambar serupa menggunakan beberapa mesin pencari.
Atau daftar publikasi dengan gambar serupa akan disajikan.
Ekstensi pencarian untuk Mozilla Firefox
Mencari situs
Seperti dalam dua kasus sebelumnya, ekstensi khusus untuk mencari di dalam situs mana pun di Internet juga tersedia untuk browser Mozilla Firefox.
Hanya dalam kasus Fire Fox, pencarian situs disematkan di bidang pencarian yang ada di browser, menambahkan ikonnya dalam bentuk kaca pembesar merah di depan ikon pencarian biasa.
Mengubah mesin pencari default untuk pencarian Mozilla Firefox biasa memerlukan perubahan mesin pencari untuk pencarian di dalam situs juga.
Ekstensi Pencarian Situs terintegrasi ke dalam menu konteks Mozilla Firefox, dan dengan memilih kata apa pun yang muncul, Anda dapat melihat semua halaman situs tempat kata ini ada dalam hasil pencarian terpisah.
Cari dengan byffox
Produk perangkat lunak apa pun dengan nama "belum matang" seperti itu, sebagai suatu peraturan, mengganggu banyak pengguna dengan fakta bahwa mereka bahkan tidak mengisyaratkan tujuan yang dimaksudkan dari toolkit yang diusulkan.
Dan Anda harus belajar tentang apa sebenarnya yang ditawarkan "Softina dari Vasya" atau "Repak dimainkan dari Petya" hanya setelah berkenalan dengan deskripsi secara mendetail. Namun, di balik nama sembrono seperti "Search by byffox" terdapat fungsi yang berguna dan cerdas. Ekstensi ini memungkinkan Anda untuk mengisi kembali menu konteks browser dengan perintah pencarian tambahan untuk kata yang dipilih menggunakan berbagai mesin pencari.
nama kunci parameter. Untuk bidang pencarian, "q" atau "teks" paling sering digunakan. nilai kunci parameter. Paling sering itu tidak diatur. Pengguna dapat mengubahnya menjadi teks mereka sendiri jika atribut readonly dan disabled tidak ditentukan. modifikasi pengguna memblokir akses yang diblokir, modifikasi pengguna dan transfer data bidang parameter saat ini tidak boleh kosong templat input seperti pada ekspresi reguler js , yang harus diikuti untuk mengirimkan formulir jumlah minimum karakter yang diperlukan untuk mengirimkan formulir jumlah maksimum karakter yang dapat diketik pengguna panjang bidang dalam karakter petunjuk rintisan
tooltip pada mouse hover pelengkapan otomatis. Peramban modern menunjukkan istilah penelusuran yang dimasukkan sebelumnya pada domain saat ini. Anda dapat mematikannya atau membuatnya lebih spesifik. daftar kueri yang direkomendasikan diperiksa untuk bidang fokus ejaan dan tata bahasa (yaitu, periode antara mengklik elemen dan mengklik di luar elemen) yang diperoleh saat dokumen dimuat
Hapus tanda silang "Hapus" di bidang pencarian, yang menghapus teks yang diketik sebelumnya
Cara kerja formulir pencarian di situs
Kode HTML paling sederhana
Jika Anda mengetik di kolom "pertanyaan" dan mengklik tombol "Temukan", alamat halaman akan berubah dari "http://site/2011/06/forma-poiska-po-saitu..html ?teks=pertanyaan ", seperti ini terjadi ketika Anda mengklik tautan . Saat halaman dimuat, skrip memeriksa yang diberikan parameter di URL dan ketika ditemukan, itu menghasilkan dan menampilkan hasil pencarian untuk situs tersebut.
Tetapi untuk meningkatkan kecepatan memuat dokumen, skrip yang memproses permintaan biasanya ditempatkan hanya pada satu halaman situs, yang akan diarahkan jika alamatnya ditulis dalam atribut tindakan: “ http://situs/pencarian/ ?teks=pertanyaan.
Agar skrip berfungsi, parameter tambahan mungkin diperlukan, yang ditentukan dalam cariid=808327 &teks=pertanyaan.
Buka hasil formulir di tab baru dengan atribut target
Di mana saya bisa mendapatkan skrip pencarian situs?
Anda dapat gunakan
Opsi termudah adalah mengarahkan permintaan ke Google:
Teks tombol: "Cari", "Cari", "Temukan"
Dari kata-kata motivasi, "Temukan" memiliki bentuk yang sempurna dan menyiratkan bahwa hasil pencarian akan selalu positif.
