HTML Input Attributes

Value Attribute

The value attribute defines an initial value for the input element. This will remain if you reset value of the form instead of blank.

Let's see with some example

					 
        
          <form>
            <input type="text" value="John Doe">
          </form>
        
      

Readonly Attribute

The readonly attribute defines that the input element is only readable. The value of readonly input element can not be changed, but you can copy text, highlight field, and submit it's value with form.

Let's see with some example

					 
        
          <form>
            <input type="text" value="John Doe" readonly>
          </form>
        
      

Disabled Attribute

The disabled attribute defines that the input element is unusable and un-clickable. The value of disabled input element will not be submitted with form.

Let's see with some example

					 
        
          <form>
            <input type="text" value="John Doe" disabled>
          </form>
        
      

Size Attribute

The size attribute specifies the visible width of the input element in characters (default 20). This attributes can be used with only, text, search, email, password, url, and tel input types.

Let's see with some example

					 
        
          <form>
            <input type="text" value="John Doe" size="100"><br>
            <input type="text" value="John Doe" size="30">
          </form>
        
      

Max Length Attribute

The maxlength attribute specifies the characters length an input element can have and will not accept any characters more than the maxlength value.

Let's see with some example

					 
        
          <form>
            <input type="text" value="John Doe" maxlength="10">
          </form>
        
      

Min And Max Attributes

The min and max attributes specify the minimum and maximum value an input element value can have. These attributes work with number, range, date, datetime-local, month, time, and week, input types.

Let's see with some example

					 
        
          <form>
            <input type="range" value="John Doe" min="20" max="50"><br>
            <input type="date" min="2023-01-01" max="2030-01-01">
          </form>
        
      

Multiple Attribute

The multiple attribute allow input elements to have more than one value for email, and file input types.

Let's see with some example

					 
        
          <form>
            <input type="file" multiple>
          </form>
        
      

Pattern Attribute

The pattern attribute specifies the conditions in the form of regular expression that must be checked before form is submitted. This attribute works with text, date, search, url, tel, email, and password input types.

Let's see with some example

					 
        
          <form>
            <input type="text" pattern="[A-z]{3}" title="There uppercase characters only">
          </form>
        
      

Placeholder Attribute

The placeholder attribute specifies the sample value as a hint and displayed before user enters any value. This attribute works with text, search, url, tel, email, and password input types.

Let's see with some example

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

Required Attribute

The required attribute defines that input element must have a value and can not be null before form submission. This attribute works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file input types.

Let's see with some example

					 
        
          <form>
            <input type="text" placeholder="Enter your name" required>
          </form>
        
      

Step Attribute

The step attribute specifies the interval for input values. This attribute works with number, range, date, datetime-local, month, time and week input types. For example step="5" means it accepts values multiple of 5 like 0, 5, 15, 35, -10, -20, etc

Let's see with some example

					 
        
          <form>
            <input type="number" step="5">
          </form>
        
      

Autofocus Attribute

The autofocus attribute defines an input element that get focused when page loads.

Let's see with some example

					 
        
          <form>
            <input type="text" autofocus>
          </form>
        
      

Width And Height Attributes

The width and height attributes define the width and height of the input image type. Use CSS instead.

Let's see with some example

					 
        
          <form>
            <input type="text"><br>
            <input type="image" src="logo.png" width="75" height="75">
          </form>
        
      

Autocomplete Attribute

The autocomplete attribute specifies that whether an input element have auto complete feature on or off to show prediction from previous form filling. It will work with text, search, url, tel, email, password, datepickers, range, and color input types.

Let's see with some example

					 
        
          <form>
            <input type="text" id="name" name="name" autocomplete="on">
          </form>
        
      

Name Attribute

The name attribute specifies the name of input element and can be used to access the value after form the submission on server.

Let's see with some example

					 
        
          <form>
            <input type="text" id="name" name="name">
          </form>
        
      

List Attribute

The list attribute specifies the <datalist> element for predefined options.

Let's see with some example

					 
        
          <form>
            <input type="text" list="language">
            <datalist id="language">
              <option value="HTML">
              <option value="CSS">
              <option value="JavaScript">
            </datalist>
          </form>