Scribd
Upload
19 views

Input Attributes-3924

Notes of Attributes in HTML

Uploaded by

shivangsahu5209
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Input Attributes-3924

Notes of Attributes in HTML

Uploaded by

shivangsahu5209
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Input Attributes

Here's an overview of various attributes that can be used with HTML input elements:

Common Attributes:

● readonly: Specifies that the input field is read-only and cannot be modified by the
user.

<input type="text" readonly value="Read-only text">

● disabled: Disables the input field, preventing user interaction.

<input type="text" disabled>

● size: Sets the visible width of the input field in characters.

<input type="text" size="30">

● maxlength: Specifies the maximum number of characters in the input field.

<input type="text" maxlength="50">

● min and max: Defines numeric input fields' minimum and maximum values.

<input type="number" min="0" max="100">

● multiple: Allows users to select multiple options in a <select> dropdown.

<select multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
Validation and Constraints:

● pattern: Specifies a regular expression pattern for validating the input.

<input type="text" pattern="[A-Za-z]{3}">

● placeholder: Provides a short hint that describes the expected value of the input field

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

● required: Specifies that the input field must be filled out before submitting the form.

<input type="text" required>

● step: Specifies the step increment or jump between values in a numeric input.
<input type="number" step="5">

Other Attributes:

● autofocus: Automatically focuses the input field when the page loads.

<input type="text" autofocus>

● height and width: Defines the height and width of the input field, mainly used with
<input type="image">.

<input type="image" src="button.png" height="50" width="100">


● list: Associates the input field with a <datalist> element, providing predefined
options.

<input type="text" list="browsers">


<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>

● autocomplete:
The autocomplete attribute in HTML specifies whether an input field should have
autocomplete enabled.
When autocomplete is enabled, the browser can suggest and automatically fill values
based on previously entered data by the user.

Values of the autocomplete Attribute


1. on:
Enables autocomplete.
The browser will attempt to fill the input field based on previously entered
values.
This is the default behaviour if the autocomplete attribute is not specified.
2. off:
Disables autocomplete.
The browser will not suggest or fill in values for the input field.
3. name, email, username, password, new-password, current-password,
one-time-code, etc.:
These are specific values that give the browser more context about the
expected input.
Helps the browser provide more accurate and relevant autocomplete
suggestions.

Example Usage:
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name" autocomplete="name">

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

<label for="username">Username:</label>
<input type="text" id="username" name="username"
autocomplete="username">

<label for="password">Password:</label>
<input type="password" id="password" name="password"
autocomplete="new-password">

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


</form>

These attributes control the appearance, behaviour, and validation of HTML input elements,
contributing to a more interactive and user-friendly form experience on web pages.

Conclusion:

In conclusion, HTML input attributes play a crucial role in enhancing the functionality and
user experience of web forms. The common attributes such as readonly, disabled, size,
maxlength, min, and max provide control over user interaction, input size, and numeric
constraints. The validation and constraint attributes like pattern, placeholder, required, and
step contribute to data integrity and user guidance. Additionally, other attributes like
autofocus, height and width, and list add further customization options. By leveraging these
attributes, web developers can create more interactive and user-friendly forms, ultimately
improving the overall usability of their websites.

References:
1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes

You might also like