TAB to identify the clickable area. A clickable region can be one of these shapes, rectangles, circles, or polygons. If you do not specify any shapes, it considers the entire image.

code

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67114207254" href="elephant.htm">
        <area shape="rect" coords="222141318, 256" href="lion.htm">
        <area shape="rect" coords="343111455, 267" href="horse.htm">
        <area shape="rect" coords="35328143500" href="clown.htm">
        <area shape="circle" coords="426409100" href="clown.htm">
    </map>
 </div>
Copy the code

See how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

Image maps have their drawbacks, but you can use them for visual presentations. Try a family photo, then dive into a personal photo (it could be an old photo we’ve treasured!). .

🏀 Iv. Tag content

Use the tag to highlight any text.

<p>Did you know that you can just use HTML tags<mark>"Highlight the interesting things."</mark></p>
Copy the code

See how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

You can change the highlight color at any time using CSS

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

🎥 5. Data -* attribute

These data-* properties are used to store custom data that is private to the page or application. The stored data can be used in JavaScript code to create further user experiences.

The data-* attribute consists of two parts:

• Attribute names should not contain any uppercase letters and must be at least one character long after the prefix “data-“
• 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 attributes in JavaScript, you can use getAttribute() their full HTML name (that is, data-custom-attr), but the standard defines a simpler approach: using the dataset attribute.

See how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

You can use it to store some data on the page and then pass it to the server using REST calls.

🏆 Vi. Output label

The

tag indicates the result of the operation. Typically, this element defines the area that will be used to display the text output of some calculation.

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 how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

If you are performing any calculation in client-side JavaScript and want the results to be reflected on the page, use<output>The tag. You don’t have to perform the extra step of getElementById() to get the element.

🎻 7. Data list

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 how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

It with the traditional<select>-<option>How is the label different? The select TAB is used to select one or more items from the list that you need to browse. Datalist is an advanced feature with autocomplete support.

🧿 VIII. Scope (slider)

Range is the input type of the range selector given the slider type.

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 how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

There’s nothing called slider in HTML5!

⏰ nine, Meter

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 how it works

You can play it from here: wanghao221. Making. IO/HTML – tips – t…

== Quick prompt ==

Don’t put<meter>The label is used for the progress indicator type of user experience. We have one from HTML5<Progress>The label.

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

💌 10 and Inputs

This section is the use of the most familiar types of input, such as text, password, and so on. Special uses for input types are rare

code

Mark the input fields as required.

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

Autofocus automatically provides focus by placing the cursor over the input element.

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

Using 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 selector a simple color selector.

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

😊 end of want to say

All of the code used in this article can be found in the GitHub repository mentioned below. If you like the job, you can click star. Github.com/wanghao221/…

I’ve been writing about technology for a long time, and if you enjoyed this post and are interested in seeing more of it, you can check out the source code for all of my original works here:

Making, Gitee

Recommended articles of the past:

• Teach you to use Java to make a gobang game
• Interesting way to talk about the history of JavaScript ⌛
• The output of a Java program | Java exercises 】 【 7 sets (including parsing)
• ❤️5 VS Code extensions that make refactoring easy ❤️
• It is said that if you have light in your eyes, everywhere you go is light
• Design a Neumorphism-style digital clock in JavaScript
• 140000 | 400 multichannel JavaScript 🎓 interview questions with answers 🌠 items (the fifth part 371-424)

If you do learn something new from this post, like it, bookmark it and share it with your friends. 🤗 Finally, don’t forget ❤ or 📑 for support