Hey Coders! In this article, we are going to discuss what are input elements in HTML, and various types of input elements. Let's start!

What are Input elements?

Input elements are the HTML elements that are used to accept data from the user. We can collect a wide variety of data from the user with input elements depending on our requirements.

Usually, the input element is placed inside the <form></form> tag. Before every input element, there's a label tag that displays a caption for that input element.

The input element has various attributes. The type attribute is the most important because it defines the type of input the user should provide on the web page.

Following are the various types of input elements.

Text

The text type input element accepts any one-line text from the user. It's the default value of type attribute. We can use this type to collect the user's name or any other text. Example,

<form>
    <label for="name">Enter your name:</label>
    <input type="text" name="name">
</form>

Email

The email type looks similar to the text input type. But this input type has some parameters which check if it's an email or a simple text. This validation is done automatically when the form is submitted.

<form>
    <label for="email">Enter your Email:</label>
    <input type="email" name="email">
</form>

Password

This input type is used to accept a password from the user. While typing inside the password field, the characters are hidden by default (shows black circles).

<form>
    <label for="pwd">Enter your Email:</label>
    <input type="password" name="pwd">
</form>

Radio

The radio input type generates radio buttons that let the user select an option from several choices. All the radio inputs of the same category have the same value for the attribute name .

<form>
    <input type="radio" name="choice" value="one">
    <label for="one">ONE</label><br>
    <input type="radio" name="choice" value="two">
    <label for="two">TWO</label><br>
</form>

Checkbox

Checkbox input type lets you choose multiple options from several choices. You can select or deselect the choices.

<form>
    <input type="checkbox" name="choice1" value="one">
    <label for="one">ONE</label><br>
    <input type="checkbox" name="choice2" value="two">
    <label for="two">TWO</label><br>
</form>

Button

The button input type generates a simple button with no default functioning. It displays the value of the attribute value .

<input type="button" value="Click Me!">

Color

This input type is used to accept a particular color from the user. Upon clicking this input field, a color picker will be displayed for the user to select the color.

<form>
    <label for="mycolor">Pick a color:</label>
    <input type="color" name="mycolor">
</form>

Date

The Date input type is used to collect particular date from the user. Upon clicking this input field, a date picker will be displayed for the selection of a day, month and year.

<form>
    <label for="dob">Enter your date of birth:</label>
    <input type="date" name="dob">
</form>

File

The file input type element accepts a file from the user. The element generates a browse or choose a file button which lets the user select a file. You can use accept attribute to define what type of files you want the web page to accept.

<form>
    <label for="myfile">Select an image or video:</label>
    <input type="file" name="myfile" accept="image/* video/*">
    <!--Only accepts images or videos-->
</form>

Number

The number type input element will only accept numeric values. It will show an error if there's a non-numeric value inside the input field upon clicking submit.

<form>
    <label for="number">Enter a number:</label>
    <input type="number" name="number">
</form>

Time

This input type element is used to accept a particular time from the user. Upon clicking, a time picker will pop up for selecting the time.

<form>
    <label for="time">Select a time:</label>
    <input type="time" name="time">
</form>

URL

We can also accept a URL address from the user. This input type has some parameters that will validate the address when the user hits submit.

<form>
  <label for="profile-link">Share your profile link:</label>
  <input type="url" name="profile-link">
</form>

Reset

The reset type input will reset all the input fields in the form tag. All the input fields will be blank again upon hitting the reset button.

<form>
    <label for="name">Name:</label><br>
    <input type="text" name="name" value="Sherlock Holmes"><br>
    <label for="email">Email:</label><br>
    <input type="email" name="email" value="me@holmes.com"><br><br>
    <input type="reset">
</form>

Submit

The submit input type will generate a submit button. Upon clicking, the data of all the input fields inside the form tag will be sent to the server.

<form>
    <label for="name">Name:</label><br>
    <input type="text" name="name" value="Sherlock Holmes"><br>
    <label for="email">Email:</label><br>
    <input type="email" name="email" value="me@holmes.com"><br><br>
    <input type="submit" value="Submit!">
</form>

So that's it for this article. Thanks for reading! Feel free to connect with me on Twitter or Linkedin.