Daily Notes – Some useful features in HTML5

tag, determines the clickable area. A clickable region can be one of these shapes: a rectangle, a circle, or a polygon. If you do not specify a shape, it is assumed to be the entire image.

code

<div> <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap"> <map name="circusmap"> <area Href ="elephant.htm"> <area shape="rect" coords="222,141,318, "Href ="lion.htm"> <area shape="rect" coords="343,111,455, "Href ="horse.htm"> <area shape="circle" Coords = "426409100" href = "clown. HTM" > < / map > < / div >Copy the code

See the effect

tip

Image mapping is also flawed, but you can use it for visual presentations. Try a family photo and link to each one.

4. The content of the mark

Highlight the text content with the tag.

code

 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
Copy the code

See the effect

tip

You can also change the colors highlighted using CSS

mark {
  background-color: green;
  color: #FFFFFF;
}
Copy the code

5. Data – * attributes

The data-* property is used to store custom data that is private to the page or application. The stored data can be used for JavaScript code to create a deeper user experience.

The data-* attribute consists of two parts:

• Attribute names should not contain any uppercase letters and must be preceded by”data-“Followed by at least one character
• The property value can be any string

code

<h2> Know data attribute </h2> <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!" > I have a hidden secret! </div> <button onclick="reveal()">Reveal</button>Copy the code

And then in JavaScript

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
Copy the code

Note: To read the values of these properties in JavaScript, you can use getAttribute() with its full HTML name (data-custom-attr), but the standard defines an easier way to use the dataset property.

See the effect

tip

This can be used to store some data on the page and then pass it to the server using REST calls. For example, one use case is to display notification message counts.

6. The output TAB

The

tag represents the result of the calculation. Typically, this element defines an area to display the text output of some computation.

code

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
    <input type="number" id="a" value="0">
    * <input type="number" id="b" value="0">
    = <output name="x" for="a b"></output>
</form>
Copy the code

See the effect

tip

If you perform calculations in client-side JavaScript and want the results to be reflected on the page, use the

tag. You don’t have to perform the extra step of getting the element through getElementById().

7. Datalist

The

code

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form> 
Copy the code

See the effect

tip

How does it differ from the traditional – tag? The Select tag is used to Select one or more options from the list to be selected. Datalist is an advanced feature with auto-complete support.

8. Range

Range is an input type that specifies a slider type for a range selector.

code

<form method="post">
    <input type="range"
           name="range"
           min="0"
           max="100"
           step="1"
           value=""
           onchange="changeValue(event)" />
</form>
<div class="range">
    <output id="output" name="result">  </output>
</div>
Copy the code

See the effect

tip

There is no slider in HTML5!

9. Meter label

Use the tag to measure data within a given range.

code

<label for="home">/home/atapas</label> <meter id="home" value="4" min="0" max="10">2 out of 10</meter><br> <label For = "root" > / root < / label > < meter id = "root" value = "0.6" > 60% < / meter > < br >Copy the code

See the effect

tip

Do not use the tag for the progress bar feature. HTML5 has a special tag.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Copy the code

The input box

This is the part where we are most familiar with the use of input types such as text, password, and so on. Specific uses of input field types are as follows,

code

required

Mark the input field as required.

<input type="text" id="username1" name="username" required>
Copy the code

autopfocus

Focus is automatically provided by placing the cursor on the input element.

<input type="text" id="username2" name="username" required autofocus>
Copy the code

Use regular expression validation

You can use regular expressions to specify patterns to validate input.

<input type="password" name="password" id="password" placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" pattern="^(? =.*\d)(? =.*[a-z])(? =. * [a-z]). 6, 20} {$" autofocus required >Copy the code

Color picker

A simple color picker.

<input type="color" onchange="showColor(event)"> <p id="colorMe">Color Me! </p>Copy the code