System analysis and design, software development, integration, database and consulting services are provided.

To communicate ...






An Overview of Today's Page Design Techniques



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;

  • color, for color picker
  • email, to set the email field as
  • number, as the number entry, and to determine the limit
  • range, Simple range for selection
  • search, for a search field

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.