This is the 19th day of my participation in Gwen Challenge. For details, see Gwen Challenge.

HTML is a hypertext markup language that makes it easy to create elements for a web page, using tags, attributes, adding scripts, and more. At the same time, HTML is more useful than you might think, and JavaScript may not be required in some scenarios. Today I’m going to share with you nine simple features that don’t require JavaScript.

1. Color picker

You can easily create a color selector using the HTML tag , setting its type to “color”.

<label > <input type="color" id="color-picker" value="#ff0000" />Copy the code

2. Automatically refresh

The automatic refresh and adjustment can be done through HTML, by setting the tag
. Add the following code to the HTML page to refresh every 10 seconds:

<meta http-equiv="refresh" content="10" />
Copy the code

The following code will jump to the specified https://juejin.cn/ home page after 10 seconds. If you want to directly adjust, change 10 to 0.

<meta http-equiv="refresh" content="10; url='https://juejin.cn/'" />
Copy the code

3. Responsive image

Usually, when developing responsive pages, it is necessary to adapt different images according to different resolutions to save traffic and reduce waiting time, usually with the help of JavaScript. The tag enables responsiveness without JavaScript. 

<picture>
      <source media="(min-width: 495px)" srcset="small.jpg">
      <source media="(min-width: 768px)" srcset="mid.jpg">
      <img src="high.jpg" alt="high">
</picture>
Copy the code

The media attribute of thetag is the media query expression, and the srcset attribute is the srcset attribute of the tag, which gives the loaded image file.

The browser checks whether the device meets the media query criteria according to the sequence oftags. If yes, the device loads the image specified by the SRcset attribute and does not execute theand tags.

4. The progress bar

The < Progress > tag implements the progress bar effect without JavaScript. Such as:

<label for="finished"> Progress: </label> <progress ID ="finished" value="80" Max ="100"></ Progress >80%Copy the code

The effect is as follows:

5. Show and hide text

In HTML, you can display or hide text without using JavaScript, using the Details tag.

The < Details > element creates a widget that displays the contained information only when it is switched to expand. The

element provides a summary or label for the widget. 

<details> <summary> Click to expand or hide </summary> <p> Carnegie describes the smile like this: "It produces at home, he can't buy, can't, can't borrow, not to steal, because before people get it, to whom are useless things, his legacy, will make you to feel love, it is tired to rest, the sunlight of hope, sadness is power, and free nature gives people a kind of lifting the medicine of the suffering." </p> </details>Copy the code

Add a little style:

details { border: 1px solid #aaa; border-radius: 5px; padding: 1em; } summary { font-weight: bold; Padding: 0.5 em. }Copy the code

Define weights and measures

The tag can be used to define weights and measures for which maximum and minimum values are known. The tag is a double tag, and the element contents between are not visible.

<label for="bandwidth"> </label> <meter ID ="bandwidth" value="200" min="0" Max ="1024">2-1024</meter> <br /> <label for="memory"> < / label > < meter id = "memory" value = "0.6" > 60% < / meter >Copy the code

The effect is as follows:

Progress is dynamic; Meter is static

7. Drop down and search the input box

You can create drop-down lists and searchable text in the input using HTML alone, using the Datalist tag.

The element contains a set of

 <input list="words" />
<datalist id="words">
    <option value="Dream"></option>
    <option value="Teamwork"></option>
    <option value="Development"></option>
    <option value="Cheer"></option>
</datalist>
Copy the code

Dynamic output

Examples of counters are common in VUE, but similar ones can be implemented in HTML. With the tag , this tag is used to represent the result of a calculation or user action.

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

The above code implements the calculator multiplication and runs as follows:

9. Editable text

Editable text containers, which are inferior to rich text with JavaScript, such as the code:

<div class="editor-box" contenteditable="true"> Carnegie describes smiles as follows: "It produces at home, he can't buy, can't, can't borrow, not to steal, because before people get it, to whom are useless things, his legacy, will make you to feel love, it is tired to rest, the sunlight of hope, sadness is power, and free nature gives people a kind of lifting the medicine of the suffering." </div>Copy the code

The effect is as follows:

The little functionality above is done in HTML without using any JavaScript.