Merhaba arkadaşlar kısa bir süre önce keşfetmiş olduğum 3 adet HTML etiketinden ve bu HTML etiketlerinin ne işe yaradıklarından bahsetmek istiyorum.

Bahsedeceğim HTML etiketleri,

  • datalist
  • details
  • inputmode

Datalist Nedir ?

Datalist ile arama yapılabilinen inputlar oluşturabiliriz. Kullanımı şu şekildedir.

<form>
    <label for="dataList">Arama Yapınız:</label>
    <input list="deneme" name="dataList" />
    <datalist id="deneme">
      <option value="Deneme 1">
      <option value="Deneme 2">
      <option value="Deneme 3">
      <option value="Deneme 4">
      <option value="Deneme 5">
      <option value="Deneme 6">
      <option value="Deneme 7">
      <option value="Deneme 8">
   </datalist>
</form>

şeklinde kullanabilirsiniz bu bize görüntü olarak şöyle bir çıktı verecektir.

Bu şekilde dropdown aranabilen aramalar yapabiliriz. Bu HTML özelliğine şu tarayıcılar destek vermektedir.

Details Nedir ?

Details, elementi ayrıca içinde 2 adet alt element barındırması zorunlu olan bir elementtir bu elemenlerden ilki summary ikincisi ise p elementidir. Bu element aslında Javascript ile yapabileceğimiz akordiyon uygulamasının Javascript kullanmadan bu işlemi yapmamızı sağlıyor. Kullanımına bir örnek olarak

<details open>
   <summary>Deneme 1</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 2</summary>
   <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 3</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 4</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>

Bunun çıktısı şu şekilde olacaktır

Bu elementin tarayıcı desteği ise şu şekilde olacaktır.

Inputmode Nedir ?

inputmode bir HTML element değil ve aslında masaüstü için herhangi bir şey ifade etmiyor fakat mobil cihazlar için inputmode’a girilen değere göre açılan klavye değişmektedir.

Genel olarak şöyle bir kullanımı vardır

<input inputmode="value">

burada value yerine yazabileceğimiz işinize yarayacak 4 tanesinden bahsedeceğim.

  • numeric -> Numaradan oluşan klavyeyi açar
  • email -> Klavyeyi e-posta adresi girmeye uygun klavye açar
  • tel -> Telefon numarası girmeye uygun için klavye açar
  • url -> URL girmeye uygun klavye açar.

Bu özellik sadece Android için Chrome da ve iOS için Safari ile desteklemektedir. Inputmode’un diğer değerleri hakkında detaylı bilgi almak için buraya tıklayınız.

Özet,

Bu yazımda sizlere genel olarak az bilinen fakat işlevi çok olan 2 adet HTML elementi ve 1 HTML özelliği olan datalist, details ve inputmode’dan bahsettim. Datalist ile dropdown menülü bir arama kutusu yapabilirken. Details ile Javascript ile akordiyon uygulamalarının yaptığı işi yapıyor. inputmode ise mobil cihazlarda o inputun alması gereken değerlere göre farklı klavyeler çıkarmamızı sağlıyor.

Bu yazımı beğendiyseniz ve HTML / CSS hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayabilirsiniz.