HTML Input Attributes

❮ Prev Next ❯

HTML input formattributes provide additional information and instructions to the input fields of an HTML form. Some of the commonly used input form attributes are:

Required

It specifies that the user must fill in the input field before submitting the form. For example: 

<input type="text" name="name" required>

Placeholder:

It specifies a short hint that describes the expected value of the input field. For example: 

<input type="text" placeholder="Your username" name="name" required>

disabled:

It specifies that the input field is disabled and cannot be edited or submitted. For example: 

<input type="tel" name="phone" value="12345678" disabled>

Autocomplete:

It specifies whether the browser should autocomplete the input field or not. For example: 

<input type="text" name="address" autocomplete="on">

Maxlength:

It specifies the maximum number of characters that the input field can accept. For example: 

<input type="text" name="comment" maxlength="100">

Min and Max:

These attributes are used with number, range, date, datetime-local and time input types to set the minimum and maximum values of the input field. For example: 

<input type="number" name="age" min="18" max="120">

Pattern:

It specifies a regular expression that the input value must match. For example: 

<input type="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long">

Example 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Title of the Document</title>
</head>
<body>
  <h1>HTML Form</h1>
  <form action="/submit-form" method="POST">
    <label for="username">User Name:</label>
    <input type="text" id="username" name="username">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@gmail.com">
    <label for="phone">Phone No:</label>
    <input type="tel" id="phone" name="phone" value="12345678" disabled>
    <label for="password">Password:</label>
    <input type="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long">
    <label for="comment">Comment:</label>
    <input type="text" name="comment" maxlength="100">
    <label for="age">Age:</label>
    <input type="number" name="age" min="18" max="120">
    <input type="submit" value="Submit">
  </form>
  </body>
</html>

These are just a few examples of HTML input form attributes that can be used to enhance the functionality and usability of HTML forms. now let learn about HTML Media in the next chapter.

❮ Prev Next ❯