Html5 Form Elemanları ve Kullanımı

Html5 Form Elemanları ve Kullanımı

Bu yazımızda html5 form elemanları ve nasıl kullanılacağı hakkında birlikte bilgi sahibi olacağız. Bildiğiniz üzere html5 ‘in hayatımıza yavaş yavaş girmesi kaçınılmaz olmaya başladı. Html5 bize yazım kolaylığı sağlamak için elinden geleni yapmış gibi görünüyor. Daha kısa kod yapısı ile bizi kalabalıktan ve bir çok javascript eklentinsinden kurtarmış.

Bir çok tarayıcı hala bazı elemanları desteklemese de ileride hepsini destekleyeceği muhakkak. Html5 isimli yazı serimizde sırası ile html elemanlarının kullanımı hakkında bilgiler vereceğiz. Sözü fazla uzatmadan html5 form elemanlarının bize ne yenilikler getirdiğinde birlikte bakalım.

Html5 Autofocus

Html5 autfocus ile tarayıcınızın ilk açılışında kullanıcıyı herhangi bir form elemanına odaklayabilirsiniz.

<input autofocus>

 

Html5 Required

Html5 required ile form elemanlarınızın boş bırakılmasını önleyebilirsiniz.

<form>
  <input required="">
  <input type="submit">
</form>

 

Html5 Placeholder

Html5 placeholder ile input, textarea gibi form elemanlarının içine açıklama girebilir kullanıcı veri girişine başladığı an açıklamanın kaybolmasını sağlayabilirsiniz.

<input type="text" placeholder="Kullanıcı adını giriniz">
<input type="password" placeholder="Şifrenizi giriniz">

 

Html5 Search

Html5 search ile bir arama alanı oluşturabilir bu arama alanına yazılan değerlerin sağ tarafta çıkan çarpı işareti ile bir çırpıda kullanıcıya sildirebilir ve result ve autosave özellikleri ile kullanıcıların aramalarının istediğiniz kısmını kaydedebilir ve otomatik olarak tamamlama yapabiliriniz.

<!-- result ile son 5 değerimizi kaydettik ve autosave ile benzersiz olmasını istedik -->
<input type="search" results="5" autosave="unique">

 

Html5 Email

Html5 email ile kullanıcıların eposta adresi girişi için bir alan oluşturabilirsiniz. Bu özellik Required ile kullanıldığında kullanıcının kurallara uygun bir email adresi girip girmediğini kontrol eder ve eğer kurallara uygun değil ise uyarı vermesini sağlayabiliriniz.

<form>
  <input type="email" required>
  <input type="submit">
</form>

 

Html5 Url

Html5 url ile kullanıcıların link (url) yazabileceği bir giriş alanı oluşturabilirsiniz. Bu özellik Required ile kullanıldığında kullanıcının kurallara uygun bir link (url) girip girmediğini kontrol eder ve eğer kurallara uygun değil ise uyarı vermesini sağlayabiliriniz.

<form>
  <input type="url" required>
  <input type="submit" required>
</form>

 

Html5 Tel

Html5 tel ile kullanıcıların telefon numaralarını yazabileceği bir giriş alanı oluşturabilirsiniz. Tel özelliğini yazdığınız giriş alanı mobil cihazlarda giriş yapıldığında telefon klavyesinin sadece sayı şeklinde açıldığını görebilirsiniz.

<input type="tel">

 

Html5 Number

Html5 number ile kullanıcıların sayı girebileceği bir alan oluşturabilirsiniz. Kullanıcılar giriş alanının sağında çıkan yukarı aşağı butonları ile sayıyı azaltıp artırabilir ayrıca bu işlemi faresinin scroll (ortadaki) tuşu ile yukarı aşağı yaparak da halledebilir.

Min ve max değerleri ile sayının kaçtan başlayıp kaça kadar yükseleceğini belirleyebilmek ile beraber step değeri ile sayının kaç kaç artacağını belirleyebilirsiniz.

<input type="number" min="0" max="15" step="3"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Range

Html5 range ile kullanıcılarınıza bir kaydırma çubuğu (scroll) ile sayı girmesini sağlayabilirsiniz. Kullanıcılar bu scroll’u sağa sola çekmek kaydı ile istedikleri sayı değerini girebilirler.

Min ve max değerleri ile sayının kaçtan başlayıp kaça kadar yükseleceğini belirleyebilmek ile beraber step değeri ile sayının kaç kaç artacağını belirleyebilirsiniz.

<input type="range" min="0" max="15" step="3"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Date

Html5 date ile kullanıcılarınız gün ay yıl girebileceği bir alan oluşturabilirsiniz. Kullanıcılar bu alanın sağında bulunan yukarı aşağı butonları ile gün ay ve yıl kısımlarını azaltıp artırabilmek ile beraber en sağ tarafta bulunan açılır menü sayesinde takvimden seçim yapabilirler.

<input type="date"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Month

Html5 month ile kullanıcılarınıza ay ve yıl girebileceği bir alan oluşturabilirsiniz. Kullanıcılar bu alanın sağında bulunan yukarı aşağı butonları ile ay ve yıl kısımlarını azaltıp artırabilmek ile beraber en sağ tarafta bulunan açılır menü sayesinde takvimden seçim yapabilirler.

<input type="month"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Week

Html5 week ile kullanıcılarınıza hafta ve yıl girebileceği bir alan oluşturabilirsiniz. Kullanıcılar bu alanın sağında bulunan yukarı aşağı butonları ile hafta ve yıl kısımlarını azaltıp artırabilmek ile beraber en sağ tarafta bulunan açılır menü sayesinde takvimden seçim yapabilirler.

<input type="week"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Time

Html5 time ile kullanıcılarınıza saat ve dakika girebileceği bir alan oluşturabilirsiniz. Kullanıcılar bu alanın sağında bulunan yukarı ve aşağı butonları ile saat ve dakika kısımlarını azaltıp artırmasını sağlayabilirsiniz.

<input type="time"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Datatime Local

Html 5 datatime local ile kullanıcılarınıza gün, ay, yıl, saat ve dakika girebileceği bir alan oluşturabilirsiniz. Kullanıcılar bu alanın sağında bulunan yukarı aşağı butonları ile  gün, ay, yıl, saat ve dakika kısımlarını azaltıp artırabilmek ile beraber en sağ tarafta bulunan açılır menü sayesinde takvimden seçim yapabilirler.

<input type="datetime-local"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Color

Html5 color ile kullanıcılarınıza renk girebileceği bir alan oluşturabilirsiniz. Kullanıcılar açılır menüdeki renk paletinden rengini seçebilir. Value kısmına girdiğiniz değer ile default olarak bir rengin seçimini sağlayabilirsiniz.

<input type="color" value="#e76252"><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Progress

Html5 progress ile kullanıcılarınıza bilgi amaçlı bir yükleme çubuğu oluşturabilirsiniz. Value kısmına girdiğiniz değerler yükleme çubuğunun ilerlemesine yardımcı olacaktır.

<progress max="100" value="75"></progress><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 List

Html5 list ile kullanıcılarınız giriş yapacağı form elemanına sizin belirleyeceğiniz değerler otomatik tamamlama yapabilirsiniz. Kullanıcı sizin belirlediğiniz bir kelimenin baş harfini yazdığında kelime giriş yapacağı form elemanın altına belirecektir.

<input name="text" list="veri" />
<datalist id="veri">
 <option value="Html5">
 <option value="Php">
 <option value="Codeigniter">
 <option value="Javascript">
 <option value="Css">
</datalist><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

 

Html5 Pattern

Html5 pattern ile kullanıcılarınız giriş yapacağı form elemanına düzenli ifadeler belirleyebilir kullanıcıların bu düzenli ifadeler dışında bir değer yazmasını engelleyebilirsiniz. Bu özellik Required ile kullanıldığında kullanıcının düzenli ifadeye uygun bir değer girip girmediğini kontrol eder ve eğer kurallara uygun değil ise uyarı vermesini sağlayabiliriniz.

<input name="txt" type="text" pattern="[0-9]{4}-[a-z]{3}" placeholder="0-9 arası 4 sayı -a'dan z'ye 3 harf gir" required />

 

Html 5 yazı serimizde form elemanlarını nasıl kullanacağımızı bize sağlayacağı kolaylıkları gördük. Benim unuttuğum ve yazarken hata yaptığım elemanlar olursa yorum belirtirseniz sevinirim. Bir sonraki html 5 yazı serimizde görüşmek üzere.