The <input> element is the workhorse of HTML forms. It is a void element (self-closing) used to create many different interactive controls, ranging from text fields to buttons, with its specific function determined by the type attribute.
1. Essential Input Types
The type attribute is what defines the function and appearance of the input field.
| type Value | Description | Use Case |
text | Default single-line text field. | Names, addresses, general strings. |
password | Single-line text field where characters are masked (hidden). | Login passwords, secret codes. |
email | Single-line field that expects a correctly formatted email address. | Contact forms, registration. |
number | Input field that accepts only numerical values. Provides up/down arrows in many browsers. | Quantity selection, age. |
checkbox | Allows the user to select zero or more options from a set. | Opt-in settings, feature selection. |
radio | Allows the user to select only one option from a set. | Gender selection, payment choice. |
file | Provides a button to select and upload one or more files. | Photo upload, document submission. |
submit | A button that submits the form data to the server. | Final action button (e.g., “Login”, “Checkout”). |
Example: Text and Password
<input type="text" name="username">
<input type="password" name="user_pwd">
2. Checkboxes and Radio Buttons (Grouping)
For both checkboxes and radio buttons to work correctly, they must include the crucial name and value attributes.
value: This is the data that is sent to the server if the input is selected.
Radio Button Grouping
Radio buttons are grouped together using the same name attribute. This tells the browser that only one input within that group can be selected at a time.
<input type="radio" id="red" name="color" value="R">
<label for="red">Red</label>
<input type="radio" id="blue" name="color" value="B">
<label for="blue">Blue</label>
3. Essential Input Attributes
These attributes are used to control the user’s interaction with the input field:
| Attribute | Elements Used On | Purpose |
name | All | Required! Defines the key used to identify the data sent to the server. |
value | All | Defines the initial value of the field, or the data sent for radio/checkbox. |
placeholder | text, email, etc. | Provides a hint to the user about what to enter (text disappears on focus). |
readonly | Most types | User cannot modify the value, but the value is still sent when the form is submitted. |
disabled | Most types | Input field is unusable; its value is not sent when the form is submitted. |
checked | checkbox, radio | Sets the element to be selected by default when the page loads. |
Example: Placeholder and Read-Only
<input type="text"
name="search_query"
placeholder="Enter search terms...">
<input type="text"
name="user_id"
value="4567"
readonly>
4. HTML5 Semantic Date/Time Inputs
HTML5 introduced specialized input types that provide native user interface controls (like date pickers and color selectors), simplifying form creation and standardizing user experience across browsers.
| type Value | Description |
date | Date picker control (year, month, day). |
time | Time control (hour, minute). |
datetime-local | Combined date and time control. |
color | Color picker interface. |
range | Slider control for selecting a value from a range. |
url | Field that expects a correctly formatted URL. |
<label for="event_date">Event Date:</label>
<input type="date" id="event_date" name="event_date">
