jump

HTML 5: The Markup Language (ARIA Edition)

input type=emaile-mail address input control NEW # T

The input element with a type attribute whose value is "email" represents a control for editing a list of e-mail addresses given in the element’s value.

Permitted contents #

empty (void element)

Permitted attributes #

global attributes
Any attributes permitted globally.
name = string #
The name part of the name/value pair associated with this element for the purposes of form submission.
disabled = d:string "disabled" or d:string "" #
Specifies that the element represents a disabled control.
form = ID reference NEW #
The value of the id attribute on the form with which to associate the element.
type = d:string "email" #
Specifies that its input element is a control for editing an e-mail address or list of e-mail addresses given in the element’s value.
autocomplete = d:string "on" or d:string "off" NEW #
Specifies whether the element represents an input control for which a UA is meant to store the value entered by the user (so that the UA can prefill the form later).
autofocus = d:string "autofocus" or d:string "" NEW #
Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
list = ID reference NEW #
The value of the id attribute on the datalist with which to associate the element.
maxlength = non-negative integer #
The maximum allowed value length of the element.
pattern = pattern NEW #
Specifies a regular expression against which a UA is meant to check the value of the control represented by its element.
A regular expression that must match the JavaScript Pattern production as specified in [ECMA 262].
readonly = d:string "readonly" or d:string "" #
Specifies that element represents a control whose value is not meant to be edited.
required = d:string "required" or d:string "" NEW #
Specifies that the element is a required part of form submission.
size = positive integer #
The number of options meant to be shown by the control represented by its element.
placeholder = string without line breaks NEW #
A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
Any string that contains no line feed (U+000A, “LF”) or carriage return (U+000D, “CR”) characters.
multiple = d:string "multiple" or d:string "" NEW #
Specifies that the element allows multiple values.
value = list of e-mail addresses #
A list of e-mail addresses.
A set of comma-separated strings, each of which is a valid email address.
value = e-mail address #
A single e-mail address.
Any string that matches the following [ABNF] production:
1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )

…where atext is as defined in [RFC 5322], and ldh-str is as defined in [RFC 1034].

That is, any string which matches the following regular expression:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Examples:

foo-bar.baz@example.com

Additional constraints and admonitions #

Tag omission #

The input element is a void element. An input element must have a start tag but must not have an end tag.

Permitted parent elements #

any element that can contain phrasing elements

DOM interface #

interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute unsigned long height;
           attribute boolean indeterminate;
  readonly attribute HTMLElement? list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
           attribute Date? valueAsDate;
           attribute double valueAsNumber;
           attribute unsigned long width;

  void stepUp(optional long n);
  void stepDown(optional long n);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};