<input> : Input (Form Input) element

by

Introduction

The <input> element is a fundamental part of HTML forms, allowing users to input data that can be submitted to a web server for processing. It is a versatile element with various types and attributes to handle different types of input.

Here is a basic example of the <input> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <form action="/submit_form" method="post">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      <br>
      <input type="submit" value="Submit">
    </form>
</body>
</html>

Output :

In this example:

  • type: Specifies the type of input. In the example, there are two inputs with types text and password.
  • id: Provides a unique identifier for the input element. This is often used in conjunction with a <label> element’s for attribute to associate the label with the input.
  • name: Defines the name of the input, which is used when submitting the form data to the server.
  • required: Indicates that the input must be filled out before submitting the form.

Common types of the <input> element include:

1. Text Input: Collecting single-line text input from the user, such as a username or search query.

<input type="text" name="username" placeholder="Enter your username" required>

2. Password Input: Collecting sensitive information like passwords, where the entered characters are obscured.

<input type="password" name="password" placeholder="Enter your password" required>

3. Checkbox: Allowing users to select multiple options or agree to terms and conditions.

<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter

4. Radio Buttons: For exclusive options where users can choose only one from a group of options.

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

5. Submit Button: Triggering the form submission to send user-entered data to the server for processing.

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

6. Reset Button: Resetting form fields to their default values.

<input type="reset" value="Reset">

7. File Input: Allowing users to upload files to the server.

<input type="file" name="fileUpload">

8. Hidden Input: Storing data on the client side that is not meant to be visible or modifiable by the user.

<input type="hidden" name="secretKey" value="12345">

9. Number Input: Accepting numerical input with optional constraints (minimum, maximum values).

<input type="number" name="quantity" min="1" max="100" value="1">

The <input> element can have various attributes depending on its type and purpose, allowing developers to control behavior, validation, and appearance.

Leave a Comment