HTML <input> Tag - Form Input Fields

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <input> Tag in HTML 5

Current language:

The <input> tag is used to create an interactive control in an HTML form. For example, <input type="text"> creates a single-line text input field. For multiple lines of text input, use the <textarea> tag instead.

This is an actual working demo of the <input> example code below.

Since autofocus automatically positions the cursor to the input field, the placeholder text for the Username field will not appear unless you tab to the masked password field or click elsewhere. If your browser does not support the HTML 5 placeholder attribute, none of the placeholders will appear.

Note: The first browser where placeholder text in form input fields actually works is Chrome. It may not work yet in other browsers.

<input/> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <form id="form-id" method="GET|POST|etc." action="target-URL">
      ... phrasing content expected ...<input .../>...
      ...
   </form>
   ...
   ... phrasing content expected ...<input form="form-id"/>...
   ...
</body>

Rules for coding HTML input elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the input element where phrasing content is expected, usually inside a form element.
The input element consists of a standalone <input/> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
If the input is for a form that can be submitted but is outside that form element, include a form attribute referencing the form the input is to be associated with.
Include any other attributes on the <input> tag as appropriate.
Since the input element is a void element, it should always be coded as a self-closing tag terminated with the delimiter string />.

<input/> Content Model

Contents of the input element

Content: Empty. All properties are coded using attributes.

Since the <input/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiters /> rather than just > (<input .../>).

<input> Tag Attributes

Attributes of the <input> tag

global attributes	In addition to the personal attributes of the <input> tag below, any of the common HTML attributes can also be coded.
`accept`
`alt`
`autocomplete`
`autofocus="autofocus"`	Sets the value of the <input autofocus> boolean attribute to `true`. Omitting it sets to `false`.
`checked="checked"`	Sets the value of the <input checked> boolean attribute to `true`. Omitting it sets to `false`.
`disabled="disabled"`	Sets the value of the <input disabled> boolean attribute to `true`. Omitting it sets to `false`.
`form`
`formaction`	a URI reference (or IRI reference depending on the `encoding`) for the destination that is to process the submitted data Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference. If the value of the `formaction` attribute resolves to an HTTP URI, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" fragment identifier, indicated by "#" if the response from the form submission has placemarks If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the response document.
`formenctype="application/x-www-form-urlencoded"` `formenctype="multipart/form-data"` `formenctype="text/plain"`
`formmethod="GET"` `formmethod="POST"` `formmethod="PUT"` `formmethod="DELETE"`
`formnovalidate`
`formtarget`
`height`
`list`	An <input> tag with a `list` attribute that references the `id` attribute of a <datalist> tag is used for creating an HTML combo box.
`max`
`maxlength`
`min`
`multiple="multiple"`	Sets the value of the <input multiple> boolean attribute to `true`. Omitting it sets to `false`.
`name`	The name that will be sent with a GET or POST request, which allows the server to access the value of the input field. For a group of radio buttons, all input elements in the same radio button group should have the same value for their name attribute. For other <input type>s, the value of the name attribute should be unique.
`pattern`
`placeholder`
`readonly="readonly"`	Sets the value of the <input readonly> boolean attribute to `true`. Omitting it sets to `false`.
`required="required"`	Sets the value of the <input required> boolean attribute to `true`. Omitting it sets to `false`.
`size`
`src`	a URI reference that resolves to the URL of a two-dimensional image resource Use percent escape codes as explained in the URL-encoding tutorial for any special characters in the URI reference. If the value of the `src` attribute resolves to an HTTP URL, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document.
`step`
`type="button"` `type="checkbox"` `type="color"` `type="date"` `type="datetime"` `type="datetime-local"` `type="email"` `type="file"` `type="hidden"` `type="image"` `type="month"` `type="number"` `type="password"` `type="radio"` `type="range"` `type="reset"` `type="search"` `type="submit"` `type="tel"` `type="text"` `type="time"` `type="url"` `type="week"`	The `type` attribute is an enumerated attribute. `type` attribute values button indicates that a button should be displayed checkbox indicates that a two-state check box should be displayed color indicates that the input field should allow the user to enter or choose a color, possibly using a color picker date indicates that the input field should allow the user to enter or choose a month, day and year, possibly using a date picker datetime indicates that the input field should allow the user to enter or choose a month, day, year and time, possibly using a date picker datetime-local indicates that the input field should allow the user to enter or choose a month, day, year, time and time zone, possibly using a date picker email indicates that the value entered in the input field should be validated as an e-mail address file indicates that the input field should allow the user to enter or choose a file name, possibly using a "Browse" button that pops up a "File Open" dialog hidden indicates that the input field should not be displayed, but its value is to be transmitted along with other input data when the form is submitted image indicates that an image button should be displayed month indicates that the input field should allow the user to enter or choose a month and year, possibly using a date picker number indicates that the input field should allow the user to enter or choose a number, possibly using a spinner or slider control; if the `min` attribute and `step` attribute are both integers, then the value should be restricted to an integer value password indicates that the value entered into the input field should be masked to protect it from being seen by others radio indicates that a radio button should be displayed; if more than one radio button in the form has the same value for the `name` attribute, only one button with the same name can be selected at any one time range indicates that the input field should allow the user to enter or choose a value within a specific range, possibly using a spinner or slider control For a good example of `<input type="range">`, see the HTML Color Picker. reset indicates that a reset button should be displayed, which resets the input fields in the form to their default values search indicates that a search field should be displayed submit indicates that a submit button should be displayed, which typically submits the form tel indicates that the value entered in the input field should be validated as a telephone number text used for a free-form text input field, without any validation time indicates that the input field should allow the user to enter or choose a time, possibly using a spinner control url indicates that the value entered in the input field should be validated as a URL week indicates that the input field should allow the user to enter or choose a year and week, possibly using a date picker
`value`
`width`

<input> Tag Examples

Examples of the `input` tag in HTML 5

Input field with placeholder text and autofocus on input field in HTML form

(see input demo above)

<p style="text-align: right">
   <label for="ex1lang">Current language:</label>
   <select id="ex1lang" form="#ex1form">
      <option value="en" selected="selected">English</option>
      ...
   </select>
</p>
...
<form id="ex1form">
   <style scoped="scoped">
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
         { font-family: Verdana; color: #006633; font-style: italic }
      input:-moz-placeholder, textarea:-moz-placeholder
         { font-family: Verdana; color: #006633; font-style: italic }
   </style>
   <fieldset>
      <legend>Login credentials</legend>
      <label for="ex1user">Username:</label>
      <input id="ex1user" name="username" required="required" autofocus="autofocus"
         size="30" maxlength="15"
         placeholder="Your username"
      /><br/>
      <label for="ex1pass">Password:&#160;</label>
      <input id="ex1pass" name="password" required="required"
         type="password" size="30" maxlength="15"
         placeholder="Your password"
      />
   </fieldset>
   <fieldset>
      <legend>Contact information</legend>
      <label for="ex1addr">Email address:</label>
      <input id="ex1addr" name="emailaddr" required="required"
         type="email" size="60" maxlength="80"
         placeholder="Your e-mail address"
      /><br/>
      <label for="ex1site">Web address:&#160;</label>
      <input id="ex1site" name="siteurl" required="required"
         type="url" size="60" maxlength="80"
         placeholder="Your web site URL"
      />
   </fieldset>
   <label for="ex1date">Date:</label>
   <input id="ex1date" name="date" type="date"/>
   &#160;
   <label for="ex1age1">Age:</label>
   <input id="ex1age1" type="range" min="18" max="99" value="25"
      onchange="document.getElementById('ex1age2').value = this.value"
   />
   <input id="ex1age2" size="3" value="25"
      onchange="if (this.value &lt; 18) this.value = 18;
         if (this.value &gt; 99) this.value = 99;
         document.getElementById('ex1age1').value = this.value"
   />
</form>

Since the Current language field is outside the HTML form, it is associated with the form with a form attribute.

The "username" field is a type="text" input field by default.

WebKit (which is used by Chrome) ignores CSS styles which have a selector that it does not recognize, even if the other CSS selectors are valid. Therefore, the CSS style for the placeholder attributes must be duplicated for Chrome and Firefox because following CSS code does not work:

<style scoped="scoped">
   input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
   input:-moz-placeholder, textarea:-moz-placeholder
      { font-family: Verdana; color: #006633; font-style: italic }
</style>

Changes in HTML 5 - <input> Tag

What's new in HTML 5

New input types:

<input type="color" .../>
<input type="date" .../>
<input type="datetime" .../>
<input type="datetime-local" .../>
<input type="email" .../>
<input type="month" .../>
<input type="number" .../>
<input type="range" .../>
<input type="search" .../>
<input type="tel" .../>
<input type="time" .../>
<input type="url" .../>
<input type="week" .../>

A new set of attributes have been added which can be used to override various attributes on the <form> tag.

<input> attribute	overrides <form>
`formaction`	`action`
`formenctype`	`enctype`
`formmethod`	`method`
`formnovalidate`	`novalidate`
`formtarget`	`target`

In addition, the autocomplete="autocomplete", autofocus="autofocus", form, list, max, min, multiple="multiple", pattern, placeholder, required="required" and step attributes have been added.

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <input> tag because they either have been deprecated or were never officially supported:

align
ismap - use the <img> tag and its ismap attribute instead
usemap - use the <img> tag and its usemap attribute instead
valign

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the input element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <input> Tag - Form Input Fields

Wednesday, August 13, 2014