The <input="checkbox"> unlike radio buttons, which restrict users to a single choice within a group, checkboxes allow multiple values to be selected simultaneously.
It allows to toggle between two states: checked (selected) and unchecked (deselected).
The <input type="color"> allow us to choose a personalized color.
The HTML <datalist> element creates a list of predefined options for an <input> field, enabling autocomplete suggestions while uniquely allowing users to enter custom values unlike the restrictive <select> tag.
It functions by linking an input's list attribute to the datalist's id, containing <option> elements that define suggestions, with the dropdown rendering natively by the browser since the element itself remains hidden by default.
This feature is ideal for speeding up data entry and reducing typos in fields like country names or search queries without forcing a strict choice.
The <datalist> element itself does not need a name attribute because it is not an input field; it is simply a container for suggestions. It relies exclusively on its id attribute to bind with the input's list attribute. While the name attribute on the input supports data processing, the connection between the input and the datalist for functionality and accessibility is handled entirely by the id and list match.
The name attribute belongs to the <input> element, not the <datalist>. Its primary purpose is to identify the field's value when the form is submitted to the server.
"Edge" and "Chrome" are the specific suggestion values defined within the <option> tags, for this example.
The <dialog> element is one of the few HTML elements that centers itself automatically without needing flexbox or grid.
By default is close() method but can be open() method with <dialog open>
It has 2 options show() or showModal() (where the element is positioned in the center of the page and block all other elements just like alert or confirm. Also allows ::backdrop to personalize it in CSS.) until clicking ESC or putting javascript code in element to use close() method.
It allows to put images, forms, videos, or complex HTML inside a dialog.
The <mark> highlights text with a yellow background, ideal for search result emphasis.
Hello World
The <meter> is a semantic element used to display a scalar measurement within a known range or a fractional value, functioning like a gauge or indicator for static data.
It visually represents where a specific value lies between defined minimum and maximum boundaries, making it ideal for showing disk usage, battery levels, test scores, or password strength
The <popover> element sits on top of everything like a dialog when open.
It is triggered with popovertarget="id" on a button element.
This is the popover content!
Another text.
The <progress> has value that specifies how much of the task has been completed. Max attribute specifies how much work the task requires in total (defaults to 1 if omitted)
Unlike <meter>, <progress> cannot change color based on thresholds; it simply shows a deterministic bar filling up from 0 to max.
The <input type="radio"> is used to mark a radio button.
By default, you cannot uncheck a radio button by clicking it again.
The <input type="range"> ,by default, a range input allows users to select a value from 0 to 100 with a step of 1.
It allow a minimum, a maximum, a value in between and number of increments (steps).
The <search> and auto-select the text. Firstly input type="search" adds a "x" when writting in input box and differ from input type="text" . It works with javascript for searching words in text.
Enter after writing the input or the created Search Button. The code will trigger the next steps bellow: window.find(input.value) window.getSelection(): Ensures the selection object is valid and attached to a DOM node before attempting to scroll.
Ensure selection exists and scroll to it. The selection object is valid and attached to a DOM node before attempting to scroll.scrollIntoView(): Scrolls the page so this element becomes visible.
The text node itself cannot be scrolled directly; this accesses the HTML element containing the text. window.getSelection().anchorNode.parentElement?.scrollIntoView({behavior: 'smooth', block: 'center'}): Instead of jumping instantly, the page glides to the position and aligns the found text to the vertical center of the browser window, ensuring it isn't hidden behind headers or stuck at the very edge of the screen Note: It does not work properly in Firefox.
The HTML <select> tag creates a dropdown list control within forms, allowing users to choose from a predefined set of options defined by nested <option> elements. By default, the first option is selected, and the control submits the value attribute of the chosen item to the server.
Key attributes include multiple to allow multi-selection, required to enforce a choice before submission, and disabled to prevent interaction. For accessibility, the select element should be associated with a <label> using the for attribute, and a placeholder-like default can be created by setting the first option's value to an empty string with the disabled and selected attributes.
The <template> tag is an HTML element that holds markup in a DocumentFragment, a parsed but inert copy that lives outside the visible DOM. Unlike a div with display: none, its content isn't rendered, doesn't load images, doesn't execute scripts, and isn't announced by screen readers. We access the content via the .content property and insert copies into the page using cloneNode(true) or importNode. It's designed for markup, we'll need to instantiate multiple times with different values like list items, table rows, modals, toasts, where the structure is fixed but the count and content are only known at runtime. It's not a replacement for hidden or display: none when we're just toggling a single existing element, and it's unnecessary in frameworks that handle templating themselves.
To clone the template and bring it to the main DOM, we'll use javascript:
const fragment = document.createDocumentFragment(); to create a fragment. let clonedNode = tpl.content.cloneNode(true); to clone the node. tpl is the id given to the template.fragment.appendChild(clonedNode); to put the cloned nodes inside.container.appendChild(fragment); to display the cloned content in the main DOM.All are input types.
<input="time">
Captures only the time of day (hours and minutes, optionally seconds). It has no concept of a specific date.
It supports the step attribute in seconds. Setting step="900" forces the picker to jump in 15-minute intervals, which is perfect for aligning with business hours. Daily schedules.
time
<input="date">
Captures only the calendar date (year, month, day). It ignores time completely. Birthdays/Deadlines.
date
<input="datetime-local">
Captures both date and time in a single control. It represents a specific moment in "local" time but does not include time zone data. Appointments/Events.
datetime-local
<input="month">
Selector for month and year.
Month
<input="week">
Selector for week number and year.
Week
Updated: Sep 20 2026