safari input type number

Safari HTML Reference

• Table of Contents
• Jump To…
• Download Sample Code

Supported Input Values

Supported values for the input element are described here.

Input Type Values

Safari supports many different input types. They can be specified using the type attribute of the input element. These input types are listed below.

A button input type. More versatile than a submit button.

A standard checkbox.

An input control for specifying a RGB color value. The user can select a color from a color well.

An input control for specifying a date value. The user can select a month, day of the month, and year. Unlike datetime , date does not offer the time of day.

Available for iOS 5.0 and later.

An input control for specifying a date and time value. The user can select a month, day of the month, year, and time of day.

datetime-local

An input control for specifying a date and time value where the format depends on the locale.

A text field for specifying an email address. Brings up a keyboard optimized for email address entry for iOS.

Available for iOS.

A file upload interface.

A hidden input type (to store values without showing them on the page). Note that the input can still be seen in the page source.

An image that acts as an input.

An input control for selecting a month.

A text field for specifying a number. Brings up a number pad keyboard for iOS. Specifying an input pattern of \d* or [0-9]* is equivalent to using this type.

A visually shielded password field.

A radio button.

A slider. Its minimum value should be set with the min attribute, its maximum value should be set with max , and its discrete step size should be set with step .

Apple extension.

A reset button for a form.

A search field. Uses the onsearch , incremental , placeholder , autosave , and results attributes in addition to standard HTML attributes.

A submission button for a form.

A text field for specifying a phone number. Brings up a phone pad keyboard for iOS.

A standard text field.

An input control for specifying a time value. The user can select the hour, minute, and optionally AM or PM.

A text field for specifying a URL. Brings up a keyboard optimized for URL entry for iOS.

Copyright © 2014 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2014-07-15

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Number input type

Form field type for numbers.

• 4 - 5 : Not supported
• 6 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 13 : Supported
• 14 - 18 : Supported
• 79 - 122 : Supported
• 3.1 - 4 : Not supported
• 5 - 17.3 : Supported
• 17.4 : Supported
• TP : Supported
• 2 - 28 : Not supported
• 29 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 107 : Supported
• 108 : Supported
• 5.5 - 9 : Not supported
• 10 : Supported
• 11 : Supported

Chrome for Android

• 123 : Partial support

Safari on iOS

• 3.2 - 17.3 : Partial support
• 17.4 : Partial support

Samsung Internet

• 4 - 22 : Partial support
• 23 : Partial support
• all : Not supported

Opera Mobile

• 10 - 12.1 : Supported
• 80 : Partial support

UC Browser for Android

• 15.5 : Partial support

Android Browser

• 2.1 - 3 : Not supported
• 4 - 4.4.4 : Partial support

Firefox for Android

• 14.9 : Partial support

Baidu Browser

• 13.52 : Partial support

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

• Skip to main content
• Select language
• Skip to search

<input type="number">

Offering suggested values, pattern validation.

element is used to create interactive controls for web-based forms in order to accept data from the user." href="../input.html"> <input> elements of type "number" are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

Note : Browsers that don't support type "number" fall back to using a standard "text" input.

A Number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the value attribute, like so:

Using number inputs

<input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create an number input with the proper type value, "number" , you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

Note : It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have any security implications of any kind.

In addition, mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:

A simple number input

In its most basic form, a number input can be implemented like this:

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.

Note : Any number is an acceptable value, as long as it is a valid floating point number (i.e. not NaN or Infinity ).

Placeholders

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each element is used to create interactive controls for web-based forms in order to accept data from the user." href="../input.html"> <input> . This is where placeholders come in. A placeholder is a value that demonstrates the for the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "" . Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an "number" input with the placeholder "Multiple of 10" . Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

Controlling step size

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10:

In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.

Specifying minimum and maximum values

You can use the min and max attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:

In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.

Allowing decimal values

One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). Here's a simple example:

See that this example allows any value between 0.0 and 10.0, with decimals to two places. "9.52" is valid, but "9.521" is not, for example.

Controlling input size

element is used to create interactive controls for web-based forms in order to accept data from the user." href="../input.html"> <input> elements of type "number" don't support form sizing attributes such as size . You'll have to resort to CSS to change the size of these controls.

For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

Then we add some CSS to narrow the width of the element with the ID "number" :

The result looks like this:

You can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the ID of a element contains a set of <option> elements that represent the values available for other controls." href="../datalist.html"> <datalist> , which in turn contains one element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document." href="../option.html"> <option> element per suggested value; each option 's value is the corresponding suggested value for the number entry box.

Use of the list attribute with "number" inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.

We have alread mentioned a number of validation features of number inputs, but let's review them now:

• <input type="number"> elements automatically invalidate any entry that isn't a number (or empty, unless required is specified).
• You can use the required attribute to make an empty entry invalid, i.e. the input has to be filled in.
• You can use the step attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).
• You can use the min and max attributes to constrain valid values to lower and upper bounds.

The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:

Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.

The CSS applied to this example is as follows:

Here we use the or <form> element whose content fails to validate according to the input's attribute settings. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors." href="../../../../CSS/:invalid.html"> :invalid and  or <form> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly." href="../../../../CSS/:valid.html"> :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang." href="../span.html"> <span> element, indicating if the current value is valid. We put it on a separate <span> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <input type="date"> validation ).

Important : HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.

We've already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.

The HTML looks like this:

You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the step value to 0.01 , so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially using style="display: none;" so that meters is the default entry type.

Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:

And finally, the JavaScript:

After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.

Note that when the user clicks the button, we remove the required attribute(s) from the input(s) we are hiding, and empty the value attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches and meters to submit the form!

Specifications

Browser compatibility.

• HTML forms guide
• element is used to create interactive controls for web-based forms in order to accept data from the user." href="../input.html"> <input>
• <input type="tel">

Document Tags and Contributors

• Input Element
• element represents a clickable button."> <button>
• element contains a set of <option> elements that represent the values available for other controls."> <datalist>
• element is used to group several controls as well as labels (<label>) within a web form."> <fieldset>
• element represents a document section that contains interactive controls to submit information to a web server."> <form>
• element is used to create interactive controls for web-based forms in order to accept data from the user."> <input>
• element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <keygen> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate."> <keygen>
• element represents a caption for an item in a user interface."> <label>
• element represents a caption for the content of its parent <fieldset>."> <legend>
• element represents either a scalar value within a known range or a fractional value."> <meter>
• element creates a grouping of options within a <select> element."> <optgroup>
• element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document."> <option>
• element represents the result of a calculation or user action."> <output>
• element represents the completion progress of a task, typically displayed as a progress bar."> <progress>
• element represents a control that provides a menu of options:"> <select>
• element represents a multi-line plain-text editing control."> <textarea>
• element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL."> <a>
• element represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else."> <abbr>
• ) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. This element has been removed in HTML5. Use <abbr> element."> <acronym>
• element supplies contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document."> <address>
• ) identifies the inclusion of a Java applet."> <applet>
• element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element."> <area>
• element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry."> <article>
• element represents a section of a document with content connected tangentially to the main content of the document (often presented as a sidebar)."> <aside>
• element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream."> <audio>
• element represents a span of text stylistically different from normal text, without conveying any special importance or relevance, and that is typically rendered in boldface."> <b>
• element specifies the base URL to use for all relative URLs contained within a document. There can be only one <base> element in a document."> <base>
• ) establishes a default font size for a document. Font size then can be varied relative to the base font size using the <font> element."> <basefont>
• element (bidirectional isolation) isolates a span of text that might be formatted in a different direction from other text outside it."> <bdi>
• element (bidirectional override) is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality."> <bdo>
• <bgsound>
• ) makes the text font size one size bigger (for example, from small to medium, or from large to x-large) up to the browser's maximum font size."> <big>
• ) is a non-standard element causing the enclosed text to flash slowly."> <blink>
• Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element."> <blockquote>
• Element represents the content of an HTML document. There can be only one <body> element in a document."> <body>
• element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant."> <br>
• element with the canvas scripting API to draw graphics and animations."> <canvas>
• element represents the title of a table. Though it is always the first descendant of a <table>, its styling, using CSS, may place it elsewhere, relative to the table."> <caption>
• ) is a block-level element that can contain paragraphs and other block-level and inline elements. The entire content of this element is centered horizontally within its containing element (typically, the <body>)."> <center>
• element represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata."> <cite>
• element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font."> <code>
• element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element."> <col>
• element defines a group of columns within a table."> <colgroup>
• element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an insertion point, and wasn't meant to be used in ordinary HTML It has now been replaced by the <slot> element, which creates a point in the DOM at which a shadow DOM can be inserted."> <content>
• element links a given content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used."> <data>
• element indicates the description of a term in a description list (<dl>)."> <dd>
• element represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text."> <del>
• element is used as a disclosure widget from which the user can retrieve additional information."> <details>
• element represents the defining instance of a term."> <dfn>
• element represents a dialog box or other interactive component, such as an inspector or window."> <dialog>
• ) represents a directory, namely a collection of filenames."> <dir>
• element is the generic container for flow content and does not inherently represent anything. Use it to group elements for purposes such as styling (using the class or id attributes), marking a section of a document in a different language (using the lang attribute), and so on."> <div>
•  element represents a description list. The element encloses a list of groups of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)."> <dl>
• element identifies a term in a description list. This element can occur only as a child element of a <dl>. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element."> <dt>
• element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis."> <em>
• element represents an integration point for an external application or interactive content (in other words, a plug-in)."> <embed>
• element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element which is its immediate ancestor."> <figcaption>
• element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit."> <figure>
• ) defines the font size, color and face for its content."> <font>
• element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents."> <footer>
• is an HTML element which defines a particular area in which another HTML document can be displayed. A frame should be used within a <frameset>."> <frame>
• is an HTML element which is used to contain <frame> elements."> <frameset>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h1>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h2>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h3>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h4>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h5>
• is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."> <h6>
• element provides general information (metadata) about the document, including its title and links to its scripts and style sheets."> <head>
• element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, and so on."> <header>
• element represents a multi-level heading for a section of a document. It groups a set of <h1>–<h6> elements."> <hgroup>
• element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms."> <hr>
• element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."> <html>
• element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type."> <i>
•  element represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."> <iframe>
• element represents an image in the document."> <img>
• element represents a range of text that has been added to a document."> <ins>
• is an obsolete HTML element that puts a text field in a page for querying the document."> <isindex>
• element represents user input and produces an inline element displayed in the browser's default monospace font."> <kbd>
• element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter."> <li>
• element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This element is most used to link to style sheets."> <link>
• ) renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML 2 standard recommended that lines shouldn't be broken when not greater than 132 characters."> <listing>
• element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application."> <main>
• element is used with <area> elements to define an image map (a clickable link area)."> <map>
• element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context."> <mark>
• element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes."> <marquee>
• element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked."> <menu>
• element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button."> <menuitem>
• element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>."> <meta>
• element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes."> <nav>
• element prevents a text from breaking into a new line automatically, so it is displayed on one long line and scrolling might be necessary. This tag is not standard HTML and should not be used."> <nobr>
• is an HTML element which is used to support browsers which are not able to support <frame> elements or configured to do so."> <noframes>
• element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser."> <noscript>
• element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin."> <object>
• element represents an ordered list of items, typically rendered as a numbered list."> <ol>
• element represents a paragraph of text."> <p>
• element defines parameters for an <object> element."> <param>
• element is a container used to specify multiple <source> elements for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.)"> <picture>
• ) renders everything following the start tag as raw text, without interpreting any HTML. There is no closing tag, since everything after it is considered raw text."> <plaintext>
• element represents preformatted text. Text within this element is typically displayed in a non-proportional ("monospace") font exactly as it is laid out in the file. Whitespace inside this element is displayed as typed.'> <pre>
• element indicates that the enclosed text is a short inline quotation. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element."> <q>
• element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element."> <rp>
• element embraces pronunciation of characters presented in a ruby annotations, which are used to describe the pronunciation of East Asian characters. This element is always used inside a <ruby> element."> <rt>
• element embraces semantic annotations of characters presented in a ruby of <rb> elements used inside of <ruby> element. <rb> elements can have both pronunciation (<rt>) and semantic (<rtc>) annotations."> <rtc>
• element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters."> <ruby>
• element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate."> <s>
• element is an element intended to identify sample output from a computer program. It is usually displayed in the browser's default monotype font (such as Lucida Console)."> <samp>
• element is used to embed or reference an executable script."> <script>
• element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it."> <section>
• element—an obsolete part of the Web Components technology suite—was intended to be used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host. It is not useful in ordinary HTML."> <shadow>
• element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together."> <slot>
• element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation."> <small>
• element specifies multiple media resources for either the <picture>, the <audio> or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers."> <source>
• is an obsolete HTML element which allowed insertion of empty spaces on pages. It was devised by Netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to web pages without actually using an image. However, <spacer> no longer supported by any major browser and the same effects can now be achieved using simple CSS. "> <spacer>
• element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang."> <span>
• element (or HTML Strikethrough Element) places a strikethrough (horizontal line) over text."> <strike>
• element gives text strong importance, and is typically displayed in bold."> <strong>
• element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS."> <style>
• element defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text."> <sub>
• element is used as a summary, caption, or legend for the content of a <details> element."> <summary>
• element defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text."> <sup>
• element represents tabular data — that is, information expressed via a two-dimensional data table."> <table>
• element groups one or more <tr> elements as the body of a <table> element."> <tbody>
• element defines a cell of a table that contains data. It participates in the table model."> <td>
• element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript."> <template>
• element defines a set of rows summarizing the columns of the table."> <tfoot>
• element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes."> <th>
• element defines a set of rows defining the head of the columns of the table."> <thead>
• element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information)."> <time>
• element defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text, and any contained tags are ignored."> <title>
• element defines a row of cells in a table. Those can be a mix of <td> and <th> elements."> <tr>
• element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks."> <track>
• ) produces an inline element displayed in the browser's default monotype font. This element was intended to style text as it would display on a fixed width display, such as a teletype. It probably is more common to display fixed width type using the <code> element."> <tt>
• element renders text with an underline, a line under the baseline of its content. In HTML5, this element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelled."> <u>
• element represents an unordered list of items, typically rendered as a bulleted list."> <ul>
• element represents a variable in a mathematical expression or a programming context."> <var>
• element to embed video content in a document."> <video>
• element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location."> <wbr>
• ) renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line."> <xmp>

Everything You Ever Wanted to Know About inputmode

The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textarea element.

Unlike changing the  type  of the form,  inputmode  doesn’t change the way the browser interprets the input — it instructs the browser  which keyboard to display .

The  inputmode  attribute has a long history but has only very recently been adopted by the two major mobile browsers: Safari for iOS and Chrome for Android. Before that, it was implemented in Firefox for Android way back in 2012, and then subsequently removed several months later (though it is still available via a flag).

Almost six years later, Chrome for Android implemented the feature — and with the recent release of iOS 12.2, Safari now supports it too.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings.

But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consider it obsolete. Given that WHATWG has documented it and browsers have worked toward supporting it, we’re going to go assume WHATWG specifications are the standard.

inputmode accepts a number of values. Let’s go through them, one by one.

We’re starting here because it’s very possible we don’t want any type of keyboard on an input. Using inputmode=none will not show a keyboard at all on Chrome for Android. iOS 12.2 will still show its default alphanumeric keyboard, so specifying none could be sort of a reset for iOS in that regard. Regardless, none is intended for content that renders its own keyboard control.

This one is probably the one of the more common inputmode values out in the wild because it’s ideal for inputs that require numbers but no letters — things like PIN entry, zip codes, credit card numbers, etc. Using the numeric value with an input of type="text" may actually make more sense than setting the input to type="number" alone because, unlike a , inputmode="numeric" can be used with maxlength , minlength and pattern attributes, making it more versatile for different use cases.

I’ve often seen sites using type=tel on an input to display a numeric keyboard, and that checks out as a workaround, but isn’t semantically correct. If that bums you out, remember that inputmode supports patterns, we can add pattern="\d*" to the input for the same effect. That said, only use this if you are certain the input should only allow numeric input because Android (unlike iOS) doesn’t allow the user to change to the keyboard to use letters, which might inadvertently prevent users from submitting valid data.

Entering a telephone number using a standard alphanumeric keyboard can be a pain. For one, each number on a telephone keyboard (except 1 and 0) represents three letters (e.g. 2 represents A, B and C) which are displayed with the number. The alphanumeric keyboard does not reference those letters, so decoding a telephone number containing letters (e.g. 1-800-COLLECT ) takes more mental power.

Using inputmode set to tel will produce a standard-looking telephone keyboard, including keys for digits 0 to 9, the pound ( # ) character, and the asterisk ( * ) character. Plus, we get those alphabetic mnemonic labels (e.g. ABC).

An inputmode set to the decimal value results in a subtle change in iOS where the keyboard appears to be exactly the same as the tel value, but replaces the +*# key with a simple decimal ( . ). On the flip side, this has no effect on Android, which will simply use the numeric keyboard.

I’m sure you (and at least someone you know) has filled out a form that asks for an email address, only to make you swap keyboards to access the @ character. It’s not life-threatening or anything, but certainly not a great user experience either.

That’s where the email value comes in. It brings the @ character into the fray, as well as the dot ( . ) character.

This could also be a useful keyboard to show users who need to enter a Twitter username, given that @ is a core Twitter character for identifying users. However, the email address suggestions that iOS display above the keyboard may cause confusion.

Another use case could be if you have your own email validation script and don’t want to use the browsers built-in email validation.

The url value provides a handy shortcut for users to append TLDs (e.g. .com or .co.uk ) with a single key, as well keys typically used in web addresses, like the dot ( . ) and forward slash ( / ) characters. The exact TLD displayed on the keyboard is tied to the user’s locale.

This could also be a useful keyboard to show users if your input accepts domain names (e.g. css-tricks.com ) as well as full URIs (e.g. https://css-tricks.com ). Use type="url" instead if your input requires validating the input.

This displays a blue Go key on iOS and a green Enter key on Android, both in place of where Return . As you may have guessed by the value’s name, search is useful for search forms, providing that submission key to make a query.

If you’d like to show Search instead of Enter on iOS and a magnifying glass icon on Android in place of the green arrow, use type=search instead.

Other things you oughta know

• Chromium-based browsers on Android — such as Microsoft Edge, Brave and Opera — share the same inputmode behavior as Chrome.
• I haven’t included details of keyboards on iPad for the sake of brevity. It’s mostly the same as iPhone but includes more keys. Same is true for Android tablets, save for third-party keyboards, which might be another topic worth covering.
• The original proposed spec had the values kana and katakana for Japanese input but they were never implemented by any browser and have since been removed from the spec.
• latin-name was also one of the values of the original spec and has since been removed. Interestingly, if it’s used now on Safari for iOS, it will display the user’s name as a suggestion above the keyboard.

Oh, you want to see how all of these input modes work for yourself? Here’s a demo you can use on a device with a touchscreen keyboard to see the differences.

• WHATWG specification
• MDN documentation
• Chrome Platform Status ( Chromium Ticket #244688 )

Thanks! This is great info and a thorough description. Awesome knowledge. (I didn’t see this above, but maybe I missed it) – Looking at the demo you provided, I’ll add that I noticed these also have an effect on the keyboards’ long-press shortcuts, like when you hold down . – whether it displays a list of .com , .net etc., or if doing so brings up a shortcut of grammatical symbols, etc. Thanks again. Great article and reference.

Is there a trick to tell the keyboard to use only lower case? For example on both url and email inputs above, if I just start entering the information, the inputs look like the following:

[email protected] http://example.com

It’s not a big deal to hit shift, but I’d like to remove that step for the user.

Hi Jared. Yes- you can use autocapitalize=off for that.

Just a heads up, the email field doesn’t show the decimal sign, it’s just the dot. In other languages where the decimal sign is the comma “,” the dot still appear as it’s used to fill in emails ;)

Thanks for pointing that out Rafael! We’ve amended the article.

Great post!

Do you know how to enable “though it is still available via a flag” ?

You only need to enable inputmode via a flag on Firefox for Android. To do this enter about:config in the URL bar to see the advanced settings there. Search form ‘inputmode’ then toggle on the dom.forms.inputmode option and then Firefox for Android will support inputmode just like Chrome for Android does!

Something interesting to note in your example for input[inputmode="numeric"] : Dutch PIN codes are actually alphanumeric (I live in 7543AC ) so perhaps we should stick to plain input[type="text"] for those.

Same goes for some ZIP codes in the EU. You just need to know your market and adjust.

Hi Anand Chowdhary – thanks for the feedback. When I mentioned that inputmode="numeric" is good for PINs, I meant PIN as in Personal Identification Number – like a 4 digit passcode to login to a system for example. I didn’t mean it was suitable for post codes.

Nice article man. Thanks for sharing

what about date and time?

Hi Steve – There are input types for date and time (you can test ’em at: https://inputtypes.com/ ), but there aren’t custom keyboards for those via inputmode.

Safari in iOS 13 Supports „none“. The keyboard disappears

ah yes, just noticed this on my iPad with iPadOS 13 Beta. thanks for sharing!

Your example has the inputmode=verbatim but it is not mentioned in the definitions above. What is it for?

ah well spotted. inputmode=verbatim was previously in the spec but has since been removed – so I removed it from https://inputmodes.com/ now too.

iOS 15 Browser does not always show the dot in decimal inputs but it depends on the user interface locale! Even setting lang="en-us" on the input or root element does not provide us a dot on German phones :-( And yes, no negative numbers as we have no minus key…

Ctrl . blog

Browser support for <input type="number"> with different decimal marks

• Daniel Aleksandersen
• Updated: 2019-01-12
• Published: 2015-02-02
• 9-minute read

An <input type="number"> element will open a numeric software keyboard on modern mobile operating systems. Not every user can input decimal numbers into the numeric input field without proper localization. Over half of the world uses a comma and the other half uses a period as their decimal mark. (In Latin scripts.) Does your web application take that into consideration? and do web browsers?

Touch-based software keyboards, or “soft keyboards”, can adapt to the input type that’s requested from the user. If an email address is requested for a login, the soft keyboard can be made to include an at sign.

For numeric input, the keyboard can include larger numbers like on a dial-pad, a decimal mark, and a minus sign. These adaptive soft keyboards are a big convenience to users as they don’t have to manually change the views of their already-hard-to-use keyboard.

The problem with these soft keyboards — and even with regular analog keyboards — is the decimal mark . Roughly half the world uses a comma as their decimal mark, and the other (mainly former colonies of the British Empire) uses a period instead. [1] In computing, decimal marks are usually presented in a way following the locale of the system. However, the stored value in memory is always represented with a period.

Inputting an invalid value into a <input type="number"> will, as per the specification, set the value to an empty string . The value presented to the user will still be whatever they typed, but the form will not submit any data. This is a big usability as well as a functional problem for web applications.

What does the HTML Standard say?

The value of an <input type="number"> must always be either a valid integer (number) or a valid decimal number. The specification defines the decimal separator as a period regardless of the locale. [2] However, the value the user inputs or the value that’s displayed to the user doesn’t need to meet this technical requirement. The specification doesn’t define how exactly this should be handled, but suggests the following:

“Browsers are encouraged to use user interfaces that present […] numbers according to the conventions of either the locale implied by the input element’s language or the user’s preferred locale. Using the page’s locale will ensure consistency with page-provided data.” [3]

Additionally, all browsers except Internet Explorer will strip any whitespace characters and thousand separators (space, comma, or period depending on locale  —  see below ) from the value.

Following this logic we can make a test [4] and get the following web browser support comparison chart:

Browser support

UI language refers to the user interface language of the browser or operating system as set by the user. Element language refers to the language of the form widget ( <input type="number" lang=" en-150 " > ) or page ( <html lang="en-150" > ) as set by the page author. In the table, European English represents the comma-locales and English represent the period-locales.

See historic data from the above table in the Internet Archive , including older browser versions and their behavior.

I haven’t investigated support for Arabic or other non-Latin scripts’ decimal marks. I would expect the results to be similar or worse.

Notes on browser support

Those familiar with the browser landscape might recognize that Google led projects — Blink/Chromium (used by Chrome, Opera, Yandex, Vivaldi, and others) and Android — have the most problems. There’s an ongoing discussion that holds promises for their implementations to be fixed. Even if that discussion is quick to bear fruits, end-users will still encounter problems on older systems that don’t necessarily receive updates.

Apple’s implementation in Safari and iOS is noteworthy. Instead of relying on hints from the locale or page author, the browser allows for the interchangeable use of commas and periods in all locales.

Internet Explorer doesn’t support number inputs, as defined in the HTML5 recommendation. It does support bringing up numeric software keyboard if the input element sets its type to number. This is kind of okay, as user-provided input can be validated and corrected with JavaScript or server-side.

Recommendation for web authors

Set the form language explicit as an attribute of the input or form elements. For example, <input type="number" lang="en-150" > . Webpages don’t always set the language on their root element. For form input, this matters and setting it on the input or form element will help your users complete the task of filling in numbers.

I’m almost tempted to recommend you always set the input language of all <input type="number"> to a locale that uses commas to get both period and comma support. This could cause issues in the future if browsers decide to stop supporting periods when commas are expected. As of today, however, this isn’t the case but could change.

The value of an <input type="number"> is always — except in Internet Explorer — set to a valid decimal number. There’s no way to read the raw value as the user input it . When an invalid value is provided, the display value is left as the user provided it. However, the value is cleared and set to an empty string. This is the expected behavior!

Some browsers will validate the input and confusingly show a red border around the input. Thus prompting the user to correct the input. This can be somewhat unclear to the user. Using JavaScript, the input element’s valid property from ValidityState can be tested.

This can be used to display a custom error message, shake animation, or otherwise prompt the user to correct the information. Another way with more reliable support is to read the input element’s input event .

Process the event by checking that the input element’s value isn’t an empty string and is a valid decimal number (for Internet Explorer and legacy browsers), and then prompt the user to provide valid input. Using the input event is highly encouraged over other events like the key , paste , or change events as it support clipboard, keyboard, handwriting, IME , and other forms of input. Consider using the widely supported blur event as a fallback for legacy browsers, even though it’s less reliable than the input event.

It is hard to instruct the user on what input is expected as you can’t test whether the form will be localized or not! Every browser supports input with a period as the decimal separator, so this can safely be used. To reduce the chance of errors, you could consider setting the input element’s placeholder attribute to a valid floating-point number even when this doesn’t match the user’s locale.

Having a fallback parsing in JavaScript is recommended as older browsers don’t support numeric input types. Take care to ensure that any server validation is identical to the client-side validation done by the browser (with type="number" ) and in JavaScript.

Recommendation to implementors (browsers)

Please support both the period and comma interchangeably as the decimal mark regardless of any locale hinting. Apple has got the right idea here!

When it comes to thousand separators [5] , it’s simply a matter of stripping out every decimal mark symbol (whether it be a period or a comma) except the last one. The International System of Units ( SI ) recommends using a space to group digits to reduce format confusion. After reading this article, I hope you agree.

Web browsershow-to-macos-login-keyboard-layout.html can improve the experience by auto-convert inputs to use space as the thousand separator and comma as the decimal separator. Prompt the user if it’s unclear what they meant.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input type="number" is not working on Safari (Safari 15.1) #6259

michalgmazurek commented Jul 12, 2022

posva commented Jul 12, 2022

Sorry, something went wrong.

No branches or pull requests