Firefox seems to submit input fields of type number as decimals independant of its visible value (e.g.: visible value: 1, real value/posted data: 1.0).
My backend cannot handle it as it expects an integer.
But I still want to use the number type as it handles the keyboard layout on mobile devices.
I already tried to set the step attribute to 1 (which is default anyway).
Sorry, but you are stuck with this way of formatting number fields if you want to keep using that type of control.
What you can do is create a hidden input that is updated when the number input field changes. You can format the value you put in there the way you like to.
So in short, the best thing is to get your backend straight, but that might be out of your hands. Else you can use the workaround provided.
Well actually it’s not a bug; the form field is behaving as defined by the W3C.
Numeric input fields can take additional attributes “min” and “step”, which constrain the range of values allowed in your input.
This is because the default step is 1. So far, so obvious.
However, the step attribute also determines which values are valid, so a step of 1 means you can enter 1, 2, 3 etc. and a step of 2 means you can enter 2, 4, 6 etc, and when you click the up/down buttons the number will increase/decrease by 2 each time, but entering 3 or 5 in the box will cause a validation error. You can also use a decimal value: for example, a step of 0.3 will allow values such as 0.3, 0.6, 0.9 etc, but not 1 or 2.
I was completely wrong. I filled the input from my backend and it was a double value. When using the type integer it only submits "1".
We have UI widget that is a composite of input field and an icon. This widget is basically meant to be used as a form field to let users select a value from a huge list of values. Users can either type a value in the input field or click on the icon to launch a dialog with all the possible value list. Selecting a value in this dialog will set the value in the input field. Users can also type a partial value in the input field and tab-out in which case, the widget tries to autocomplete the value entered and if it doesn't succeed, it will launch the same dialog as user clicking on the icon.
How would I make such a widget accessible through screen readers? There doesn't seem any role or any other aria attribute which seems to be tailor made for my usecase. At the minimum, I would expect the users using screen readers to know that this widget has an helper icon from where a value can be selected.
I am reading this as an order database/form, where call takers can just select type in the customer number or fill out the 10+ fields. And if the caller doesn't know their ID or whatever, the call taker can do a search.
I recommend removing the autocomplete on tab functionality, because that wouldn't too fun for some. I'd code it like:
<p id="instr">Put instructions here</p>
<label for="user">Look Up User</label> <input id="user" aria-describedby="instr">
<input type="button" value="Populate Form">
<input type="button" value="Search">
I made an answer about modals quite some time ago, that should get you started. The listing in the dialog may not be the most fun to wade through. I'd recommend either updating this question or making a new one for that part.
Interesting and challenging.
To start with make sure icon has an alt text which explains its role - this is assuming it is an image. If not use title attribute to explain its role.
Add a title attribute to the input box and succinctly mention that user can also chose values using icon or partially type its value to autocomplete it.
If your form design allows instructions to be placed next to the form fields place a descriptive text right next to the widget.
These recommendations may not make it entirely accessible but will surelytake you close to where you want to be. I'm hoping that this widget will be used in more than one place in your project allowing user to get accustomed to it.
Last one to consider is to see if any aria role fits your widget controls in any way.
I am trying to allow only certain data to be inserted into an html form field...
i currently have
pattern="[A-za-z]{2}[0-9]{6}"
which works great for a reference number starting with RQ and then 6 numbers.
how can i add another pattern to allow 3 letters with 8 numbers after that?
for example INM12345678
so that users can only use RQ123456 or INM12345678
try this:
/(RQ\d{6}|INM\d{8})/
here is the demo see here
If you want to limit valid data as said in comment:
^RQ[0-9]{6}|INM[0-9]{8}$
I have two fields in my form : one is the limit and other is value. So if I enter 30 in the limit field, then in my value field I need to open up something similar to a date picker, which shows all numbers from 1-30 and user should be allowed to pick one or multiple values.
Is there a js library that I can use to achieve this?
Ive built it for you
http://jsbin.com/ehuke4/37/edit
How about using a slider? In HTML 5 you can use the below code. For browsers that do not support it you'll want to use some sort of alternative.
<input type="range" min="1" max="30">
jQuery UI has a nice slider too.
One of the many quirks of Reporting Services we've run across is the complete and utter lack of a CheckBox control or even something remotely similar.
We have a form that should appear automatically filled out based on information pulled from a database. We have several bit datatype fields. Printing out "True" or "False" just looks silly, as this is supposed to look like a form that has been auto-filled out, so we want to have a series of checkboxes and labels that are either checked or unchecked.
We are running SSRS 2005 but I'm not aware of SSRS 2008 having added a CheckBox control. Even if it did, we'd need to have an alternative for the time being. The best we've found so far is:
use Wingdings
use images
use text boxes with borders and print a blank/space or a capital X
All three approaches require IIF expression shenanigans.
The Wingdings approach seemed to work acceptably, and was the most aesthetically pleasing except that for whatever reason it didn't always print correctly. More importantly, PDF exports, also for whatever reason, converted all fonts (generally) to Arial and so we got funky letters instead of the Windings dingbats.
Images, being a pixel-based raster, don't do so well when printed along side vector stuff like text. Unless handled carefully, they tend to stretch, pixelate, and do other unprofessional looking things.
While these methods do work (some with limitations as mentioned above) none of them are particularly elegant.
Are we missing something obvious? Not so obvious? Does someone at Microsoft have a good reason why such a control was not provided in SSRS 2000, let alone 2 versions and 8 years later? This can't be the first time this issue has come up...
I, along with others in my shop, have used images, toggling the hidden attribute based on the field value (true or false). We haven't had any problems with blurring or scaling, unless we tried to increase the scale of the image beyond 100% obviously.
Another option I've used is similar to the wingdings idea, but I just use a plain old "X". On our forms at least, it is not uncommon for someone to use an X in a box instead of a check mark, so it looks completely acceptable. Plus, you don't have to worry about strange characters when printing.
As for why Microsoft does not include a checkbox control, I can't answer that as I've been wondering the same thing myself for a long time now.
I just wanna share the idea on this blog. SSRS: How to Display Checkbox on Report
First create a textbox
Then change the font family to Wingdings
Insert an expression on the textbox and write this expressions.
=IIF(Fields!Active.Value,chr(254),"o")
Fields!Active.Value could be anything from your query that should return a boolean value 1 or 0.
Then click Preview and see the checkbox ;)
More styles can be selected on the blog that I shared above.
Here is an example of my output
What I have used to display a check box (or ballot box):
1- create textbox (that will become your check box)
2- change font to Arial Unicode MS
3- in the expression window use:
ChrW(&H2611) for a filled-in checkbox
ChrW(&H2610) for an empty checkbox
Besides the different methods already presented, as of SQL Server 2008 R2 there's a built-in control that can be used for checkbox-alike functionality: the Indicator!
Have a look here for details on how to use it: https://web.archive.org/web/20190916105459/http://blog.hoegaerden.be/2012/08/04/displaying-checkboxes-in-an-ssrs-report/
To be able to use a field of type bit, you'll have to cast it to int first. This can be done either in the dataset query or by adding a calculated field to the dataset.
If you want the NULLs to come up as yellow, then you'll need to build the expression that way so it takes that requirement into account as well.
Here's a possible expression for a calculated field:
=Switch(
IsNothing(Fields!YourBoolean.Value), 50,
Fields!YourBoolean.Value = False, 0,
Fields!YourBoolean.Value = True, 100)
Depending on the meaning of your fields - is False good or bad - you may need to swap the zero and 100.
Another way to do thisd is go to "Placeholder properties" of TextBox and check Html - Interpret HTML tag as styles
Then in the Value - Expression put this line of code for checked:
="<font face=""Wingdings 2"" color=""green"">" & Chr(81) &"</font>" & "some other text"
Or this code sample for unchecked:
="<font face=""Wingdings 2"" color=""red"">" & Chr(163) &"</font>" & "some other text"
This way you can have checkbox and text in the same textbox.
Later edit:
If you are having problem displaying Wingdings 2 on Azure, then use Wingdings.
Apparently it works.
="<font face=""Wingdings"" color=""green"">" & Chr(253) &"</font>" & "some other text"
Or this code sample for unchecked:
="<font face=""Wingdings"" color=""red"">" & Chr(168) &"</font>" & "some other text"
You can also use a string calculated field like "[X]" or "[ ]". It's less pretty than the textbox with border but you don't have to put a specific control for the value and you can fill table or matrix with this.
At least there is some solution for the checkbox. I'm still looking for full justification for my text (In fact I'm looking for another solution than SSRS know).
ACCESS 97 could make this kind of thing but not SQL SERVER 2012.
I think there is a bug with SSRS and embedding font characters above 128 (some thing todo with ANSI encoding). Basically you can use 1-128 fine, the rest show up as tall rectangular blocks.
I like NY's idea of the textbox with a border and an optional X - this sounds simple and effective.
This is building on Dragos Durlut's answer. I don't have a high enough reputation to comment but I can answer...
I needed a checkbox as part of text that is passed as a parameter. The parameter contains HTML and is used in a placeholder set up just like Dragos suggests: HTML - Interpret HTML tags as styles.
Instead of having to switch between the HTML and the strings, you can use the HTML Escape Codes (& + # + CharCode + ; --> ¨)
="<font face='Wingdings'>¨</font> Empty checkbox"
Since mine is a parameter, it just pass in the string:
<font face='Wingdings'>¨</font> Empty checkbox
If you need the checkbox selected, you would pass in either ý or þ instead:
<font face='Wingdings'>ý</font> filled with an x
<font face='Wingdings'>þ</font> filled with a checkmark