HTML Input Attribute

    <input> element has many attributes, and each one has a specific meaning. Here we have covered all the major attributes we use in <input> element. Some of the attributes are optional, and some are mandatory to mention.

    <input> Attributes


    <input type=""> the type attribute defines the input type for the input block. By default, the type value is "text". Example

    Name: <input type="text" id="name" name="name">

    Preview Name:


    <input value=""> the value attribute defines the initial value for the input field, and it can also be treated as a default value. Example

    Name: <input type="text" value="Username" name="name">

    Preview Name:


    <input readonly> the readonly attribute makes sure that the user can not fill the input block. The user can only copy and read the data. But when the user hits the submit button, the value of readonly input will also be sent to the server. Example

    Name: <input type="text" value="Sam" name="name" readonly>

    Preview Name:


    <input disabled> the disabled attribute is quite similar to readonly attribute. But with the disabled attribute, the value of the input data will not be sent to the server if the user hit the submit button. The data inside the disable input will is un-clickable. Example

    Name: <input type="text" value="Sam" name="name" disabled>

    Preview Name:


    <input size=""> the size an attribute defines the length of the visible input block. By default, size value is 20. Example

    Name: <input type="text" name="name" size="40">

    Preview Name:


    <input maxlength=""> the maxlength attribute limits the number of characters that can be filled in the input block. Example

    Name: <input type="text" name="name" maxlength="20">

    Preview Name:

    Min and Max

    The min and max attribute defines a range of data that can be filled in an input block. These two attributes can be used with number, range, date, datetime-local, month and week type. Example

    Age(18-24) :<input type="number" name="age" min="18" max="24">

    Preview Age(18-24) :


    <input multiple> the multiple attribute allows the user to select or enter one or more than one value. We can use multiple attribute with email and file type. Example

    Select Photos: <input type="file" name="pic" multiple>

    Preview Select Photos:


    <input pattern=""> the pattern attribute is used to set a regular expression for the input block. And the user will only be able to fill that data which satisfy the regular expression. The pattern attribute can be used along with date, text, URL, tel, email and password type. Example

    Enter First 4 letter of Name and Birth Year(Ajay1999) :
    <input type="text" name="code" pattern="[A-Za-z]{4}[0-9]{4}">

    Preview Enter First 4 letter of Name and Birth Year(Ajay1999) :


    <input placeholder=""> the placeholder attribute defines a hint for the input block. Unlike the value attribute, it does not specify a default value to the input. Example

    Search: <input type="text" name="find" placeholder="Search..">

    Preview Search:


    <input required> the required attribute make sure that the user fills the specific input field. Until the user fills that input field, the submit button will not work, and data will not be sent to the server. Example

    <label for="comment">Comment: </label>
    <input type="text" name="comment" id ="comment" required>
    <input type="submit" value="Comment">

    Preview Comment:


    <input step=""> the step attribute specifies an interval type input where the user can only enter a specific range of input values. For instance, if the step value is 4, then the user will only be allowed to fill the interval of 4 which are -4, 0, 4, 8, 12, etc. Example

    <label for="Score">Score:</label>
    <input type="number" id="score" name="score" step="5">




    <input autofocus> the autofocus attribute make sure that the input block will be focused as soon as the page gets load. Example

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

    Preview Name:


    <input list=""> the list attribute used when we want to specify the <datalist> element for the input block. The <datalist> element defines some pre-define option for the specific input block. The list value should be equal to the id value of <datalist> . Example

    <input list="language">
    <datalist id="language">
    <option value="Python">
    <option value="Java">
    <option value="C++">
    <option value="PHP">



    <input autocomplete="on"> the autocomplete attribute can be used with <form> and <input> element. And it specifies if the specific input field or the complete form should accept autocompletion or not. By default, the autocomplete value is on. Example

    <form autocomplete="off">
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="pwd">Password</label>
    <input type="Password" name="pwd" id="pwd">


    Username Password

    HTML Input Attributes

    • type is the commonly used input attribute.
    • By default type value is text.
    • The value attribute specifies the default value for the input block.
    • If an input block is hidden and disabled, then the user could not fill that block.
    • Placeholder is used to provide a hint about the input block.
    • Autocomplete can be set to <form> and individual <input> element.

    People are also reading: