HTML Input Attributes

This chapter describes the different attributes you can use on the HTML <input> element.

The value Attribute

The value attribute sets a starting (default) value for an input field.

Example

Text fields that start with default values.

A form whose First name and Last name text fields have initial (default) values "John" and "Doe" set with the value attribute.

> Output: complete HTML page

Prompt

A form whose First name and Last name text fields have initial (default) values "John" and "Doe" set with the value attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The value Attribute</title>
</head>
<body>
  <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">
  </form>
</body>
</html>

The readonly Attribute

The readonly attribute makes an input field read-only, so it cannot be changed. The user can still tab to it, highlight it, and copy its text. Its value is still sent when the form is submitted.

Example

A read-only first name field.

A form where the First name field is read-only (has the readonly attribute and value "John"), so it cannot be edited but its value is still submitted. The Last name field stays editable.

> Output: complete HTML page

Prompt

A form where the First name field is read-only (has the readonly attribute and value "John"), so it cannot be edited but its value is still submitted. The Last name field stays editable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The readonly Attribute</title>
</head>
<body>
  <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John" readonly><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">
  </form>
</body>
</html>

The disabled Attribute

The disabled attribute turns off an input field, so it cannot be used or clicked. The value of a disabled field is not sent when the form is submitted.

Example

A disabled first name field.

A form where the First name field is disabled (has the disabled attribute and value "John"), so it is unusable and its value is not submitted. The Last name field stays editable.

> Output: complete HTML page

Prompt

A form where the First name field is disabled (has the disabled attribute and value "John"), so it is unusable and its value is not submitted. The Last name field stays editable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The disabled Attribute</title>
</head>
<body>
  <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John" disabled><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">
  </form>
</body>
</html>

The size Attribute

The size attribute sets the visible width of an input field, measured in characters. The default is 20.

Note: size works with these input types: text, search, tel, url, email, and password.

Example

A wide first name field and a narrow PIN field.

A form using the size attribute to set field widths: a First name text field with size="50" and a PIN text field with size="4".

> Output: complete HTML page

Prompt

A form using the size attribute to set field widths: a First name text field with size="50" and a PIN text field with size="4".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The size Attribute</title>
</head>
<body>
  <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>
</body>
</html>

The maxlength Attribute

The maxlength attribute sets the most characters a field will accept.

Note: When maxlength is set, the field simply will not take more characters, but it gives no message. To warn the user, you need JavaScript.

Example

A PIN field limited to four characters.

A form using maxlength: a First name field with size="50" and a PIN field with maxlength="4" and size="4" so it accepts at most four characters.

> Output: complete HTML page

Prompt

A form using maxlength: a First name field with size="50" and a PIN field with maxlength="4" and size="4" so it accepts at most four characters.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The maxlength Attribute</title>
</head>
<body>
  <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>
</body>
</html>

The min and max Attributes

The min and max attributes set the smallest and largest values a field will accept.

They work with these input types: number, range, date, datetime-local, month, time, and week. Use them together to make a range of allowed values.

Example

Date fields with min and max limits, plus a number field for a quantity from 1 to 5.

A form using min and max: a date field that must be before 1980-01-01 (max="1979-12-31"), a date field that must be after 2000-01-01 (min="2000-01-02"), and a number field for a quantity between 1 and 5.

> Output: complete HTML page

Prompt

A form using min and max: a date field that must be before 1980-01-01 (max="1979-12-31"), a date field that must be after 2000-01-01 (min="2000-01-02"), and a number field for a quantity between 1 and 5.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The min and max Attributes</title>
</head>
<body>
  <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>
</body>
</html>

The multiple Attribute

The multiple attribute lets the user enter more than one value in a field. It works with the email and file input types.

Example

A file field that accepts more than one file.

A form with a file upload field that accepts more than one file using the multiple attribute, labeled "Select files:".

> Output: complete HTML page

Prompt

A form with a file upload field that accepts more than one file using the multiple attribute, labeled "Select files:".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The multiple Attribute</title>
</head>
<body>
  <form>
    <label for="files">Select files:</label>
    <input type="file" id="files" name="files" multiple>
  </form>
</body>
</html>

The pattern Attribute

The pattern attribute sets a regular expression that the field's value is checked against when the form is submitted.

It works with these input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern so the user knows what is expected.

Example

A field that only accepts a three-letter country code.

A form with a text field for a country code that uses pattern="[A-Za-z]{3}" so it only accepts three letters, with a title attribute describing the pattern.

> Output: complete HTML page

Prompt

A form with a text field for a country code that uses pattern="[A-Za-z]{3}" so it only accepts three letters, with a title attribute describing the pattern.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The pattern Attribute</title>
</head>
<body>
  <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>
</body>
</html>

The placeholder Attribute

The placeholder attribute shows a short hint inside the field before the user types, such as a sample value or the expected format.

It works with these input types: text, search, url, number, tel, email, and password.

Example

A phone field with a placeholder hint.

A form with a telephone field that shows the placeholder hint "123-45-678" and uses the pattern [0-9]{3}-[0-9]{2}-[0-9]{3}.

> Output: complete HTML page

Prompt

A form with a telephone field that shows the placeholder hint "123-45-678" and uses the pattern [0-9]{3}-[0-9]{2}-[0-9]{3}.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The placeholder Attribute</title>
</head>
<body>
  <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>
</body>
</html>

The required Attribute

The required attribute means a field must be filled in before the form can be submitted.

It works with these input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

A required username field.

A form with a username text field that has the required attribute, so the form cannot be submitted until it is filled in.

> Output: complete HTML page

Prompt

A form with a username text field that has the required attribute, so the form cannot be submitted until it is filled in.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The required Attribute</title>
</head>
<body>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
  </form>
</body>
</html>

The step Attribute

The step attribute sets the allowed number intervals for a field. For example, with step="3" the valid numbers are -3, 0, 3, 6, and so on.

It works with these input types: number, range, date, datetime-local, month, time, and week. You can use it with min and max to make a range of allowed values.

Note: Input restrictions are not foolproof, and JavaScript can be used to add invalid input. To be safe, the server must also check the input.

Example

A number field that only allows intervals of three.

A form with a number field labeled "Points:" that uses step="3" so only numbers at intervals of three are valid.

> Output: complete HTML page

Prompt

A form with a number field labeled "Points:" that uses step="3" so only numbers at intervals of three are valid.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The step Attribute</title>
</head>
<body>
  <form>
    <label for="points">Points:</label>
    <input type="number" id="points" name="points" step="3">
  </form>
</body>
</html>

The autofocus Attribute

The autofocus attribute makes a field automatically get focus when the page loads.

Example

The first name field gets focus as soon as the page loads.

A form where the First name field has the autofocus attribute, so it automatically gets focus when the page loads. Include an editable Last name field too.

> Output: complete HTML page

Prompt

A form where the First name field has the autofocus attribute, so it automatically gets focus when the page loads. Include an editable Last name field too.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The autofocus Attribute</title>
</head>
<body>
  <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>
</body>
</html>

The height and width Attributes

The height and width attributes set the size of an <input type="image"> element.

Tip: Always set both. When the size is known, the browser reserves space for the image while the page loads, so the layout does not jump around as images appear.

Example

An image submit button with set height and width.

A form with First name and Last name text fields and an image submit button (input type="image", src "img_submit.gif", alt "Submit") with width="48" and height="48".

> Output: complete HTML page

Prompt

A form with First name and Last name text fields and an image submit button (input type="image", src "img_submit.gif", alt "Submit") with width="48" and height="48".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The height and width Attributes</title>
</head>
<body>
  <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>
</body>
</html>

The list Attribute

The list attribute connects an input to a <datalist> element that holds pre-defined options for it.

Example

An input with pre-defined browser values in a datalist.

A form with a text input whose list attribute points to a datalist of browser options (Edge, Firefox, Chrome, Opera, Safari).

> Output: complete HTML page

Prompt

A form with a text input whose list attribute points to a datalist of browser options (Edge, Firefox, Chrome, Opera, Safari).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The list Attribute</title>
</head>
<body>
  <form>
    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
  </form>
</body>
</html>

The autocomplete Attribute

The autocomplete attribute says whether a form or a single field should have autocomplete on or off. When it is on, the browser can suggest values based on what the user typed before.

It works with <form> and these input types: text, search, url, tel, email, password, date pickers, range, and color.

Tip: In some browsers you may need to turn on the autocomplete feature in the settings for this to work.

Example

A form with autocomplete on, but off for the email field.

A form with action /action_page.php and autocomplete="on", containing First name, Last name, and Email fields plus a submit button. The Email field overrides with autocomplete="off".

> Output: complete HTML page

Prompt

A form with action /action_page.php and autocomplete="on", containing First name, Last name, and Email fields plus a submit button. The Email field overrides with autocomplete="off".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The autocomplete Attribute</title>
</head>
<body>
  <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>
</body>
</html>