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. 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 <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 <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 <color> let's choose a personalized color.
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="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 <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 <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 <mark> highlights text with a yellow background, ideal for search result emphasis.
Hello World
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