HTML Input Attributes - Informatic Point

The HTML Input attributes are well built because their attributes are powerful. However, in reality, various attributes have an effect on only a specific task of an input type. In addition, the way many attributes affect an input depends on the input type. This can impact different types of input ways. The article will teach you all the HTML input attributes with a brief explanation. HTML Attributes that are unique to certain input types are ordinary to all input types. This element includes the global attributes.

Value HTML input Attributes

The value attributes in HTML are used to define the value of the element with its used. The value attributes have a different meaning for different HTML elements. So, Let’s take a look at an example:

<form action="action.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Muhammad"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Ali"><br><br>
  <input type="submit" value="Submit">
</form>

Read-only Attribute

The read-only attribute is a Boolean attribute which is used to define that the text written in the input element is read-only. It means that a user can not change the text present in a certain element. In javascript you can modify the read-only value and make the input field editable. So, let’s take a look at an example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Muhammad" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Ali">
</form>

Disabled Attribute

The HTML input attributes disabled for input tag in HTML is used to define that the input field is disabled. The disabled input field will un-clickable when we use a disabled attribute. It is also a boolean attribute. So, let’s take a look at an example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Muhammad" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Ali">
</form>

Required Attribute

The required attribute is also a boolean attribute that is used to defines the input that should be filled before submitting the form. If you use the required attribute no one can submit their input form without filled the data as well. So, let’s take a look at an example:

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

Placeholder Attribute

The HTML Input attributes placeholder attribute defines a brief hint in the input field. This attribute helps the user, what information the input form required. After that, the user enters the data according to the given instruction in placeholder attribute. So, let’s take a look at an example:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Auto-focus Attribute

The auto-focus input attribute is used to define which element should take focus when the page load. It is also a boolean attribute. So, let’s take a look at an example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

List Attribute

The HTML input list attribute is used to check a list of Pre-defined options of an input tag to suggest the user. So, let’s take a look at an example:

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Autocomplete Attribute

The Input autocomplete attribute is used to define whether the input field has auto-completed would be off or on. When you add this attribute to your document automatically filled if the user filled the form before. HTML Input attributes. See Example:

<form action="action.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>