HTML Forms are used to collect user inputs, which are typically sent to a server for processing. The <input> element can also have a <value> attribute, which shows us the entered value. The <value> attribute is often used for outputting data from a database. A form is a container for different types of input elements, such as text inputs, checkboxes, radio buttons, submit buttons, etc.
The <form> element represents a section of a document containing interactive controls for submitting
information. It is possible to use the pseudo-classes :valid and :invalid to
style the <form> based on weather the elements within the form are valid.
This table provides a quick reference for all input types (<input>) and their key
attributes.
| Type | Description | Example Code | Key Attributes |
|---|---|---|---|
type="text" |
Standard single-line text field. | <input type="text" name="name"> |
placeholder, maxlength, size |
type="password" |
Hides characters as you type (for security). | <input type="password" name="password"> |
minlength, required |
type="email" |
Validates that the input is a valid email address. | <input type="email" name="email"> |
multiple, placeholder |
type="number" |
Numeric input with spinner controls. | <input type="number" name="age" min="0" max="100"> |
min, max, step |
type="range" |
Slider control for a range of values. | <input type="range" name="volume" min="0" max="10"> |
min, max, step, value |
type="date" |
Date picker (Year, Month, Day). | <input type="date" name="birth_date"> |
min, max |
type="time" |
Time picker (Hour, Minute). | <input type="time" name="meeting"> |
step |
type="datetime-local" |
Date and time without timezone. | <input type="datetime-local" name="event"> |
- |
type="month" |
Month and year picker. | <input type="month" name="expiry"> |
- |
type="week" |
Week number and year picker. | <input type="week" name="week_num"> |
- |
type="checkbox" |
Multiple selection (on/off). | <input type="checkbox" name="agreement"> |
checked |
type="radio" |
Single selection from a group (must share name). |
<input type="radio" name="gender" value="M"> |
checked, value |
type="submit" |
Button to send form data to the server. | <input type="submit" value="Submit"> |
formaction, formmethod |
type="reset" |
Button to reset all fields to default values. | <input type="reset" value="Reset"> |
- |
type="button" |
Generic button (usually used with JavaScript). | <input type="button" value="Click Me"> |
onclick (JS) |
type="search" |
Search field (often has a clear "x" button). | <input type="search" name="query"> |
autocomplete |
type="tel" |
Telephone number (optimized for mobile keyboards). | <input type="tel" name="phone"> |
pattern |
type="url" |
Validates that the input is a valid URL. | <input type="url" name="website"> |
- |
type="file" |
File upload selector. | <input type="file" name="document"> |
accept, multiple |
type="color" |
Color picker. | <input type="color" name="theme_color"> |
- |
type="hidden" |
Hidden field (not visible to the user, sent with the form). | <input type="hidden" name="token" value="abc123"> |
value |
type="image" |
Image used as a submit button. | <input type="image" src="button.png"> |
src, alt, width, height |
