what is input element in HTML?
The input element is an HTML tag used to create various types of input fields on a web page. It is one of the most commonly used form elements in HTML, and it allows users to enter data into a form for submission to a server. The type of input field that is created depends on the value of the type attribute of the input tag.
Here's an example of an input element that creates a text input field:
<input type="text" name="name" placeholder="Enter your name">
In this example, the type attribute is set to "text", which tells the browser to create a text input field. The name attribute is used to give the input field a name that can be used to identify the data it contains. The placeholder attribute provides a hint to the user about what kind of information should be entered in the input field.
Many other types of input fields can be created using the input element, such as radio buttons, checkboxes, select lists, and more. The type attribute is used to specify the type of input field being created. By using different types of attributes, you can create a variety of input fields to collect different types of data from users.
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.
<input type="text" name="firstname" placeholder="Enter your first name">
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.
<input type="email" name="email" placeholder="Enter your email address">
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.
<input type="password" name="password" placeholder="Enter your password">
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.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Checkbox
Checkbox input type lets you choose multiple options from several choices. You can select or deselect the choices.
<input type="checkbox" name="interest" value="football"> Football
<input type="checkbox" name="interest" value="basketball"> Basketball
<input type="checkbox" name="interest" value="tennis"> Tennis
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.
<input type="color" name="mycolor">
Date
The Date input type is used to collect a 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.
<input type="date" name="birthdate">
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.
<input type="file" name="photo">
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.
<input type="number" name="age" placeholder="Enter your age">
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.
<input type="time" name="time">
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.
<label for="profile-link">Share your profile link:</label>
<input type="url" name="profile-link">
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.
<input type="reset">
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.
<input type="submit" value="Submit">
Thanks for reading!
If you found this article helpful, please like and share it Thank you😊
You can connect with me on Linkedin.