Input Elments

• 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 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">

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 Search:-

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">

This article is published w/ Scattr ↗️