---
title: "How to use input tag in HTML"  
description: "How to use input tag in HTML"  
author: "Ravi Vishwakarma"  
published: 2024-06-05  
updated: 2024-06-05  
canonical: https://www.mindstick.com/interview/33891/how-to-use-input-tag-in-html  
category: "html"  
tags: ["html", "html5"]  
reading_time: 5 minutes  

---

# How to use input tag in HTML

The `<input>` tag in HTML is used to create various types of form elements that allow users to enter and submit data. The `<input>` tag is versatile and supports many types of [inputs](https://www.mindstick.com/articles/572/input-types-in-html5) by using the `type` attribute to define the specific kind of input element you want to create.

### Basic Syntax

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

### Common Types of Input Elements

**Text Input (**`type="text"`**)**: Used for single-line text input.

```html
<label for="name">Name:</label>
<input type="text" id="name" name="name">
```

**Password Input (**`type="password"`**)**: Used for entering passwords; characters are masked.

```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
```

**Email Input (**`type="email"`**)**: Used for entering email addresses.

```html
<label for="email">Email:</label>
<input type="email" id="email" name="email">
```

**Number Input (**`type="number"`**)**: Used for entering numerical values.

```html
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">
```

**Date Input (**`type="date"`**)**: Used for entering dates.

```html
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
```

**Checkbox (**`type="checkbox"`**)**: Used for creating checkboxes.

```html
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">
```

**Radio Button (**`type="radio"`**)**: Used for creating radio buttons.

```html
<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>
```

**Submit Button (**`type="submit"`**)**: Used to submit the form data to the server.

```html
<input type="submit" value="Submit">
```

**Button (**`type="button"`**)**: Used to create a clickable button that does not submit the form.

```html
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
```

**File Input (**`type="file"`**)**: Used for uploading files.

```html
<label for="file">Choose file:</label>
<input type="file" id="file" name="file">
```

###

### Attributes of `<input>` Tag

- **id**: Specifies a unique identifier for the input element.
- **name**: Specifies the name of the input element, which is used to identify the data when the form is submitted.
- **value**: Specifies the default value of the input element.
- **placeholder**: Provides a hint to the user about what to enter in the input field.
- **required**: Specifies that the input field must be filled out before submitting the form.
- **readonly**: Specifies that the input field is read-only.
- **disabled**: Disables the input field.
- **maxlength**: Specifies the maximum number of characters allowed in the input field.
- **min** and **max**: Specifies the minimum and maximum values for numeric inputs.

The `<input>` tag is a fundamental element in **HTML forms**, allowing users to enter data in **various formats**. By utilizing the different `type` attributes and combining them with other form elements, you can create complex and functional forms to collect user input.

**Read Also** - [HTML5 form attributes](https://www.mindstick.com/articles/579/html-5-form-attributes)

## Answers

### Answer by Ravi Vishwakarma

The `<input>` tag in HTML is used to create various types of form elements that allow users to enter and submit data. The `<input>` tag is versatile and supports many types of [inputs](https://www.mindstick.com/articles/572/input-types-in-html5) by using the `type` attribute to define the specific kind of input element you want to create.

### Basic Syntax

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

### Common Types of Input Elements

**Text Input (**`type="text"`**)**: Used for single-line text input.

```html
<label for="name">Name:</label>
<input type="text" id="name" name="name">
```

**Password Input (**`type="password"`**)**: Used for entering passwords; characters are masked.

```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
```

**Email Input (**`type="email"`**)**: Used for entering email addresses.

```html
<label for="email">Email:</label>
<input type="email" id="email" name="email">
```

**Number Input (**`type="number"`**)**: Used for entering numerical values.

```html
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">
```

**Date Input (**`type="date"`**)**: Used for entering dates.

```html
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
```

**Checkbox (**`type="checkbox"`**)**: Used for creating checkboxes.

```html
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">
```

**Radio Button (**`type="radio"`**)**: Used for creating radio buttons.

```html
<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>
```

**Submit Button (**`type="submit"`**)**: Used to submit the form data to the server.

```html
<input type="submit" value="Submit">
```

**Button (**`type="button"`**)**: Used to create a clickable button that does not submit the form.

```html
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
```

**File Input (**`type="file"`**)**: Used for uploading files.

```html
<label for="file">Choose file:</label>
<input type="file" id="file" name="file">
```

###

### Attributes of `<input>` Tag

- **id**: Specifies a unique identifier for the input element.
- **name**: Specifies the name of the input element, which is used to identify the data when the form is submitted.
- **value**: Specifies the default value of the input element.
- **placeholder**: Provides a hint to the user about what to enter in the input field.
- **required**: Specifies that the input field must be filled out before submitting the form.
- **readonly**: Specifies that the input field is read-only.
- **disabled**: Disables the input field.
- **maxlength**: Specifies the maximum number of characters allowed in the input field.
- **min** and **max**: Specifies the minimum and maximum values for numeric inputs.

The `<input>` tag is a fundamental element in **HTML forms**, allowing users to enter data in **various formats**. By utilizing the different `type` attributes and combining them with other form elements, you can create complex and functional forms to collect user input.

**Read Also** - [HTML5 form attributes](https://www.mindstick.com/articles/579/html-5-form-attributes)


---

Original Source: https://www.mindstick.com/interview/33891/how-to-use-input-tag-in-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.