HTML - Input Attributes

HTML input attributes are used to define the characteristics and behavior of the <input> element.

These attributes are used with the different types of input fields such as text, email, password, date, number and so forth. Note that the Input element is used to create interactive controls for the web-based forms so that it can accept data from the user.

The <input> element requires only an opening tag. In this tutorial, we are going to explore the attributes that are used with <input> element.

Following are the attributes of the <input> element

Attribute	Description
type	HTML input type attribute of the HTML input tag specifies the type of input element to display.
name	HTML input name attribute is used to specify the name of an element.
value	HTML input value attribute is used to define the initial value of the input field when the page loads.
size	HTML input size attribute the width of the input field in terms of the number of characters.
maxlength	HTML input maxlength attribute is used to specify maximum characters limit for input text.
readonly	HTML input readonly attribute is used to specify input fields with uneditable texts.
disabled	HTML input disabled is a boolean attribute that is used to make form elements non-interactive.
min	HTML input min attribute specifies the minimum value that an input field can accept.
max	HTML input max attribute specifies the maximum value that an input field can accept.
accept	HTML input accept attribute is used to define what file extension type the server will accept.
multiple	HTML input multiple attribute is a Boolean attribute, that allows form controls to accept more than one value.
placeholder	HTML input placeholder attribute is used to define a short hint that helps the user with data entry.
required	HTML input required attribute is used to specify input field must be filled before submitting form.
autofocus	HTML input autofocus attribute is a boolean attribute that is used to specify that an element should be autofocused after the page has loaded.
list	HTML input list attribute is used to specify a list of predefined options that the user can select from..

Examples of Attributes of Input Tag

Below examples will illustrate the all the attributes of Input tag, where and how we should use this attribute!

Type and Value Attributes of Input Tag

In this example we demonstrate different types of input fields with their corresponding value attributes in an HTML form. The value we provided at input field will be default value, and user can edit it if wanted.

<!DOCTYPE html>
<html>

<head>
      <title>Input Type Attribute Examples</title>
</head>

<body>
<h1>HTML Input Type Attribute Examples</h1>

<form>
   <!-- Text Input -->
   <label for="text">Text:</label>
   <input type="text" 
          id="text" 
          name="text" 
          value="Default Text">
   <br><br>

   <!-- Password Input -->
   <label for="password">Password:</label>
   <input type="password" 
          id="password" 
          name="password" 
          value="password123">
   <br><br>

   <!-- Range Input -->
   <label for="range">Range:</label>
   <input type="range" 
          id="range" 
          name="range" 
          min="0" 
          max="100" 
          value="50">
   <br><br>

   <!-- Datetime-local Input -->
   <label for="datetime">Datetime-local:</label>
   <input type="datetime-local" 
          id="datetime" 
          name="datetime" 
          value="2023-06-01T12:00">
   <br><br>

   <!-- Submit Button -->
   <input type="submit" value="Submit">

</form>

</body>
</html>

Name attribute for input Tag

In this example,we are going to use the name attribute with the input tag to mention name for username and email.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Form Example with Name Attribute</title>
   <script>
      function showAlert() {
         var name = document.getElementById('name').value;
         var email = document.getElementById('email').value;
         alert('Name: ' + name + '\nEmail: ' + email);
      }
   </script>
</head>

<body>
   <h1>Contact Us</h1>
   <form onsubmit="return false;">
      <label for="name">Name:</label>
      <input type="text" 
               id="name" 
               name="user_name">
      <br><br>

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

      <button type="button" onclick="showAlert()">
         Submit
      </button>
   </form>
</body>
</html>

Size and maxlength attributes of input Tag

In this example we will see the difference between size and maxlength attributes of input element.

<!DOCTYPE html>
<html>

<head>
      <title>Size and Maxlength Attribute</title>
</head>

<body>
   <h1>HTML Size and Maxlength Attribute</h1>

   <h2>Size Attribute</h2>
   <p>
      The <code>size</code> attribute specifies 
      the visible width of the input field in characters.
   </p>
   
      Size 10:
      <input type="text" 
               name="size-example" 
               size="10" 
               value="1234567890">

   <h2>Maxlength Attribute</h2>
   <p>
      The <code>maxlength</code> attribute specifies 
      the maximum number of characters that can be entered in 
      the input field.
   </p>
      Maxlength 10:
      <input type="text" 
               maxlength="10" 
               value="1234567890">

   <h2>Combined Size and Maxlength</h2>
   <p>
      Here is an example combining both <code>size</code> 
      and <code>maxlength</code> attributes.
   </p>
      Size 10, Maxlength 5:
      <input type="text" 
            size="10" 
            maxlength="5" 
            value="12345">
</body>

</html>

Disabled and readonly attributes of input Tag

Following example shows the difference between usage of "readonly" attribute and "disabled" attribute of <input> element

<!DOCTYPE html>
<html>

<head>
      <title>Readonly and Disabled Attributes </title>
</head>

<body>
   <h1>HTML Readonly and Disabled Attributes </h1>
   
   <h2>Readonly Attribute</h2>
   <p>
      The <code>readonly</code> attribute allows 
      the user to view the content but not modify it.
   </p>
   Readonly:
   <input type="text" value="Readonly Text" readonly>

   <h2>Disabled Attribute</h2>
   <p>
      The <code>disabled</code> attribute makes the 
      input field unmodifiable and prevents user interaction.
   </p>

   Disabled:
   <input type="text" value="Disabled Text" disabled>
</body>

</html>

Min and max attributes of input Tag

In the following example, we will see how to use min and max attributes in input tag. We are mentioning the minimum working hours as 3 and maximum as 8 by using the min and max attributes.

<!DOCTYPE html>
<html>
<head>
   <title>The min and max Attribute</title>
</head>
<body>
   <form >
      Emp. Name: 
      <input type = "text" 
             name = "your_name" 
             placeholder = "your name..."/>
      <br><br>
      Organization: 
      <input type = "text" 
             name = "organization" 
             value = "Tutorialspoint" 
             readonly/>
      <br><br>
      Working Hrs: 
      <input type = "number" 
             name = "working_hours" 
             min="3" 
             max="8"/>
   </form>
</body>
</html>

Accept and Multiple Attributes of Input Tag

In this example we will see how to use accept and multiple attributes inside input tag.

<!DOCTYPE html>
<html>

<head>
      <title>Multiple and Accept Attributes</title>
</head>

<body>
   <h1>HTML Multiple and Accept Attributes</h1>

   <h2>Multiple Attribute</h2>
   <p>
      The <code>multiple</code> attribute allows the 
      user to select multiple files.
   </p>
      Select multiple files:
      <input type="file" 
               id="multiple-example" 
               name="files" 
               multiple>

   <h2>Accept Attribute</h2>
   <p>
      The <code>accept</code> attribute specifies the 
      types of files that the server accepts (that can 
      be submitted through file upload).
   </p>
      Select image files only:
      <input type="file" 
               id="accept-example" 
               name="images" 
               accept="image/*">

</body>

</html>

Placeholder and required attributes of input Tag

In the following example, we are using the placeholder attribute for the name input field and required attribute in email and DOB field to signifies that the field must contain some values for the form to be successfully submitted.

<!DOCTYPE html>
<html>
<head>
      <title>Placeholder and Required Attributes</title>
</head>
<body>
   <h3>Placeholder and Required Attributes</h3>

   <form onsubmit="return false;" >
      <p>The * Star represents mandatory field</p>
      <!-- Placeholder for name entry -->
      Emp. Name:
      <input type="text" 
               id="emp-name" 
               name="emp-name" 
               placeholder="Your Name">
      <br><br>
      <!-- Email and DOB are mandatory -->
      Emp. Email:
      <input type="email" 
               id="emp-email" 
               name="emp-email" 
               placeholder="example@email.com" 
               required>*
      <br><br>
      Date of Birth: 
      <input type="date" required>*
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

Autofocus attribute of input Tag

Following is the example of autofocus attribute. When the page loaded completely the Emp. Name field will be automatically focused.

<!DOCTYPE html>
<html>
<head>
   <title>The autofocus Attribute</title>
</head>
<body>
   <form onsubmit="return false;">
      Emp. Name: 
      <input type = "text" 
             name = "your_name" 
             autofocus/>
      <br><br>
      Emp. Email: 
      <input type = "email" 
             name = "mail" 
             placeholder = "example@email.com" />
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

List attribute of input Tag

In the following example, we are using the ‘list’ attribute with the input type=text and mention value of list attribute as id name of datalist.

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and select 
      from dropdown: 
   </p>
   <input type="text" list="fruits">
   <datalist id='fruits'>
      <option value="Apple"></option>
      <option value="Banana"></option>
      <option value="Orange"></option>
      <option value="Grapes"></option>
      <option value="Pears"></option>
   </datalist>
</body>

</html>

Print Page