Input Attributes

HTML Input Attributes

value Attribute

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

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

size Attribute

The size attribute specifies the size (in characters) for the input field:

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

HTML5 Attributes

HTML5 added the following attributes for <input>:

1. autocomplete
2. autofocus
3. form
4. formaction
5. formenctype
6. formmethod
7. formnovalidate
8. formtarget
9. height and width
10. list
11. min and max
12. multiple
13. pattern (regexp)
14. placeholder
15. required
16. step

Autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

Example

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:
Last name:
E-mail:

Novalidate Attribute

The novalidate attribute is a <form> attribute.

Example

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

E-mail:

Autofocus Attribute

Example

First name:<input type="text" name="fname" autofocus>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Form Attribute

Example

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Last name:

 Formaction Attribute

Example

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:
Last name:

 Formenctype Attribute

Example

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Formmethod Attribute

Example

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:
Last name:

Formnovalidate Attribute

Example

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

E-mail:

Formtarget Attribute

Example

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:
Last name:

Height and width Attributes

Example

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Yourself Try

List Attribute

Example

<input list="browsers">

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Min and max Attributes

Example

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Enter a date before 1980-01-01: Enter a date after 2000-01-01: Quantity (between 1 and 5):

Multiple Attribute

Example

Select images: <input type="file" name="img" multiple>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Select images:

Pattern Attribute

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Country code:

 Placeholder Attribute

Example

<input type="text" name="fname" placeholder="First name">

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Required Attribute

Example

Username: <input type="text" name="usrname" required>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Username:

Step Attribute

Example

<input type="number" name="points" step="3">

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser: