# Input Elements In HTML

# Input Elements

Input Element allows the user to input the information In web form while interacting with the webpage.

Input Element Specify an input field where the user can enter the information.

the input tags are used within form Element.

Input Works Various according to the values of its **type** Attribute.

### `< input type=" ">`

## Some Attributes of Input Elements

* **type** : It specifies the type of an Input Element.
    
* **value** : It specifies the value of an Input Element.
    
* **name** : It specifies the name of an Input Element.
    
* **heigh**t : It specifies the height of an Input Element(Only For Image).
    
* **width** : It specifies the width of an Input Element.
    
* **placeholder** : It displays the text inside the input field when the Feild has no value.
    
* **requierd** : It specifies that the Input field must be filled before submitting.
    
* **disabled** : disabled attribute can be set to keep a user form using `< input >` element until some other condition has been met.
    

# Input type

## 1) "text" :

### `< input type ="text">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671886827838/942aa51c-91af-4dc7-a447-1f7da8af52e0.png align="center")

define a single-line text input field. this is a default value, the text input accepts Alphanumeric characters for fields like Name, address etc.

## 2) "password" :

### `<input type="password">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671887064693/3f702ebb-1900-4916-9d10-c4ccb4c206b7.png align="center")

defines a password field. the characters in the password field are masked.

## 3) "email" :

### `<input type="email">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671887201488/e50c35d0-8307-42fe-a68a-cc1b6bb9b6ac.png align="center")

This input field is used to filling email addresses. This input type has been specifically designed to validate the email address.

## 4) " date" :

### `<input type="date">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671887809959/bb31ef13-73d6-40cd-83c4-b3805b27e5b8.png align="center")

this input type is used for input fields that should contain a date. like date, month, year.

## 5) "checkbox" :

### `<input type=cheakbox">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671888070026/1e5133f4-34fe-4273-a115-25b7f501de94.png align="center")

This checkbox input is used to select more than one Number of choices.

## 6) "radio" :

### `<input type="radio">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671888199286/1bf20ce3-8842-41d9-9f07-6625feb68407.png align="center")

The radio button allows user to select only one from the number of choices.

## 7) "color" :

### `<input type="color">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671888610098/560eff47-690e-4b72-9f0f-3cbfade94f00.png align="center")

This is used to specify a colour Through a colour picker in supporting browsers.

## 8) "file" :

### `<input type="file">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671888805997/5070656a-e451-4104-9206-056c75695818.png align="center")

with help of this input, we can upload requird file through local memory.

## 9) " range" :

### `<input type="range">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671888967827/6ece5cda-d0f7-4f31-8596-4a3a1a277901.png align="center")

This Input is used to select the value From Min to Max by curser.

## 10) "button" :

### `<input type="button">`

Submit Button `<input type="submit">`

Reset Button `<input type="reset">`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671889328486/3a0cb6b1-e24c-458e-a68a-1490761d9926.png align="center")

Button input is used for Creating a button. Which can be used for submit, reset functions.

## **Example using** `<input>` Tags :

<iframe height="756" style="width:100%" src="https://codepen.io/Immzkhan/embed/MWBawwd?default-tab=html&theme-id=dark">
  See the Pen <a href="https://codepen.io/Immzkhan/pen/MWBawwd">
  Untitled</a> by imrankhan (<a href="https://codepen.io/Immzkhan">@Immzkhan</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>