HTML5, gerek tarayıcılar ve gerekse web sayfa tasarımı için bir çok yenilikler getirmiştir.
Ayrıca kodlama alt yapısı olarak da bize sağladığı oldukça fazla şey vardır.
Bu bakımdan HTML5 aslında web için bir devrim niteliğindedir.
Güncel javascript özellikleri ise ön yüz kodlamasında bizim bütün ihtiyaçlarımızı karşılayacak güçtedir.
Buna Bootstrap gibi kuvvetli bir tasarım yardımcısını eklerseniz yapmak istediğiniz işler oldukça kolaylaşacaktır.
Bunu birkaç örnek ile inceleyebiliriz:
datalist HTML5 ile gelen ve listeleme ile öneri kutusu özelliğini birleştiren tag dır.
<datalist id="petlist">
<option value="Kuş">
<option value="Kedi">
<option value="Tavşan">
<option value="Kaplumbağa">
<option value="Balık">
</datalist>
HTML5 input tag ında type argumanını date seçersek bize tarih seçimi konusunda yardımcı olur.
<input type="date" name="birthday">
datetime-local tipini seçtiğimizde ise input elemanı bize yerel tarih ve saat seçimini sağlar.
<input type="datetime-local" name="mydatetime">
HTML5 input elemanı type argümanı diğer örnekler;
autocomplete form veya input için açılıp kapatılabilmektedir
<form autocomplete="on|off">
FormData nesnesi axaj ile bir form bilgilerini kolaylıkla gönderebilmemizi sağlar
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 nav tag sınıfları bize kolayca menü hazırlamayı sağlar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="../start/baslangic.html">MHK</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../start/baslangic.html">Başlangıç</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../blog/blog-tr.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact/iletisim.html">İletişim</a>
</li>
</ul>
</div>
</nav>
Bootstrap ile kolayca form da tasarlayabilirsiniz
<form id="saveForm" class="form" enctype="multipart/form-data">
<div class="form-group">
<datalist id="paths"><option value="/myProj/admin/"></option><option value="/myProj/code/"></option><option value="/myProj/file/"></option><option value="/myProj/menu/"></option><option value="/myProj/page/"></option><option value="/myProj/reference/"></option><option value="/myProj/user/"></option></datalist><datalist id="types"><option value="csv"></option><option value="dnm01"></option><option value="excel"></option><option value="image"></option><option value="json"></option><option value="other"></option><option value="pdf"></option><option value="word"></option></datalist>
<table class="table table-borderless">
<tbody>
<tr>
<td><label for="y_1">File Name:</label></td>
<td><input type="text" class="form-control form-control-sm" name="file_name" id="y_1" placeholder="Enter File Name" required=""></td>
<td> </td>
<td><label for="y_2">Path:</label></td>
<td><input type="text" class="form-control form-control-sm" name="adr_path" id="y_2" placeholder="Enter Path" list="paths" required=""></td>
<td> </td>
<td><label for="y_3">Type:</label></td>
<td><input type="text" class="form-control form-control-sm" name="file_type" id="y_3" placeholder="Enter Type" list="types" required=""></td>
</tr>
......
<tr>
<td><button type="button" class="btn btn-sm" onclick="sendInsert("/myProj/myServlet", "newR")">Save</button></td>
<td><button type="reset" class="btn btn-sm">Cancel</button></td>
</tbody>
</table>
</div>
</form>
Günümüz HTML5, javascript teknikleri ve Bootstrap kullanımı, bize çeşitli yararlı özellikler sunmaktadır.