These 10 useful HTML5 features you've definitely not used!

The article comes from the public number: front-ender

HTML5 is not new. W e've been using some of its features since it was originally released (January 2008). T oday to share with you are some unexpected effects, and features! So far, I haven't really used it!

In this article, I've listed ten HTML5 features that I haven't used before but now find useful.

1. Output label

< the result of the operation represented by the <output> label. Typically, this element defines an area that will be used to display some calculated text.

The code is as follows:

<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>

The effect is as follows:

Small tip

If you want to perform any calculations in client JavaScript and want the results to be reflected on the page, use <output> tag. You don't have to walk around to get the extra steps of the element getElementById().

2. Details label

The <details> label to provide on-demand details to the user. U se this tag if you need to display content to users on demand. B y default, widgets are turned off. When opened, it expands and displays its contents.

The <summary> label uses the <details> to assign it a visible title.

The code is as follows:

<details>
  <summary>Click Here to get the user details</summary>
   <table>
      <tr>
          <th>#</th>
          <th>Name</th>
          <th>Location</th>
          <th>Job</th>
      </tr>
      <tr>
          <td>1</td>
          <td>Adam</td>
          <td>Huston</td>
          <td>UI/UX</td>
      </tr>
    </table>
</details>

The effect is as follows:

3. Content can be edited

contenteditable property is a property that can be set on an element so that the content can be edited. I t can be used with elements such as DIV P UL and so on. Here's how to use it:

<element contenteditable="true|false"/>

Note that if contenteditable is not set on an element, the property is inherited from its parent.

The code is as follows:

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>

The effect is as follows:

Small tip

You can make span or div elements editable, and you can add anything rich to them using css style. T his will be better than working with it with input fields. Try!

4. Map

The <map> labels can help define image mapping. A n image map is any image in which you have one or more clickable areas. map tag identifies the clickable area along with <area> tag. C lickable areas can be rectangles, circles, or any kind of polygonal area. If no shape is specified, it takes into account the entire image.

The code is as follows:

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>

The effect is as follows:

Small tip

Image maps have their drawbacks, but you can use them for visual presentations. H ow to try and delve into personal photos with family photos (perhaps the old ones we've always had!) ）。

5. Tag content

Use <mark> marker to highlight any text content.

The code is as follows:

 <p> 我为何这么帅? <mark>"这该死的魅力"</mark> 是吗? </p>

The effect is as follows:

Small tip

You can also use CSS to change the highlight color, and the markup feature does make a lot of interesting things!

mark {
  background-color: green;
  color: #FFFFFF;
}

6.data- s property

These data-* are used to store custom data that is dedicated to a page or application. You can use stored data in JavaScript code to create more user experiences.

The data-s property consists of two parts:

• The property name must not contain any capital letters, and the prefix "data-" must be at least one character long
• The property value can be any string

The code is as follows:

<h2> 你准备好了吗 </h2>
 <div class="data-attribute" 
      id="data-attr" 
      data-custom-attr="You are just Awesome!"> 
      我有个秘密！
  </div>
 <button onclick="reveal()">点击看我的咪咪</button>
function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}

The effect is as follows:

Small tip

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

7. List of data

< a list of pre-defined options specified by <datalist> label and allow users to add more. It provides an autocomplete feature that allows you to enter the options you want in advance

The code is as follows:

<form action="" method="get">
    <label for="fruit">从列表中选择你的水果:</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>  

The effect is as follows:

Small tip

How is it different from traditional <select>-<option> tags? T he selection tag is used to select one or more items from the options, and you need to browse the list to make a selection. Datalist is an advanced feature with autocomplete.

8. Range (slider)

Range is the input type selected for a given sample slider range.

The code is as follows:

<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> 

Small tip

There is nothing wrong with sliderHTML5

9. Measurement label

Use <meter> labels to measure data in a given range.

The code is as follows:

<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>

The effect is as follows:

Small tip

Do not use <meter> labels for progress indicators for the user experience. We have <Progress> HTML5.

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

10. Enter (there's nothing new about this, count it!)

We know best the use of this section, such as text, passwords and other input types. There are very few special uses for input types.

Required

Mark the input field as required

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

The effect is as follows:

Autofocus

Automatically focuses on the input element by placing the cursor on the input element.

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

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>

Color picker

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

Here's W3Cschool编程狮 About these 10 useful HTML5 features you've definitely not used! Related to the introduction, I hope to help you.