Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Examples Of Using New HTML5 Attributes

DZone's Guide to

Examples Of Using New HTML5 Attributes

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

There are many additional features that come with HTML5 such as the HTML5 attribute placeholder and required.

Hidden Attribute

The hidden attribute can be used on any element it hides the element which has this attribute.

It's the same as doing,

display: none;

The difference is that it more semantic to place a hidden attribute on an element than styling the element with a display: none;

<input type=text name=hidden_field hidden />

If your browser doesn't support the HTML5 hidden attribute then you can use the fallback in your CSS file.

*[hidden] { display: none; }

Spellcheck Attribute

The spellcheck attribute does a client side spellcheck of the text the user enters inside a textbox or a textarea.

Currently spellcheck is supported on:

  • Firefox 3
  • Opera 9
  • Safari 3
  • Chrome

The value of the spellcheck attribute can be either true or false. Setting the value to true will use the default browser spellchecker, if set to false you are turning off the default browser spellchecker.

<textarea spellcheck="true"></textarea>
<textarea spellcheck="false"></textarea>

Download Attribute

The download attribute can be used on a link to define the name of the file which is downloaded. This is really useful if you have a file from a datasource which has a querystring on the end, you can assign the download attribute to the link so that when the user downloads the image it can be named something more user friendly.

<a href="download-text.txt?date=1234567890" download="download-name.jpg" class="download-button">Download Button</a>

As you can see from the download-text.txt has a querystring and this will be added to the filename when you download it. But when you add the download attribute the file name will be stored as the value in the download attribute.

The download attribute also defines this link as you intend it to be used to download a file.

Draggable Attribute

The HTML5 draggable attribute is a value you give to the element to make it draggable in the browser. This can be added to many elements including images, if you have a input type of file on the page at the same time you can drag images into the upload input.

The value of the draggable attribute can be either true or false. The default is false so you only need to use this value when turning off the ability to drag the element.

<div class="draggable-area" draggable="true">
Drag A this text
</div>
<div class="draggable-area" draggable="true">
Drag B this text
</div>
<div class="draggable-area" draggable="true">
Drag C this text
</div>

View the demo page to see some of these attributes in action.

Demo

 

 

 

 

 

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}