HTML Input Attributes

      Comments Off on HTML Input Attributes
Spread the love

HTML Input Attributes are used to specify different types of input fields that can be used within an HTML form. These attributes are used to customize the input fields as per the requirement. Let’s explore some of the common HTML Input Attributes:

  • Readonly Attribute: The readonly attribute is used to specify that the input field cannot be edited by the user but can only be viewed. It is similar to the disabled attribute, but the user can still select and copy the contents of the field.

Example:

 
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe" readonly>
  1. Disabled Attribute: The disabled attribute is used to specify that the input field cannot be used or edited by the user. The input field appears grayed out and cannot be selected.

Example:

 
<label for="email">Email:</label>
<input type="email" id="email" name="email" disabled>
  1. Size Attribute: The size attribute is used to specify the width of the input field in characters. It is commonly used for text input fields.

Example:

 
<label for="username">Username:</label>
<input type="text" id="username" name="username" size="30">
  1. Min and Max Attributes: The min and max attributes are used to specify the minimum and maximum values for a number input field.

Example:

html
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100">
  1. Multiple Attribute: The multiple attribute is used to specify that multiple files can be selected for the input field. This attribute is used for the file input field.

Example:

 
<label for="myfile">Select files:</label>
<input type="file" id="myfile" name="myfile" multiple>
  1. Pattern Attribute: The pattern attribute is used to specify a regular expression pattern that the input field value must match.

Example:

html
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
  1. Placeholder Attribute: The placeholder attribute is used to provide a hint or example of what should be entered in the input field.

Example:

html
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" placeholder="Enter your comment here..."></textarea>
  1. Required Attribute: The required attribute is used to specify that the input field is required and must be filled out before the form can be submitted.

Example:

 
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
  1. Step Attribute: The step attribute is used to specify the increment or decrement for a number input field.

Example:

html
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" step="2" min="2">
  1. Autofocus Attribute: The autofocus attribute is used to specify that the input field should automatically receive focus when the page loads.

Example:

html
<label for="search">Search:</label>
<input type="text" id="search" name="search" autofocus>
  1. Height and Width Attributes: The height and width attributes are used to specify the height and width of the input field. This attribute is used for the image input field.

Example:

html
<label for="image">Select image:</label>
<input type="image" id="image" name="image" src="example.jpg" height="100" width="100">

:

  1. readonly: This attribute sets an input field to be read-only, meaning that the user cannot modify the value. The value can only be changed by JavaScript. For example:bash
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="JohnDoe" readonly>

disabled: This attribute disables an input field, meaning that the user cannot interact with it. The value cannot be changed even by JavaScript. For example:

ruby
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com" disabled>

size: This attribute specifies the size of an input field in characters. For example:

 
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" size="10">

min and max: These attributes specify the minimum and maximum values for a number input field. For example:

 
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99">

multiple: This attribute allows users to select multiple values from a list of options. It is used with select and input tags. For example:

 
<label for="colors">Colors:</label>
<select id="colors" name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

pattern: This attribute specifies a regular expression pattern that the value of an input field must match. For example:

 
<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}">

placeholder: This attribute provides a hint to the user about the expected value of an input field. It is displayed in the input field until the user types something in it. For example:

 
<label for="search">Search:</label>
<input type="text" id="search" name="search" placeholder="Enter keywords">

required: This attribute specifies that an input field must be filled out before submitting the form. For example:

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

step: This attribute specifies the increment or decrement for a number input field. For example:
  1. <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" step="5">
  2. autofocus: This attribute specifies that an input field should automatically get focus when the page loads. For example:
 
<label for="username">Username:</label>
<input type="text" id="username" name="username" autofocus>
  1. height and width: These attributes set the height and width of an input field. They are usually used with the img and canvas tags. For example:
 
<label for="image">Image:</label>
<input type="image" id="image" name="image" src="image.jpg" alt="Image" height
HTML Form Elements