Useful input types
The right type does the work for you.
Swap a plain text box for a native date, color, range, number, or search control and the browser hands you a tuned UI, validation, and the right on-screen keyboard for free.
The type attribute is a UI decision
Every <input> defaults to type="text", but that single word changes the whole control. type="color" renders a swatch and opens the OS colour picker; type="range" becomes a slider; type="date" gives you a calendar popup. You write one attribute and the browser supplies the widget, the touch keyboard, and a sensible default value format β no JavaScript required to make the control usable.
Constraints come built in
Numeric inputs take min, max, and step, and the browser enforces them: the spinner buttons and arrow keys move by step, and out-of-range values fail validation. type="search" adds a clear (Γ) button and signals intent to assistive tech. These constraints are declarative β they live in the HTML, so they hold even before any script loads.
Reading the value live
When you do reach for JavaScript, every control exposes its current value through event.target.value on the input event, which fires continuously as the user drags a slider or types. That makes a "live readout" β a label that mirrors the control β a two-line affair: listen for input, write target.value into a <span>.
Pair inputs with datalist for autocomplete
A <datalist> linked by list="id" turns any text input into an autocomplete box: the browser suggests the <option> values but still lets the user type something else. It is the lightest way to offer suggestions without building a custom dropdown.
Try it 5 examples
Color picker with live hex readout
HTML+CSS+JSintroThe swatch starts on #e9b454 (a warm gold) and opens the OS colour picker on click; as you choose a colour the <output> updates its text to the live hex and tints itself to match, showing how input fires continuously and value is always a 7-character hex string.