Label etiketi ile upload butonu tasarımını değiştirmek
Merhaba arkadaşlar html de bazı tasarımlarda dosya seçme alanının tasarımlı olduğunu görmüşsünüzdür. Peki bunu nasıl yaparlar? aynen bu soruyu bende sormuştum 🙂
Neyse size hem kısa bir bilgi vericem hemde yapılışını göstericem.
HTML deki label etiketi ne işe yarar?
Html etiketleriden olan Türkçe manasıda etiket anlamına gelen label html etiketi belirlediğiniz bir form elemanının tanımlanması için kullanılan bir etikettir. id ile form elemanına ait olduğunu belirtir. ÖRN: radio butonların yanlarındaki açıklama metnine tıklandığında radio butonu seçmesini istiyorsanız bunu kullanabilirsiniz.
Yukarıdaki html yapısını kullanarak “Seç” yazısına tıklandığında id ile uyuşan radio butonu seçtirebilirsiniz.
Label etiketini öğrendim dosya seçmesini nasıl yapıcam?
Dosya seçmede aslında aynı mantık olacak. Yapıyı göstereyim.
dosya seçme form elemanının display:none olması o form elemanının dom dan silinmesi demek değildir. Görsel olarak gözükmemesi demektir.
Yukarıdaki html de label etiketin içerisinde buton isimli class var siz bu class dosyasına tasarımınızı yapıyorsunuz ve zaten normal dosya seçme butonu tarayıcıda gözükmüyor. Sizin yaptığınız tasarıma tıklanınca dosya seçme form elemanı seçilmiş oluyor. Böylelikle tasarımlı dosya seçme butonu yapmış oluyorsunuz 🙂
input file display non labelt ile aynı id aldığı için labeldeki tasarıma tıklayınca file da seçilecek