Html'de bir arama dizesi nasıl yazılır? Açılır arama alanı. Kalın alt kenarlıklı arama alanı
25 Ekim 2019 Gönderi güncellendi
Sitedeki çekilebilir arama formu
Düz stil, web sitesi tasarımında önemli bir popülerlik kazanmıştır. Ve bu dersimizde sitenin bu tarzda yapılmış başka bir unsuruna bakacağız. Bu öğe bir arama formudur. Ama basit bir arama değil, tıklandığında ortaya çıkan ve kullanılmadığı takdirde “çöken” bir arama formu. Arama simgesine gelince, bir SVG dosyasından alınır ve farklı ekran çözünürlüklerinde ölçeklenebilir (örneğin, mobil cihazlar ve büyük monitörlerde).
Bir örnek burada görülebilir:
İndirmek
Dışarıya çekilebilen arama formu
Nasıl kullanılır?
HTML'
Öncelikle HTML sayfasında yer alacak işaretlemeye karar verelim:
| 1 2 3 4 5 6 7 | <div kimliği = "sb-arama" class = "sb-arama" > <form > <giriş sınıfı = "sb-search-input" yer tutucusu= "Ne arayacaklar?" type = "metin" değer = "" isim = "arama" id = "arama" > <giriş sınıfı = "sb-arama-gönder" type = "gönder" değer = "" > <span sınıfı = "sb-icon-search" > </form> </div> |
Arama formunda olağandışı hiçbir şey yok: giriş için bir metin alanı, bir arama düğmesi ve bir öğe simge için.
CSS
Şimdi arama formunun sayfada güzel görünmesini sağlayacak stiller ekleyelim.
Tıklandığında görüneceği için başlangıçta gizlidir. Bu özellik kullanılarak yapılır taşma ve anlamı gizlenmiş bunun sonucunda simgenin dışındaki her şey gizlenir (sonunda yalnızca simgeyi görürüz, ancak metin alanını görmeyiz):
| .sb-search ( konum: göreceli; kenar boşluğu üst: 10 piksel; genişlik: %0; minimum genişlik: 60 piksel; yükseklik: 60 piksel; kayan nokta: sağ; taşma: gizli; -webkit-transition: genişlik 0,3s; -moz- geçiş: genişlik 0,3 sn; geçiş: genişlik 0,3 sn; -webkit-arka yüz görünürlüğü: gizli ) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .sb-search-input ( konum: mutlak; üst: 0; sağ: 0; kenarlık: yok; anahat: yok; arka plan: #fff; genişlik: %100; yükseklik: 60 piksel; kenar boşluğu: 0; z-index: 10 ; dolgu: 20 piksel 65 piksel 20 piksel 20 piksel; yazı tipi boyutu: 20 piksel; renk: #2c3e50 ; ; |
İsteğin arka planında yer alan metnin rengini (arama yaparken girdiğimiz metin) belirliyoruz:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sb-search-input : :-webkit-input-placeholder ( color : #efb480 ; ) .sb-search-input :-moz-placeholder ( color : #efb480 ; ) .sb-search-input : :-moz- yer tutucu ( color : #efb480 ; ) .sb-search-input :-ms-input-placeholder ( color : #efb480 ; ) |
Arama düğmesi her zaman sayfadaki diğer blokların ve öğelerin üzerinde bulunur, bu yüzden onu veriyoruz büyük değer z-endeksi:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .sb-icon-search ( color : #fff ; arka plan : #e67e22 ; z-index : 90 ; font-size : 22px ; font-family : "icomoon" ; konuşma : yok ; font-style : normal ; font-weight : normal ; yazı tipi değişkeni : normal ; metin dönüşümü : yok ; -webkit-yazı tipi yumuşatma : kenar yumuşatma .sb-icon-search :before ( içerik : " \e000 "; } |
Ayrıca özel simgeler (SVG) eklemeyi de unutmayın. Arama düğmesine bir simge eklemek için:
| 1 2 3 4 5 6 7 8 9 10 | @font-face ( font-family : "icomoon" ; src: url ( "../fonts/icomoon/icomoon.eot") ); kaynak:url("../fonts/icomoon/icomoon.eot?#iefix" ) format("gömülü-açıktip") , url ("../fonts/icomoon/icomoon.woff" ) format("woff"), url ("../fonts/icomoon/icomoon.ttf"<) format("truetype" betiği > <script src = "js/uisearch.js" > komut dosyası ><new UISearch(document.getElementById("sb-search")); |
/script>
Çözüm
Sitede çok az yer kaplayan ve arama ikonuna tıkladığınızda güzel bir şekilde karşınıza çıkan hoş bir arama formu. Bu eğitimde, mobil cihazlar için arayüz tasarımına mükemmel şekilde uyacak bir açılır arama formu oluşturacağız. Öğeyi uygulamak için yalnızca CSS kullanılacaktır; JavaScript veya ek işaretleme kullanılmayacaktır. Basit ve etkili yol
kompakt bir arama formu uygulamak.
Mobil cihazlarda her piksel sayılır. Formu görüntülemek için gereken alanı en aza indirmek amacıyla, başlangıçta kompakt bir biçimde gösterilecek ve giriş odağı (:focus) alındığında genişletilecektir. Bu yaklaşım, diğer arayüz öğeleri ve içerik için yerden tasarruf etmenizi sağlar.
HTML işaretlemesi
Form HTML5 kullanıyor. Kod çok basit:
Webkit tarayıcılarında varsayılan arama formu görünümünü sıfırlama
Varsayılan olarak Webkit tarayıcılarında arama formu şu şekilde görünecektir:
Arama formunun normal bir metin giriş alanı gibi görünmesini sağlamak için aşağıdaki stilleri eklemeniz gerekir:
Giriş ( -webkit-appearance: metin alanı; -webkit-box-sizing: içerik kutusu; font-family: devralma; font-size: 100%; ) input::-webkit-search-decoration, input::-webkit- arama-iptal-düğmesi (görüntü: yok; )
Arama formumuzu oluşturma
Giriş alanının normal genişliği 55 piksel olacak ve :focus durumunda 130 piksele genişleyecektir. Animasyon için geçiş özelliği, parlama efekti için ise kutu gölgesi kullanılır.
Giriş ( arka plan: #ededed url(img/search-icon.png) tekrarlanmayan 9 piksel merkez; kenarlık: katı 1 piksel #ccc; dolgu: 9 piksel 10 piksel 9 piksel 32 piksel; genişlik: 55 piksel; /* Varsayılan genişlik */ -webkit- kenarlık -yarıçap: 10em; -moz-sınır-yarıçap: 10em; -webkit-transition: tümü .5s; genişlik: 130 piksel; /* Giriş odaklandığında genişlik */ arka plan rengi: #fff; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); */ )
Örnek B
Örnek B'de, arama formu önemli ölçüde küçültülmüştür; doldurma metni olmadan yalnızca simge görüntülenir. Arama alanının dolgu ve genişlik özelliklerinin dairesel bir düğme oluşturacak şekilde değiştiğine dikkat edin. Metni görünmez yapmak için color:transparent özelliğini kullanın.
#demo-b girişi ( genişlik: 15 piksel; sol dolgu: 10 piksel; renk: şeffaf; imleç: işaretçi; ) #demo-b girişi: vurgulu ( arka plan rengi: #fff; ) #demo-b girişi: odak ( genişlik : 130 piksel; sol dolgu: 32 piksel; arka plan rengi: #fff;
Tarayıcı uyumluluğu
Açıklanan yöntem tüm önemli tarayıcılarda çalışır: Chrome, Firefox, Safari ve IE8+. IE7 ve daha eski tarayıcılarda, sözde sınıf:focus ve arama alanı türü desteğinin olmaması nedeniyle işlevsellik çalışmaz.
parametre anahtarı adı. Arama alanı için en sık "q" veya "text" kullanılır. parametre anahtar değeri. Çoğu zaman sorulmaz. Salt okunur ve devre dışı bırakılmış öznitelikler belirtilmemişse kullanıcı bunu kendi metniyle değiştirebilir. kullanıcı tarafından değişiklik engellendi erişim, kullanıcı tarafından değişiklik ve mevcut parametrenin verilerinin iletimi engellendi alan boş olamaz normal ifadeler JS'deki gibi giriş şablonu, formu göndermek için takip edilmesi gerekir
Formu göndermek için gerekli karakterler Kullanıcının yazabileceği maksimum karakter sayısı Karakterlerdeki alan uzunluğu Fare imlecini üzerine getirdiğinde yer tutucu araç ipucu ipucu otomatik tamamlama. Modern tarayıcılar, geçerli etki alanında önceden girilen arama sorgularını gösterir. Bunu kapatabilir veya daha spesifik hale getirebilirsiniz.
Önerilen sorguların listesi, belgeyi yüklerken elde edilen, yazım ve dilbilgisi açısından denetlenen alan odağı (yani, bir öğeye tıklamak ile öğenin dışına tıklamak arasındaki süre)
Bulmak
Daha önce yazılan metni silen "Temizle" çarpı işaretini arama alanından kaldırın Sitedeki arama formu nasıl çalışır? En basit HTML kodu
?metin=soru ", bir bağlantıya tıkladığınızda olduğu gibi. Sayfa yüklendiğinde komut dosyası, URL'de belirtilen parametrelerin varlığını kontrol eder ve tespit edilirse site için arama sonuçları oluşturur ve görüntüler. isim = "metin"
http://site/arama/ ?metin=soru". action = "http://site/arama/" Komut dosyasının çalışması için, belirtilen ek parametreler gerekli olabilir.
. Bu alan görüntülenmiyor.
&metin=soru".
Target özelliğini kullanarak formun sonucunu yeni bir sekmede açın
- hedef = "_ boş"
- Bir site arama komut dosyasını nereden alabilirim? Kullanabilirsin Yandex ve Google'ın özel hizmetleri tarafından sunulan,
- Kullanılan CMS'ye yerleşiktir (varsa), örneğin Blogger'da "https://"
site.ru
bağımsız olarak geliştirildi, örneğin PHP'de.
Motive edici kelimelerden “Bul” mükemmel bir forma sahiptir ve arama sonucunun kesinlikle olumlu olacağını ima eder.
Site için arama alanı- biri temel elementler Bir web sayfasındaki kullanıcı arayüzü. Onun yardımıyla kullanıcı sitenizde istediği içeriği bulabilir.
Bu eğitimde, HTML5 kullanarak arama alanı işaretlemesinin nasıl oluşturulacağını ve kod yazmadan CSS3 kullanarak form öğelerinin nasıl stillendirileceğini öğreneceksiniz.
1. HTML işaretlemesi
Öğe