HTML Form Inputs

HTML forms are a fundamental part of any web page that collects data from users. To build a form, you need to know the different input types available in HTML. In this article, we will take a look at some of the most commonly used form input elements, their attributes, and their examples.

Different Input Types

Text Input Type

The <input> tag with the type="text" attribute creates a single-line text field. This is the default input type.

1<input type="text" name="username" placeholder="Enter your username">

Button Input Type

The <input> tag with the type="button" attribute creates a button with no default functionality.

1<input type="button" value="Click me!">

Checkbox Input Type

The <input> tag with the type="checkbox" attribute creates a checkbox.

1<input type="checkbox" name="agree" value="yes">
2<label for="agree">I agree to the terms and conditions</label>

Color Input Type

The <input> tag with the type="color" attribute creates a color picker.

1<input type="color" name="color">

Date Input Type

The <input> tag with the type="date" attribute creates a date picker.

1<input type="date" name="date">

Datetime-Local Input Type

The <input> tag with the type="datetime-local" attribute creates a date and time picker.

1<input type="datetime-local" name="datetime">

Email Input Type

The <input> tag with the type="email" attribute creates an input field that allows the user to input a valid email address.

1<input type="email" name="email" placeholder="Enter your email">

File Input Type

The <input> tag with the type="file" attribute creates an input field that lets the user upload a file or multiple files.

1<input type="file" name="file">

Hidden Input Type

The <input> tag with the type="hidden" attribute creates an invisible input field.

1<input type="hidden" name="secret" value="shh">

Image Input Type

The <input> tag with the type="image" attribute creates a button using an image.

1<input type="image" src="button.png" alt="Submit">

Month Input Type

The <input> tag with the type="month" attribute creates an input field that lets the user enter month and year.

1<input type="month" name="month">

Password Input Type

The <input> tag with the type="password" attribute creates an input field that lets the user enter information securely.

1<input type="password" name="password" placeholder="Enter your password">

Radio Input Type

The <input> tag with the type="radio" attribute creates a radio button.

1<input type="radio" name="gender" value="male">
2<label for="male">Male</label>
3<input type="radio" name="gender" value="female">
4<label for="female">Female</label>

Range Input Type

The <input> tag with the type="range" attribute creates a range picker from which the user can select the value.

1<input type="range" name="range" min="0" max="100">

Reset Input Type

The <input> tag with the type="reset" attribute creates a button which clears all the form values to their default value.

1<input type="reset" value="Clear form">

Search Input Type

The search input type creates a text field for the user to enter their search query. It is similar to the text input type, but it typically includes a magnifying glass icon to indicate that it's a search field. Here's an example:

1<label for="search">Search:</label>
2<input type="search" id="search" name="search">

Submit Input Type

The submit input type creates a button that allows the user to submit the form to the server. When the user clicks the button, the form data is sent to the server for processing. Here's an example:

1<input type="submit" value="Submit">

Tel Input Type

The tel input type creates a field for the user to enter their telephone number. When the user types in the field, the keyboard is automatically switched to the numeric keypad. Here's an example:

1<label for="tel">Telephone:</label>
2<input type="tel" id="tel" name="tel">

Time Input Type

The time input type creates a field for the user to enter a time value. It can accept values in the format of "hh:mm" or "hh:mm:ss". Here's an example:

1<label for="time">Time:</label>
2<input type="time" id="time" name="time">

URL Input Type

The URL input type creates a field for the user to enter and edit a URL. It automatically validates the input and ensures that it is a properly formatted URL. Here's an example:

1<label for="url">URL:</label>
2<input type="url" id="url" name="url">

Week Input Type

The week input type creates a field that allows the user to select a week and a year from a calendar. It accepts values in the format of "yyyy-Www". Here's an example:

1<label for="week">Week:</label>
2<input type="week" id="week" name="week">

By using different input types in HTML forms, you can create a wide range of user-friendly input fields that make it easy for users to submit data to your website or application.