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.