HTML Form Input
HTML <input> elements are used to create various types of interactive controls within forms, allowing users to input data. The <input> tag is highly versatile and is used for everything from text fields to buttons. The behavior and appearance of the <input> element are determined by its type attribute.
1. <input type=”button”>
Creates a clickable button that can execute a JavaScript function. It doesn’t submit form data by default.
<input type=”button” value=”Click Me” onclick=”alert(‘Button clicked!’)”>
2. <input type=”checkbox”>
Allows users to select one or more options from a set of choices. Each checkbox is independent and can be checked or unchecked individually.
<label><input type=”checkbox” name=”subscribe” value=”newsletter”> Subscribe to newsletter</label>
3. <input type=”color”>
Provides a color picker interface for users to select a color. The value is returned as a hexadecimal color code.
<label for=”favcolor”>Choose your favorite color:</label>
<input type=”color” id=”favcolor” name=”favcolor” value=”#ff0000″>
4. <input type=”date”>
Displays a date picker for users to select a date. The value is returned in the format YYYY-MM-DD.
<label for=”birthday”>Birthday:</label>
<input type=”date” id=”birthday” name=”birthday”>
5. <input type=”datetime-local”>
Allows users to select both a date and a time without specifying a time zone. The value is returned in the format YYYY-MM-DDTHH:MM.
<label for=”meeting”>Schedule a meeting:</label>
<input type=”datetime-local” id=”meeting” name=”meeting”>
6. <input type=”email”>
Provides a field for entering an email address with validation for proper formatting. It can support multiple email addresses if specified.
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
7. <input type=”file”>
Allows users to select one or more files from their device for uploading. The selected files can be accessed and submitted with the form.
<label for=”file”>Upload a file:</label>
<input type=”file” id=”file” name=”file”>
8. <input type=”hidden”>
Stores data that should be submitted with the form but is not visible to the user. Commonly used for storing session information or identifiers.
<input type=”hidden” name=”userid” value=”12345″>
9. <input type=”image”>
Creates a graphical submit button using an image. When clicked, it submits the form and includes the coordinates of the click.
<input type=”image” src=”submit.png” alt=”Submit” width=”48″ height=”48″>
10. <input type=”month”>
Provides a month and year picker interface for users to select a month and year. The value is returned in the format YYYY-MM.
<label for=”start”>Start month:</label>
<input type=”month” id=”start” name=”start” min=”2020-01″ value=”2022-06″>
11. <input type=”number”>
Creates a numeric input field with up and down arrows for incrementing and decrementing the value. Supports attributes for min, max, and step values.
<label for=”quantity”>Quantity:</label>
<input type=”number” id=”quantity” name=”quantity” min=”1″ max=”10″>
12. <input type=”password”>
Provides a field for entering a password, with input characters masked for security. The actual value is sent as plain text unless encrypted by the form.
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password”>
13. <input type=”radio”>
Allows users to select one option from a set of mutually exclusive choices. All radio buttons in a group must have the same name attribute.
<label><input type=”radio” name=”gender” value=”male”> Male</label>
<label><input type=”radio” name=”gender” value=”female”> Female</label>
14. <input type=”range”>
Creates a slider control for selecting a value within a specified range. The value is returned as a number within the defined min and max attributes.
<label for=”volume”>Volume:</label>
<input type=”range” id=”volume” name=”volume” min=”0″ max=”100″>
15. <input type=”reset”>
Provides a button that, when clicked, resets all form fields to their initial values. It does not submit the form.
<input type=”reset” value=”Reset Form”>
16. <input type=”search”>
Creates a search input field optimized for search queries. Often includes a clear button for easy input clearing.
<label for=”search”>Search:</label>
<input type=”search” id=”search” name=”search”>
17. <input type=”submit”>
Creates a button that submits the form data to the server for processing. When clicked, it triggers the form’s action URL.
<input type=”submit” value=”Submit Form”>
18. <input type=”tel”>
Provides a field for entering a telephone number with validation for proper formatting. May offer a numeric keypad on mobile devices.
<label for=”phone”>Telephone:</label>
<input type=”tel” id=”phone” name=”phone”>
19. <input type=”text”>
Creates a single-line text input field for entering any text. It is the most common and versatile input type.
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
20. <input type=”time”>
Displays a time picker control for users to select a time. The value is returned in the format HH:MM.
<label for=”appt”>Appointment time:</label>
<input type=”time” id=”appt” name=”appt”>
21. <input type=”url”>
Provides a field for entering a URL with validation for proper formatting. Enhances user experience by providing URL-specific features.
<label for=”homepage”>Homepage:</label>
<input type=”url” id=”homepage” name=”homepage”>
22. <input type=”week”>
Provides a week picker interface for users to select a specific week of the year. The value is returned in the format YYYY-WXX.
<label for=”week”>Select a week:</label>
<input type=”week” id=”week” name=”week”>
HTML input attributes
1. type: Specifies the type of input control, such as text, password, email, number, checkbox, radio, file, etc.
2. name: Identifies the name of the input element, which is used to reference the input data when the form is submitted.
3. value: Defines the initial value of the input field, which can be preset or dynamically generated by the server.
4. placeholder: Provides a short hint or example text that appears in the input field before the user enters a value.
5. required: Specifies that the input field must be filled out before the form can be submitted.
6. readonly: Indicates that the input field is read-only and cannot be edited by the user.
7. disabled: Disables the input field so it cannot be interacted with or its value cannot be changed.
8. size and maxlength: Controls the visible width (size) and maximum number of characters (maxlength) that can be entered into the input field.
9. autofocus: Automatically focuses the input field when the page loads, improving user experience.
10. autocomplete: Controls whether the browser should automatically complete the input based on the user’s previous input values.
11. pattern: Specifies a regular expression pattern that the input value must match to be considered valid.
12. min and max: Defines the minimum and maximum allowed values for numeric inputs (number, range, date, etc.).
13. step: Specifies the increment or decrement step for numeric inputs (number, range).
14. multiple: Allows multiple values to be selected in an input field, typically used with file or email types.
15. accept: Specifies the types of files that can be uploaded using the <input type=”file”> element.
16. list and datalist: Associates the input field with a <datalist> element to provide autocomplete options.
17. checked: Indicates that a checkbox or radio button should be selected by default when the page loads.