I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
I was working on a very simple feature:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
Firefox ... not so much. It acts as if I had a "text" type.
Is that a known issue? Workaround?
Thanks
The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed.
The <input type="tel"> defines a field for entering a telephone number. Note: Browsers that do not support "tel" fall back to being a standard "text" input. Tip: Always add the <label> tag for best accessibility practices!
range: This input type allows the user to enter a numerical value within a specified range. search: This input type allows the user to enter a search string within the input field. tel: This input type allows the user to enter a telephone number. url: This input type allows the user to enter the URL.
You can use the <input> tag with attribute type='number'. This input field allows only numerical values. You can also specify the minimum value and maximum value that should be accepted by this field.
First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
This page has details on HTML5 forms and the current bugs https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With