HTML Input Attributes

HTML Input Attributes: This chapter describes the various attributes for the HTML <input> element.

HTML input attributes make the input elements more useable. There are numerous attributes related with the input element. The attributes provide the extra data about the input elements.

In this tutorial, you will learn-

In this article, you will learn-

1 The value Attribute
2 The input value attribute
3 The readonly Attribute
4 The disabled Attribute
5 The size Attribute
6 The maxlength Attribute
7 The min and max Attributes
8 The multiple Attribute
9 The pattern Attribute
10 The placeholder Attribute
11 The required Attribute
12 The step Attribute
13 The autofocus Attribute
14 The height and width Attributes
15 The list Attribute
16 The autocomplete Attribute

The value Attribute

The input value attribute indicates an underlying value for an input field:

Example
Input fields with initial (default) values:

<!DOCTYPE html>
<html>
<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Salman"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Khan"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The input value attribute

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

The readonly Attribute

The input readonly attribute indicates that an input field is read-only.

A read-only input field can’t be changed (in any case, a user can tab to it, feature it, and copy the content from it).

The value of a read-only input field will be sent while submitting the form!

Example
A read-only input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Salman" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Khan">
</form>

The disabled Attribute

The input disabled attribute indicates that an input field ought to be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field won’t be sent while submitting the form!

Example
A disabled input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Salman" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Khan">
</form>

The size Attribute

The input size attribute determines the noticeable width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the accompanying input types: text, search, tel, url, email, and password.

Example
Set a width for an input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

The maxlength Attribute

The input maxlength attribute determines the maximum number of characters allowed in an info field.

Note: When a maxlength is set, the input field won’t acknowledge more than the predetermined number of characters. Nonetheless, this attributes doesn’t provide any feedback. Along these lines, assuming you need to alarm the user, you should write JavaScript code.

Example
Set a maximum length for an input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

The min and max Attributes

The input min and max attributes determine the minimum and maximum values for an input field.

The min and max attributes work with the accompanying input types: number, range, date, datetime-local, month, time and week.

Tip: Use the maximum and min attributes together to create a range of legal values.

Example
Set a max date, a min date, and a range of legal values:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The multiple Attribute

The input numerous attributes determines that the user is allowed to enter more than one value in an input field.

The different attribute works with the accompanying input types: email, and files.

Example
A file upload field that accepts multiple values:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

The pattern Attribute

The input pattern attribute determines a regular expression that the input field’s value is checked against, when the form is submitted.

The pattern attribute works with the accompanying input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Example
An input field that can contain only three letters (no numbers or special characters):

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

The placeholder Attribute

The input placeholder attributes determines a short clue that describes the expected value of an input field (a sample value or a short description of the expected format).

The short clue is shown in the input field before the user enters a value.

The placeholder attributes works with the accompanying input types: text, search, url, tel, email, and password.

Example
An input field with a placeholder text:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

The required Attribute

The input required attribute indicates that an input field should be filled out before submitting the form.

The required attribute works with the accompanying input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and files.

Example
A required input field:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

The step Attribute

The input step attribute determines the legal number intervals for an input field.

Example: if step=”3″, legal numbers could be – 3, 0, 3, 6, and so on

Tip: This attribute can be used along with the maximum and min attributes to create a range of legal values.

The step attribute works with the accompanying input types: number, range, date, datetime-local, month, time and week.

Example
An input field with a specified legal number intervals:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

Note: Input limitations are not foolproof, and JavaScript provides numerous approaches to add illegal input. To securely confine input, it should likewise be checked by the receiver (the server)!

The autofocus Attribute

The input autofocus attribute determines that an input field ought to automatically get focus when the page loads.

Example
Let the “First name” input field automatically get focus when the page loads:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

The height and width Attributes

The input height and width attributes indicate the height and width of an <input type=”image”> element.

Tip: Always determine both the height and width attributes for pictures. In the event that height and width are set, the space needed for the picture is saved when the page is loaded. Without these attributes, the browser doesn’t know the the size of the picture, and can’t save the appropriate space to it. The effect will be that the page layout will change during loading (while the pictures load).

Example
Define an image as the submit button, with height and width attributes:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

The list Attribute

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

Example
An element with pre-defined values in a :

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

The autocomplete Attribute

The input autocomplete attribute indicates whether a form or an input field ought to have autocomplete on or off.

Autocomplete allows the browser to predict the value. At the point when a user begins to type in a field, the browser should show alternatives to fill in the field, based on earlier typed values.

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

Example
An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under “Preferences” in the browser’s menu).

HTML Form and Input Elements

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.