We’ve seen so many times that a PDF file available for download opens up in the browser once the link is clicked. Same way the rar files, zip files, image files etc. We could add download attribute and fix this simple issue.
HTML5: Download Attribute with Value
1
2
3
<a href="Picture1.jpg" download="book.jpg">
Download Book Cover
</a>
<a href="Picture1.jpg" download="book.jpg"> Download Book Cover </a>
Once we add download attribute to the anchor tag, once someone clicks on the link, the linked resource starts to download, instead of opening in the browser.
The value, if present, to download attribute will be used to replace the original name of the resource file linked in the anchor tag.
You could implement this progress element of HTML5 with the file upload or the user form filling etc, to indicate the amount of upload or the profile completion.
Here we have a progress element, with 100 as max and 50 as it’s value. This way, the progress bar indicates that the progress is 50% complete. Also there is a text between the progress tag, which is used as a fall back text for browsers which do not yet support progress element of HTML5.
Change the number present in value and max attribute and look at the visual effect/indication of the progress on the browser.
Note: In real time application development, you could fetch the numbers for value and max attribute dynamically using JavaScript. This way, the effects will be real and it creates the illusion that the progress is being made!
color input type fields expect the user to pick the color from the color palette. Once the user selects the color its corresponding hexadecimal value is being stored in the input field.
Here we have 2 input fields of type color and text respectively. Once the user selects a color from the color palette, the corresponding hexadecimal value is shown in the text input type field.
JavaScript file myScript.js
1
2
3
4
5
function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}
function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}
Once the fetch method is called: it fetches the value present in the (color)input field and assigns it to text input field.
Note: In real production server, you need not use two input fields as shown in this video tutorial. You can simply make use of the color input type and once you submit the form, you’ll get hexadecimal code value in place of the color input field. If you have a large audience still using Internet Explorer or other older browsers, then you can use jQuery plugin to accomplish the same task across all major browsers.
Today lets learn some very important input types of HTML5:
datetime datetime-local date time week month
datetime input type is supported by Opera browser, but as of now(2013), Google Chrome doesn’t support it. All other input date time related input types are supported by Google Chrome.
Note: We can specify value, min, max and step attributes for all these input types. And the format for it is as shown below:
dateYYYY-MM-DD default step 60 seconds
timeHH:MM:SS.FF default step 1 Day (SS.FF means seconds and fractional seconds)
datetimeYYYY-MM-DDTHH:MM:SS.FFZ default step 60 seconds (T and Z means the TimeZone, these alphabets/characters must be literally present in the format)
datetime-localYYYY-MM-DDTHH:MM:SS.FF default step 60 seconds (albhabet/character/letter T must be literally present in the format)
weekYYYY-WNN default step of 1 week (letter W means the week, this alphabet/characters must be literally present in the format)
Browsers which support range input type know that the field is used for entering a number with in a given range.
User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.
Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.
JavaScript file myScript.js
1
2
3
4
5
function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}
function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}
Here we fetch the value selected by the user using the slider and assign the value to the number input field.
Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.