HTML5 has introduced numerous innovations for both browsers and web page design. It also provides a great deal as a coding foundation — in this respect, HTML5 is truly a revolution for the web.
Modern JavaScript features are powerful enough to meet every front-end coding need. Add a strong design helper like Bootstrap to the mix and your work becomes significantly easier. Let's look at a few standout features of these technologies.
datalist — Combined Input & Suggestion List
datalist is an HTML5 element that combines a text input with a dropdown suggestion
list. As the user types, matching options are offered automatically.
<input list="petlist" placeholder="Your pet..."> <datalist id="petlist"> <option value="Bird"> <option value="Cat"> <option value="Rabbit"> <option value="Tortoise"> <option value="Fish"> </datalist>
input type — Dates, Times and More
When type="date" is used on an HTML5 input, the browser renders a
built-in date picker. datetime-local extends this to include local time selection.
<!-- Date picker --> <input type="date" name="birthday"> <!-- Local date and time picker --> <input type="datetime-local" name="mydatetime">
Other useful input type values:
- color — for colour selection
- email — to designate an e-mail field
- number — for numeric input with optional min/max limits
- range — for a simple slider control
- search — to mark a field as a search input
autocomplete
The autocomplete attribute can be enabled or disabled on a form or individual
input. It is recommended to turn it off for forms containing sensitive data.
<form autocomplete="on"> <!-- or "off" --> ... </form>
FormData + XMLHttpRequest for Ajax Submission
The FormData object makes it straightforward to send form data via Ajax.
The example below reads an entire form and submits it with a POST request — no manual
field iteration required.
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);
}
Building a Navigation Bar with Bootstrap
Bootstrap's navbar component lets you create a fully responsive navigation menu
with minimal markup.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/home.html">MHK</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/home.html">Home</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="/contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
Building a Form with Bootstrap
Bootstrap form components combined with datalist make it easy to build
responsive, autocomplete-enabled interfaces with very little effort.
<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">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><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>
</tr>
<tr>
<td>
<button type="button" class="btn btn-sm"
onclick='sendInsert("/myProj/myServlet","saveForm")'>
Save
</button>
</td>
<td><button type="reset" class="btn btn-sm">Cancel</button></td>
</tr>
</tbody>
</table>
</div>
</form>