I mean may I send large values (50-100 letters) from html radio input ?
Ex :
<input type="radio" name="radio1" value="i am sending more letters from here..." />
There are no limits, you should be able to send as much as you want, it's just another form value like a textarea, etc.
Related
I have a validation function tied to a form's onsubmit event. When it runs, my <input> objects return empty strings in the value attribute even though I have typed in some text.
For example, the mark up is:
<input type="email" id="email" name="email" required>
the following:
document.getElementById("email").value
returns an empty string "" even if there is some value entered in the form.
I hope the screen shot below captures the situation:
I must be missing something very basic. What could it be?
There is more than one <FORM> in the page (but only one is visible at any one time), and there are more than one instances of <input id="email">. The wrong element with id email was being selected.
Hope this answer might be of use to somebody else too.
I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
if you are already adding an HTML label to the input, you don't need to use ARIA attributes at all. You can safely remove the aria-describedby, and nest the span content. Example:
<label for="givenName">Given name
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
</label>
<input class="form-control" type="text" id="givenName" placeholder="Liam">
Hope it helps!
As a general rule..First try to make accessible content with standard HTML. Then, use ARIA to describe website sections, widgets and interactive behavior (like menues, tabs, pop ups, messages, dropdowns, calendars, etc), and also to describe what you could not do with HTML.
I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
Yes, this is perfectly legitimate and will work with all screen readers
I have an input field for users to input a monetary amount:
<input type="number" value="{{ order.amount }}" />
I chose the number input type because I want the number keyboard to appear when the field is clicked. I can't use type="text" pattern="[0-9]*" (suggested here) because that causes the number-only input pad to appear which doesn't have a decimal point.
Unfortunately, if the value attribute is anything but numeric (including an empty string or space), the field renders with a default value of "0":
This stinks because the user needs to hit ⌫ before entering a value.
Is there any way to fix this?
Update: I'm an idiot. Some JavaScript was validating and reformatting the field. Nevermind.
I would look at the code you are using to set the value attribute of this field (value="{{ order.amount }}"). The reason I say this is that in Mobile Safari a "vanilla" numeric field is empty, i.e. no 0 by default.
Your screenshot suggests to me that you're using jQuery Mobile, so I checked using that in case the issue lay there, but again, no default value of zero.
For what it's worth, this is the mark-up I'm using (which renders an empty number field in iOS emulators and on an iPhone 3GS):
<input type="number" value="" />
I'd like my form to include a certain value if the quantity is equal to 1 (via a text box).
I've managed to show what the total cost is using JavaScript and I could submit it with this value but I'm worried that when JavaScript is turned off the user will be able to submit the form without the extra fee being added. Therefor escaping the fee.
<form>
<label>Qunatity</label>
<input type="text" name="qyt" />
<input type="text" name="fee" value="250" />
<div class="total">[whatever the total is]</div>
<input type="submit" value="submit" />
</form>
Is there a way I can submit this form so that it submits 250 only if a quantity of 1 is added to the form? I'd like to avoid using a select input.
Will I need to split my form out into two stages to achieve this?
You need to check your logic in server-side code.
Most people have Javascript enabled, so you should do it in Javascript to provide a better experience, but you must always reproduce the logic on the server.
If you need to validate your input without JavaScript, have a server-side component (PHP?) to do the job and return the same form with an error message if no quantity was given. That way you don't have to split your form into two steps.
The best/safest way to handle this would be to do your total calculation on the server side. That way the data you store will always be correct.