Input Element

·

3 min read

In this article, We will know about the Input element. The input element is used to create form fields that accept user input. The input tag is used within the form element. It is an empty element that contains only attributes. Let's know the different input types in HTML -

HTML Input types :-

Input Type Text :

This is a default value. It defines a single-line text field. The text input accepts alphanumeric characters for fields like, name, address, etc.

Example :
<input type="text">

Input Type Password :-

The password input type is used to create an obscured text control.

Example :
<input type="password">

Input Type Email :-

This input field is for email where the user enters their email address. This input type has been specifically designed to handle and validate email addresses.

Example :
<input type="email">

Input Type Date :-

This input field is for a date. Where the user enters a date, like their date of birth.

Example :
<input type="date">

Input Type Submit :-

This is a button input that submits the form.

Example :
<input type="submit">

Input Type File :-

This input type specifies a file selection control in which the user selects the file from their device.

Example :
<input type="file">

Input Type Radio :-

It defines a radio button. in the radio inputs, the user can click only one value at a time.

Example :
<input type="radio">

Input Type Checkbox :-

It defines a checkbox button. In the input type, the user can select more than one option.

Example :
<input type="checkbox">

Input Type Number:-

It defines a field for entering a number. Using this input type, you can enter a value in two ways – from the keyword and by clicking the little up and down buttons provided in the input field.

Example :
<input type="number">

This input type creates a search input field. This field is used to enter a query. You can search whatever you want.

Example :
<input type="search">

Input Type Reset:-

This input type is used to define a reset button. Clicking a reset button will clear all input elements in the form to their original value.

Example :
<input type="reset">

Some other Input types :

<input type="range">
<input type="color">
<input type="button">
<input type="hidden">
<input type="image">
<input type="month">
<input type="time">
<input type="url">
<input type="week">

What is a Label element :

This tag is used to define a caption for a form control element in an HTML form. A label is an inline element.

Example : 

<label>Full Name</label>
    <input type="text">

output - Screenshot 2022-12-01 144152.jpg