HTML5 input type=number and the placeholder attribute

Question

Is there any way to use placeholder on <input type=number>?

Destefano

Answer 1

I've just checked against the HTML5 spec for input where a type is number and it explicitly says that the placeholder attribute may not be used. I also had errors with http://validator.w3.org when I tried to validate html with an input type of number with a placeholder attribute. Looks like browsers may support this but it's not valid in the HTML5 spec.

Starobin

Don't think this statement is valid anymore, the newest draft has added it. dev.w3.org/html5/spec/Overview.html#attr-input-placeholder (scroll up a bit for the yellow spotted table) – Prescriptive

Answer 2

@zachleat is correct, the placeholder attribute is allowed in the latest HTML5 spec:

HTML 5.1 2nd Edition: forms, number-state-typenumber (see the bookkeeping section)

The following common input element content attributes apply to the element: autocomplete, list, max, min, placeholder, readonly, required, and step content attributes;

Cayman

Answer 3

Here is the Placeholders section in the MDN Web Docs about <input type="number">: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#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 <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.

Glossolalia

Answer 4

Using Placeholder: <input type="number" placeholder="10">

Using Min and Max Values: <input type="number" placeholder="10">

Using Value: <input type="number" value="10">

Kall