« Previous Next »

HTML Input Attributes

The value Attribute

The input value attribute specifies an initial value for an input field:

Output:

The readonly Attribute:

Output:

The disabled Attribute

Output:

The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

Output:

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

Output:

Practice Exercises

Task 1: How to set up a complete checkout form with mixed input attributes?

Goal: Build a checkout form using autocomplete, datalist city suggestions, a readonly product model, a disabled promo code, and autocomplete="off" for sensitive CVV code.
💡 Hint: Use autocomplete="on" in form, list with <datalist> for suggestions, readonly for product name, disabled for coupon, and autocomplete="off" for CVV.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Checkout Form Practice</title>
  </head>
  <body>

    <h2>Product Checkout</h2>

    <form action="/order.php" autocomplete="on">
      
      <label for="cname">Customer Name:</label><br>
      <input type="text" id="cname" name="cname"><br><br>

      <label for="city">Select Delivery City:</label><br>
      <input list="city-list" id="city" name="city" placeholder="Type or select city...">
      <datalist id="city-list">
        <option value="Delhi">
        <option value="Mumbai">
        <option value="Pune">
        <option value="Kolkata">
      </datalist><br><br>

      <label for="item">Product (Readonly):</label><br>
      <input type="text" id="item" name="item" value="MacBook Air M2" readonly><br><br>

      <label for="promo">Promo Code (Disabled):</label><br>
      <input type="text" id="promo" name="promo" value="WELCOME500" disabled><br><br>

      <label for="cvv">CVV Code (Autocomplete Off):</label><br>
      <input type="password" id="cvv" name="cvv" autocomplete="off"><br><br>

      <input type="submit" value="Place Order">
    </form>

  </body>
</html>
Output :

Product Checkout











Explanation: Enabling autocomplete="on" speeds up form filling for users. The list attribute provides dynamic location suggestions, while readonly keeps submitted data fixed. The disabled attribute completely locks inactive elements, and autocomplete="off" prevents sensitive card details from being cached in the browser.
« Previous Next »