html5 min max,HTML5 Forms

淩亂°似流年 2022-10-11 13:39 159阅读 0赞

Live Demo

The Low Down

![661afdbd3edc3a2312b53ca2d2031c74.png][]

Firefox

16+

![9f2c958084d4db5a4968e772b2c961d5.png][]![021ef095872b75da9c16097fef915850.png][]

Safari

![9f2c958084d4db5a4968e772b2c961d5.png][]![d8fd9b8734efd202dc665daaeceab0a5.png][]

Safari Mobile

3.2+

![9f2c958084d4db5a4968e772b2c961d5.png][]![732c520d16c0a207ab4c52d549cf2b7a.png][]

Chrome

![9f2c958084d4db5a4968e772b2c961d5.png][]![b57f6284598227da9f9a7ddb39f54136.png][]

Opera

10.6+

![9f2c958084d4db5a4968e772b2c961d5.png][]![3d7e9555f826dbd79467721504f46999.png][]

10+

![9f2c958084d4db5a4968e772b2c961d5.png][]![eddd81cc3db238d58ce57febfff6253d.png][]

Android

4.0+

![9f2c958084d4db5a4968e772b2c961d5.png][]

To use the min, max, and step attributes the input first needs a type of number, range or one of the date/time values. In the case of type=”number”, small arrow widgets are applied after the input which increment the current value of the input up or down. In the case of type=”range”, the possible values of the slider GUI presented in supporting browsers will range from the min to the max value, incrementing by the value of the step attribute.

You don’t need to use all three. Each works independently with default values being set for step if the attribute is not explicitly included.

If step is not explicitly included, the value of step defaults to 1, as if it were included with step=”1″ (or step=”60″ in the case of type=”time”), even if the default value or min value is a float.

To allow any float value, include the value of any on the step attribute, with step=”any”.

min and max imply validation of that value.

When max and step are set, Chrome may display a narrower input box for number input type, as the length of the largest valid value is limited.

The Up/Down GUI spinner widget takes space from total width of input (Chrome 10 tested).

If no value is set, the default value of range is half way between the min and max values. Number will generally default to 0 when the GUI is first interacted with if no value is set.

While IE10 and IE11, Android and iOS don’t support the GUI of the Number input type, they do support min, max, and step in terms of validation constraints.

[661afdbd3edc3a2312b53ca2d2031c74.png]: /images/20221005/56b7ead9e72b44c2bbd23f2d2a9a9ee2.png
[9f2c958084d4db5a4968e772b2c961d5.png]: /images/20221005/3cbf2f21312d458da840191187b46c77.png
[021ef095872b75da9c16097fef915850.png]: /images/20221005/e77cc59382ce4d138d8943d1f264e138.png
[d8fd9b8734efd202dc665daaeceab0a5.png]: /images/20221005/63de67fc59c7401791300cdf511c1133.png
[732c520d16c0a207ab4c52d549cf2b7a.png]: /images/20221005/15a0b940b20d4e3a80a35f1b79de0773.png
[b57f6284598227da9f9a7ddb39f54136.png]: /images/20221005/3a042a0e121e4236adb78af2c01019ca.png
[3d7e9555f826dbd79467721504f46999.png]: /images/20221005/e2c5dc404a3041ad9c496dd4c4402a43.png
[eddd81cc3db238d58ce57febfff6253d.png]: /images/20221005/c2a8f9ad997e451ca29ae5cae1cbfe8c.png