2 HTML5 Elements that will Make Your Code Interective

1. HTML5  <details> Elements

This is one of the interactive elements introduced in HTML5. This element allows users to view additional information.

<details> 
<summary>Some summary text</summary> 
<p>Some details text</p> 
</details>

HTML details element includes a summary element as its first child that is followed by flow content.

Attributes : Accepts Global attributes

The Boolean attribute <open> adds visibility to the content.

<details open> 
<summary>Some open summary text</summary> 
<p>Some details text</p> 
</details>

2. HTML 5 <datalist>  Element

HTML5 <datalist> element allows users to select an option from a predefined dropdown-list. It includes the option element to specify value of the dropdown-list.

<datalist id="some-id"> 
<option value="Value One"> 
<option value="Value Two"> 
</datalist>
Attributes

Attributes :  Accepts Global attributes

<id> attribute is used to specify <datalist> element
<list> and <name> attribute within input element

<input list="somelist" name="listname"> 
<datalist id="somelist"> 
<option value="Value One"> 
<option value="Value Two"> 
</datalist>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s