HTML5, gerek tarayıcılar gerekse web sayfa tasarımı için pek çok yenilik getirmiştir. Kodlama altyapısı olarak da sağladığı faydalar son derece fazladır — bu bakımdan HTML5 web için gerçek bir devrim niteliği taşımaktadır.
Güncel JavaScript özellikleri ise ön yüz kodlamasında ihtiyaç duyulan her şeyi karşılayacak güçtedir. Buna Bootstrap gibi güçlü bir tasarım yardımcısını eklediğinizde işler çok daha kolaylaşmaktadır. Aşağıda bu teknolojilerin öne çıkan birkaç özelliğini inceliyoruz.
datalist — Listeli Öneri Kutusu
datalist, HTML5 ile gelen ve listeleme ile öneri kutusu özelliğini birleştiren bir etiket türüdür.
Kullanıcı yazarken eşleşen seçenekleri otomatik olarak önerir.
<input list="petlist" placeholder="Evcil hayvanınız..."> <datalist id="petlist"> <option value="Kuş"> <option value="Kedi"> <option value="Tavşan"> <option value="Kaplumbağa"> <option value="Balık"> </datalist>
input type — Tarih, Saat ve Daha Fazlası
HTML5 input etiketinde type="date" seçildiğinde tarayıcı yerleşik
tarih seçici sunar; datetime-local ise yerel tarih ve saat seçimini sağlar.
<!-- Tarih seçimi --> <input type="date" name="birthday"> <!-- Yerel tarih ve saat seçimi --> <input type="datetime-local" name="mydatetime">
Diğer yararlı input type değerleri:
- color — renk seçimi için
- email — e-posta alanı olarak belirlemek için
- number — sayı girişi ve limit belirleme için
- range — basit aralık seçimi için
- search — arama alanı için
autocomplete
Form veya input için autocomplete özelliği açılıp kapatılabilir.
Hassas veri içeren formlarda kapatılması önerilir.
<form autocomplete="on"> <!-- veya "off" --> ... </form>
FormData + XMLHttpRequest ile Ajax Gönderimi
FormData nesnesi, Ajax ile form verilerini kolayca gönderebilmemizi sağlar.
Aşağıdaki örnek, bir formu seçip tüm alanlarını Ajax POST isteğiyle gönderir.
function selectForm(url, formId) {
let formElement = document.getElementById(formId);
let formData = new FormData(formElement);
sendSelect(url, selectResp, formData);
}
function sendSelect(url, callFunc, formData) {
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callFunc(xhr);
}
};
xhr.send(formData);
}
Bootstrap ile Menü
Bootstrap'in navbar bileşeni, responsive bir menüyü çok az kodla oluşturmanızı sağlar.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/baslangic.html">MHK</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/baslangic.html">Başlangıç</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/iletisim.html">İletişim</a>
</li>
</ul>
</div>
</nav>
Bootstrap ile Form
Bootstrap form bileşenleri, datalist ile birleştirildiğinde otomatik tamamlamalı,
responsive bir arayüz oluşturmak kolaylaşır.
<datalist id="paths">
<option value="/myProj/admin/"></option>
<option value="/myProj/code/"></option>
<option value="/myProj/file/"></option>
</datalist>
<form id="saveForm" enctype="multipart/form-data">
<div class="form-group">
<table class="table table-borderless">
<tbody>
<tr>
<td><label for="y_1">Dosya Adı:</label></td>
<td>
<input type="text" class="form-control form-control-sm"
name="file_name" id="y_1"
placeholder="Dosya adını giriniz" required>
</td>
<td><label for="y_2">Yol:</label></td>
<td>
<input type="text" class="form-control form-control-sm"
name="adr_path" id="y_2"
placeholder="Yolu giriniz" list="paths" required>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-sm"
onclick='sendInsert("/myProj/myServlet","saveForm")'>
Kaydet
</button>
</td>
<td><button type="reset" class="btn btn-sm">İptal</button></td>
</tr>
</tbody>
</table>
</div>
</form>