Learn with us

Certainly! Here are some commonly used HTML input attributes with examples:

1. type attribute:
   The type attribute specifies the type of input field. It determines the kind of data that can be entered or selected. Here are a few examples:

• Text Input:

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

This creates a text input field where users can enter alphanumeric characters.

• Password Input:

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

This creates a password input field where the entered text is masked for security.

• Email Input:

<input type="email" name="email" placeholder="Enter your email">

This creates an input field specifically designed for email addresses, with built-in validation.

2. name attribute:
   The name attribute provides a unique name for the input field. It is used to identify the input when the form is submitted. Here’s an example:

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

In this example, the input field has the name “username,” which will be used to reference the entered value on the server-side.

3. value attribute:
   The value attribute sets the initial value for the input field. It can be used to pre-fill input fields with default or previously submitted values. Example:

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

In this example, the input field is pre-filled with the value “JohnDoe.”

4. placeholder attribute:
   The placeholder attribute provides a short hint that describes the expected value of the input field. It disappears when the user starts typing. Example:

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

In this example, the input field displays the placeholder text “Enter your username” until the user starts entering a value.

5. required attribute:
   The required attribute specifies that the input field must be filled out before submitting the form. Example:

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

In this example, the email input field must be filled out before the form can be submitted.

6. disabled attribute:
   The disabled attribute disables the input field, preventing users from interacting with or editing its value. Example:

<input type="text" name="username" value="JohnDoe" disabled>

In this example, the input field for the username is disabled and cannot be edited by the user.

These are just a few examples of HTML input attributes. There are additional attributes like readonly, maxlength, autofocus, autocomplete, pattern, and more, each with its own specific use cases. You can combine these attributes and customize them to create interactive and user-friendly input fields.