HTML Input Elements

In HTML, input elements are used to create interactive forms and allow users to input data. They enable users to enter text, make selections, upload files, and perform various other actions. Here are some commonly used input elements:

Text Input: <input type="text"> This element creates a single-line text input field where users can enter text.
```
 <input type="text" name="username" placeholder="Enter your username">
```
Password Input: <input type="password"> This element masks the entered characters, typically used for password inputs.
```
 <input type="password" name="password" placeholder="Enter your password">
```

Checkbox: <input type="checkbox"> This element allows users to select one or more options from a predefined set of choices.

 <label>
   <input type="checkbox" name="option1" value="option1"> Option 1
 </label>
 <label>
   <input type="checkbox" name="option2" value="option2"> Option 2
 </label>

Radio Button: <input type="radio"> Radio buttons allow users to select a single option from a predefined set of choices.

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

Select Dropdown: <select> The select element creates a dropdown menu with options, and users can choose a single option from the list.

 <select name="country">
   <option value="usa">USA</option>
   <option value="uk">UK</option>
   <option value="canada">Canada</option>
 </select>

File Upload: <input type="file"> This element enables users to select and upload files from their device to the web server.
```
 <input type="file" name="fileUpload">
```
Button: <input type="button"> or <button> Buttons trigger actions when clicked. They can be used to submit forms, reset data, or perform custom JavaScript functions.
```
 <input type="button" value="Click Me">
 or
 <button type="button">Click Me</button>
```
Date Input: <input type="date"> The date input element allows users to select a date from a calendar.
```
 <input type="date" name="birthdate">
```
Range Input: <input type="range"> This element creates a slider control that allows users to select a value within a specified range.
```
 <input type="range" name="volume" min="0" max="100" step="1">
```
Submit Button: <input type="submit"> This button triggers the form submission when clicked.
```
<input type="submit" value="Submit">
```

These are just a few examples of input elements in HTML. Each element has specific attributes and behaviors that can be customized to suit your needs.

Aravind Ontagodi's blog

Aravind Ontagodi's blog

HTML Input Elements

Table of contents

No headings in the article.