If I'm using a dropdown using <select> is it ok. I'm asking in terms of Web Accessibility, Web Standards.
<form action="#" class="country-selection">
<select>
<option title="images/india.jpg">India</option>
<option title="images/india.jpg">USA</option>
</select>
</form>
Yes, because the page should work without client-side scripting too. The proper way is to include a real action attribute value, referring to a server-side script, and include a submit button, because that is the only way to ensure submittability when scripting is off. You can wrap it inside a noscript element so that it does not appear when it is not needed, i.e. when client-side scripting is enabled:
<noscript><input type=button value=Change></noscript>
The title attribute values may be displayed or otherwise presented to the user, so they should either contain something sensible (not URLs) or be absent. If you need to include some data for client-side processing, use data- attributes.
No, that is specifically called out as a failure in WCAG 2.0: F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the status of a radio button, check box or select list is changed.
If you don't have any submit button it is acceptable after all it is an element of form tag and if it is not required you may not add it with in form. This will not broke any web standard.
Sure it's ok, noone is forcing a submit button on you, but you probably won't need an action on the form either.
If you want to submit the form when the user makes a selection, try this
<form action="#" class="country-selection">
<select onChange="javascript:submit()">
<option title="images/india.jpg">India</option>
<option title="images/india.jpg">USA</option>
</select>
</form>
Related
I have a form with few fields, validated only in html.
I want to avoid users to click multiple times on the submit button.
Just want to block the button after submitting, so its blocked from second time.
Please let me know if i can achieve this just using HTML and CSS.
As others have said, this is not possible without JavaScript.
The most minimalist JavaScript scenario I could see to disable the button would be an inline onclick attribute on the button.
e.g:
<input type="submit" onclick="this.disabled = true;" value="Click Me">
This is not possible.
If you want to avoid client-side JS then, with server-side code, you could generate a unique identifier in a hidden input that you can use to check for duplicate submissions on the server.
How do I force md-select in multiple mode to behave just like
<select multiple required ... >
?
Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag.
I want md-select to behave similarly, but I don't know how can I do that - neither putting 'required' attribute nor adding 'ng-require' directive helps.
You can rely on Angular to do the validation for this, rather than the browser. Here's my forked example:
http://codepen.io/anon/pen/rVGLZV
Specifically:
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
To keep the submit button disabled until the form is valid and,
<form novalidate name="myForm">
To name the form and tell the browser not to do its own validation on it.
You could even add some CSS class for ng-invalid to show red around the invalid fields.
EDIT: Make sure you put an ng-model on your <select multiple>, otherwise the required attribute won't work.
If you don't want to disable submit button but instead trigger error when submit button is hit, you can set the $touched property to true to trigger required alert
yourFormName.mdseletName.$touched=true;
I'm using Firefox plugin to validate html errors on the page. It displays a warning:
An HTML tag has a mandatory attribute, but this attribute is missing.
Example:
not good: <form>
good: <form action="my_action.jsp">
Actually I put the <form></form> tags to give a name to use it as a parameter for javascript function.
The code looks like:
<form name="items">
<select name="selectitem" onchange="displayfunc(this.form)">
<option value="1">one</option>
...
<option value="8">eight</option>
</select>
</form>
Everything works fine, but that warning.. Should I fix it? If yes, then how?
BTW, FF displays "<form> lacks "action" attribute" warning on the stackoverflow page as well. I've found a similar thread required attribute “action” not specified, but I'm still not sure what to do if there is no action="" for the form.
If you don't want users to be able to submit the form, then you shouldn't be using the form element. Use something like <div id="items"></div> instead to contain your input items.
BTW, just because another website does something that violates standards doesn't mean you should. :)
Since you will not submit your form, you can set action to pretty much everything you want to.
<form action="#"> is the shortest option.
I've writen some code here: http://jsfiddle.net/anhtran/kXsj9/8/
Users have to select at least 1 option on the group. But it makes me must click all of them to submit the form. How to do this issue without javascript?
Thanks for any help :)
I think this html5 attribute is only supposed to define which fields are required.
You cant put logic in to say "at least one is required".
You will need to add custom javascript for this to work (and/or have validation on the server side).
hope this helps...
The ideal answer would be to use HTML5 and the required attribute as part of a select element, like so:
<form method="post" action="processForm.php">
<label for="myLanguages">What languages can you program in?</label>
<br>
<select id="myLanguages" multiple required>
<option value="C#">C#
<option value="Java">Java
<option value="PHP">PHP
<option value="Perl">Perl
<option value="Haskell">Haskell
</select>
<br>
<input type="submit" value="Submit">
</form>
Yes, I know they are not checkboxes, but the end functionality is exactly what you want. Sadly, neither IE 9 nor Safari 5 currently have support for the required attribute. Chrome 13 and FF 5, however, do. (Tested on Win 7)
I thought it'd be possible, to do in part, what you were after using CSS. Not using the required attribute but to instead hide the submit button if nothing was selected.
You'd get rid of the required attributes and use CSS similar to this:
input[type=submit] {
display:none;
}
input[type=checkbox]:checked ~ input[type=submit] {
display:block;
}
However, that particular CSS is not working on my version of Google Chrome. I've made a question regarding it here. It seems to be working fine on my FF 3.6 though.
You can't do this without javascript.
What you can do is select a default option and set it as selected.
But it can't assure you that a checkbox is selected when the form is submitted.
Hi the question is pretty simple.
<select name="justanumber">
<option value="1" selected="selected">1</option>
<option value="2"></option>
</select>
when selected value is changed i have to do a form post.
But the problem is to do this WITHOUT javascript.
I'm not sure is it possible to do that, the best result i have archived is submit form using label for.
No, that is not possible without using client script.
I suggest that you use script for how you want it to work normally, and supply a submit button as a backup for those who can't use script.
No, there is no auto-submit attribute for such things -- however, there is a way around it:
CSS:
#jsOn .Submit {
display: none;
}
HTML:
<form id="my_form" action="">
<select id="justanumber" name="justanumber">
<option value="1" selected="selected">1</option>
<option value="2"></option>
</select>
<input type="submit" value="Go!" class="Submit" />
</form>
JavaScript:
var visible_root = document.getElementsByTagName("body");
while (visible_root.length < 1) {
continue;
}
visible_root = visible_root[0];
visible_root.id = "jsOn";
document.getElementById("justanumber").onchange = function() {
document.getElementById("my_form").submit();
};
When people without JavaScript arrive at your site they will see a submit button. When people with JavaScript turned on arrive at your site the submit button will be hidden and an onchange event will be added to the select element. (Alternately you could add an event listener, if you have a JavaScript library that normalizes all of the events for you.)
I don't believe this is possible without js. An obvious approach would be to set a submit button as the option's value (eg, <option><input type="submit"></option>). Unfortunately browsers will bark and moan, appending the input element after the select element. If the select determines the app flow, consider using another another UI element (eg, buttons, links, etc.).
Here is the answer.
Unfortunately, It's not possible.
<form action="aaa.php" method="post" name="autosubmit_select">
<select name="justanumber" onChange="document.autosubmit_select.submit();">
<option value="1" selected="selected">1</option>
<option value="2"></option>
</select>
</form>
agreed you must use javascript for this
please see this post How to submit form on change of dropdown list?
if your worried about users not having javascript enabled then i would suggest along with the given example in the post in the link you do this
<noscript>This form requires that you have javascript enabled to work properly please enable javascript in your browser.</noscript>
or something along those lines
other than that it is not possible to do this (currently) without the use of javascript
use a submit_button to submit while JS not enabled.
If JS enabled hide the button using JavaScript. Amazon did so.!
http://www.amazon.in/s/ref=nb_sb_ss_i_1_5?url=search-alias%3Delectronics&field-keywords=sd+card&sprefix=sd+ca%2Celectronics%2C401&crid=1M4KMJEGDLTEL
disable JS and see the sortby section top right corner.