Types of Form Inputs

type="text"


Single-line text input. Default type if no type set


type="password"


Password field


type="email"


Email field. Includes basic validation, such as checking for @ symbol


type="tel"


Input field that should contain a telephone number


type="search"


Search bar. Acts as a text input field


type="number"


Input field that only accepts numeric values


type="range"


Range slider. Default is 0 through 100, but can be changed using the 'min' and 'max' attributes


type="radio"


Radio button. The "name" attribute is used to specify multiple buttons as part of a group - each input needs the same "name" in order to be considered part of the group


type="checkbox"


Checkbox


type="color"


Color picker


type="date"


Date picker


type="week"


Week picker


type="month"


Month and year picker


type="time"


Time picker


type="datetime-local"


Date and time picker


type="hidden"


Hidden field


type="submit"


Submit Button - submits the form for validation


type="reset"


Reset Button - clears all fields

Special Attributes

required - field needs to be filled before submission



disabled - field cannot be filled



maxlength - puts a maximum of the length of an input



value - sets a default input value



placeholder - sets a placeholder value



pattern - sets a pattern to validate against







Created by James Marquis
Types on Form Inputs
Powered by