Per the HTM5 specification,
The input element with a type attribute whose value is “tel” represents a one-line plain-text edit control for entering a telephone number.
The DOM interface for the input element is:
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 unrestricted 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);
};
The tel is one of the available types, shown highlighted above.
Here are some details about an input element with tel input type.
- An input element with tel input type can be disabled.
- Autocomplete is supported
- A tel input element supports autofocus
- A tel input element can be read-only
- A tel input element can be specified as required as part of a form submission.
- “LF” (U+000A) or “CR” (U+000D) characters cannot be entered as the tel input element’s value.
- A tel input element does not enforce a particular syntax. However if there is a need to constrain to a particular format, it can be handled using the pattern attribute on the element.
- An input element with tel type does not support the following content attributes: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, max, min, multiple, src, step, and width.
- An input element with tel type does not support the following attributes and methods : checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.
Hands on
Let us explore how a simple HTML5 page using the tel type on an input element looks like.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Tel demo</h1>
<p>Demo showing tel type on input element</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
Enter phone number
<input type=”tel“ pattern=”\(\d\d\d\) ?\d\d\d-\d\d\d\d” title=”(###) ###-####” />
</body>
</html>
The page is rendered as seen in the example below:
We can see that the input element looks like any regular control. Based on the pattern attribute, we can restrict input to certain types.
Summary
In this article, we learned about the new tel type in the input element. I hope you have found this useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
