HTML Input Types

HTML input types are attributes that specify how the user can enter data into a form element. There are many different input types that can be used to create interactive and user-friendly web forms. In this blog post, we will cover all the HTML input types with examples and explain their usage and syntax.

The basic syntax for an HTML input element is:

<input type="input-type" name="input-name" value="input-value" />

The type attribute defines the type of input, such as text, password, checkbox, radio, etc. The name attribute identifies the input and is used to send data to the server when the form is submitted. The value attribute specifies the initial or default value of the input.

List of HTML input types and their descriptions:

• text: A single-line text field that allows any characters.
• password: A single-line text field that masks the entered characters for security purposes.
• email: A single-line text field that validates the entered value as an email address.
• tel: A single-line text field that validates the entered value as a telephone number.
• url: A single-line text field that validates the entered value as a URL.
• number: A single-line text field that allows only numeric values, with optional up and down arrows to adjust the value.
• range: A slider control that allows selecting a numeric value within a specified range.
• date: A calendar control that allows selecting a date.
• time: A clock control that allows selecting a time.
• datetime-local: A combined calendar and clock control that allows selecting a date and time without timezone information.
• month: A calendar control that allows selecting a month and year.
• week: A calendar control that allows selecting a week and year.
• color: A color picker control that allows selecting a color.
• checkbox: A checkbox that can be checked or unchecked.
• radio: A radio button that can be selected or deselected, usually as part of a group of radio buttons with the same name attribute.
• file: A file upload control that allows selecting one or more files from the local device.
• submit: A button that submits the form data to the server.
• reset: A button that resets the form data to its initial values.
• button: A button that can perform a custom action when clicked, using JavaScript or other scripting languages.
• search: Allow users to search terms.

HTML input types with examples

Input Type text : 

This is the default input type and allows the user to enter any text. It can be used for names, addresses, emails, etc.

Example:

<input type="text" name="name" value="John Doe" />

Input Type password : 

This input type allows the user to enter a password. The characters are masked with asterisks or dots for security reasons.

Example:

<input type="password" name="password" value="123456" />

Input Type checkbox : 

This input type allows the user to select one or more options from a set of choices. Each checkbox has a boolean value of true or false.

Example:

<input type="checkbox" name="hobbies" value="reading" /> Reading
<input type="checkbox" name="hobbies" value="music" /> Music
<input type="checkbox" name="hobbies" value="sports" /> Sports

Input Type radio : 

This input type allows the user to select one option from a set of choices. Each radio button has a boolean value of true or false, but only one can be true at a time.

Example:

<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
<input type="radio" name="gender" value="other" /> Other

Input Type button : 

This input type creates a clickable button that can perform an action or trigger an event.

Example:

<input type="button" name="submit" value="Submit Form" />

Input Type submit : 

This input type creates a button that submits the form data to the server.

Example:

<input type="submit" name="submit" value="Submit Form" />

Input Type reset : 

This input type creates a button that resets the form data to its initial values.

Example:

<input type="reset" name="reset" value="Reset Form" />

Input Type hidden : 

This input type creates a hidden input that is not visible to the user, but can store and send data to the server.

Example:

<input type="hidden" name="user_id" value="1234" />

Input Type file : 

This input type allows the user to upload a file from their device.

Example:

<input type="file" name="photo" />

Input Type image : 

This input type creates an image button that can perform an action or trigger an event.

Example:

<input type="image" name="submit" src="submit.png" alt="Submit Form"/>

Input Type date : 

This input type allows the user to select a date from a calendar widget.

Example:

<input type="date" name="birthday"/>

Input Type time : 

This input type allows the user to select a time from a clock widget.

Example:

<input type="time" name="appointment"/>

Input Type datetime-local : 

This input type allows the user to select a date and time from a combined widget.

Example:

<input type="datetime-local" name="meeting"/>

Input Type month : 

This input type allows the user to select a month and year from a dropdown list.

Example:

<input type="month" name="vacation"/>

Input Type week : 

This input type allows the user to select a week and year from a dropdown list.

Example:

<input type="week" name="schedule"/>

Input Type number : 

This input type allows the user to enter a numeric value with optional decimal points and plus or minus signs.

Example:

<input type="number" name="quantity"/>

Input Type range : 

This input type allows the user to select a numeric value from a slider.

Example:

<input type="range" name="volume"/>

Input Type url : 

Creates a text field that expects a valid URL as input. It may perform some basic validation on the input, such as checking if it starts with http:// or https://. 

Example:

<input type="url" name="website" placeholder="Enter your website">

Input Type email : 

Creates a text field that expects a valid email address as input. It may perform some basic validation on the input, such as checking if it contains an @ symbol and a domain name. 

Example:

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

Input Type color :

The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.

Example:

<input type="color" id="favcolor" name="favcolor">

Input Type search :

Search input: <input type="search"> - Used to allow users to input search terms..

Example:

<input type="search" name="query">