6 Form-Related HTML Tags You Might Not Know About

HTML5 added a lot of new tags. Let’s discover a few that you might not know

Photo by the author.

HTML5 achieved W3C recommendation in 2014 and added a lot of new tags. Some of them, like <main>, <nav>, <header>, or <footer>, are semantic replacements for the commonly used <div>. Everybody was talking about those tags, but there a lot of different and lesser-known ones. In today’s article, let's discover six form-related HTML elements you might not know.

1. Progress Bar

How to quickly prototype progress bars for multiple use cases. By Steven Douglas.

When you create a form and there is a file upload input, you should show how much of the file has been uploaded. This is a big UX (user experience) improvement. Your first thought might be “I will create a div and animate the background while the progress is changing.”

And that’s OK. But we have a special HTML tag to display a progress indicator! <progress> was added with other HTML5 elements. Let's take a look at it:

As you can see, there is a simple layout with basic CSS. Also, there is some JavaScript code to fake a file upload. On <input type='file' /> change, I initialize a fake progress function in setInterval. After five seconds, our fake upload is completed and we have a “success” text. This is the ultimate simple usage of the <progress> tag.

You can read more about styling <progress> on CSS-Tricks.

Unique Attributes

This element includes two attributes:

• max — This attribute specifies how much work the task requires in total. If the max attribute is present, it must have a value greater than 0. The default value is 1.
• value — This attribute specifies how much of a task has been completed.

2. Datalist

The <datalist> element was created to be used as a recommendation list for inputs. You can choose available options or type your own answer. Browsers use this element to provide an autocomplete feature.

<datalist> is an invisible helper for your inputs. You might dynamically add options to it, making it personalized for each user of your app.

The only thing that you have to remember about <datalist> is that its ID must be equal to the input element’s list attribute. This allows the browser to know that this <datalist> belongs to <input>.

3 & 4. Fieldset and Legend

The <fieldset> element groups several inputs within one form and the <legend> element groups related elements. Think of it as a <label> but for more than one element.

Both elements can be used together to group part of the form (<fieldset>) and to add a global label to it (<legend>).

5. Output

The output element is one of my favourite lesser-known HTML tags. This element can inject the results of user calculations.

In my example, we have two input type numbers and one type range. The math pattern looks like this: (a * b) + c = d.

6. Optgroup

This HTML tag allows us to group select options. For example, if you have a country selected, you can group it by continent.

Conclusion

Thanks for reading! That’s all for today. In the next article, I will write about other lesser-known HTML tags.

Originally published at https://www.albertwalicki.com.