<input type="button">A push button with no default behavior displaying the value of the value attribute, empty by default.
<input type="button" value="Button">
<input type="checkbox">A check box allowing single values to be selected/deselected.
<input type="checkbox" id="checkbox">
<label for="checkbox">Subscribe</label><input type="file">A control that lets the user select a file. The accept attribute defines the types of files that the control can select.
<label for="file">Choose a file</label>
<input type="file" id="file"><input type="hidden">A control that is not displayed but whose value is submitted to the server. There is an example below, but it's hidden.
<input type="hidden"><input type="image">A graphical submit button. Displays an image defined by the src attribute. The alt attribute presents an accessible name for the element.
<input type="image" alt="Login" src="image.png"><input type="password">A single-line text field whose value is obscured. Some browsers will warn the user if the page is not served over HTTPS
<label for="password">Password</label>
<input type="password" id="password"><input type="radio">A radio button, allowing a single value to be selected out of multiple choices with the same name value.
<input type="radio" id="radio">
<label for="radio">Yes</label><input type="reset">A button that resets the contents of the form to default values. This presents a range of usability issues and should be avoided!
<input type="reset" value="reset"><input type="submit">A button that submits the form.
<input type="submit" value="Submit"><input type="text">The default value. A single-line text field. Line-breaks are automatically removed from the input value.
<label for="text">Name</label>
<input type="text" id="text"><input type="color">A control for specifying a color; opening a color picker when active in supporting browsers.
<label for="color">Pick a colour</label>
<input type="color" id="color"><input type="date">A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
<label for="date">Choose a date</label>
<input type="date" id="date"><input type="datetime-local">A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.
<label for="datetime">Choose a date and time</label>
<input type="datetime-local" id="datetime"><input type="email">A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<label for="email">Email address</label>
<input type="email" id="email"><input type="month">A control for entering a month and year, with no time zone.
<label for="month">Choose a month</label>
<input type="month" id="month"><input type="number">A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.
<label for="number">Choose a number</label>
<input type="number" id="number"><input type="range">A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
<label for="range">Choose a range</label>
<input type="range" id="range"><input type="search">A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.
<label for="search">Search the site</label>
<input type="search" id="search"><input type="tel">A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.
<label for="tel">Phone number</label>
<input type="tel" id="tel"><input type="time">A control for entering a time value with no time zone.
<label for="time">Choose a time</label>
<input type="time" id="time"><input type="url">A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
<label for="url">Web address</label>
<input type="url" id="url"><input type="week">A control for entering a date consisting of a week-year number and a week number with no time zone.
<label for="week">Choose a week</label>
<input type="week" id="week"><input type="datetime">The datetime type was dropped around 2014.