HTML5, browser and web page design has brought a lot of innovations.
In addition, as the coding infrastructure provides us a lot.
In this respect, HTML5 is in fact a revolution for the web.
Current javascript features are able to meet all of our needs in front face coding.
If you add a strong design helper like Bootstrap to it, the things you want to do are easier.
Here are a few examples:
The datalist tag that comes with HTML5 and merges the suggestion box feature with listing.
<datalist id="petlist">
<option value="Bird">
<option value="Cat">
<option value="Rabbit">
<option value="Turtle">
<option value="Fish">
</datalist>
In HTML5 input tag, selecting the date type argument will help us to choose the date.
<input type="date" name="birthday">
When we select datetime-local, the input element allows us to select the local date and time.
<input type="datetime-local" name="mydatetime">
Other examples for the type argument of the HTML5 input element;
autocomplete can be turned on or off for form or input
<form autocomplete="on|off">
The FormData object allows us to easily send a form information with an axaj
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 allows us to easily prepare the menu
<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>
With Bootstrap you can also easily design your form
<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>
Today's HTML5, javascript techniques and use of Bootstrap offer us several useful features.