Please see the form HTML code below
<form method="post" action="register">
<div class="email">
Email <input type="text" tabindex="1" id="email" value="" name="email"> </div>
</div>
<div class="agreement">
<div tabindex="2" class="terms_radio">
<div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
<input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
</div>
</div>
</div>
<div class="form_submit">
<input type="button" tabindex="3" value="Cancel" name="cancel">
<input type="submit" tabindex="4" value="Submit" name="submit">
</div>
</form>
Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.
I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,
Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?
DIV elements are not compatible with tabindex in HTML4).
(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Essentially anything you would expect to be able to hold focus; form elements, links, etc.
What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.
Stick this at the bottom of your body tag to grab jQuery from the Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Then something like this would probably do the trick:
$(function() {
$('div.radio input').bind({
focus : function() {
$(this).closest('div.radio').css('border','1px dotted #000');
},
blur : function() {
$(this).closest('div.radio').css('border','none');
}
});
});
Yes! There is a spec for it, its called WAI-ARIA and its for accessibility : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between
You could simply change the tabindex value from 2 to 0.
<div tabindex="0" class="terms_radio">
This provides the default focus state that goes with the flow of your code.
https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex
You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use
input:focus+label {}
to style the label
Related
I'm widely using labels associated with checkbox inputs in my html. It allows user to click on the wide label and get what he wants - checkbox toggle. I want to achieve similar behaviour by pressing Space to toggle the checkbox while being focused on the label. To make label focusable I add tabindex="0" to labels. I also don't want checkboxes to be focusable so I add tabindex="-1" to inputs.
Here are two examples, one is using label tag wrapping, another is using for attribute.
<input type="button" value="Click then press tab." /><br/>
<label tabindex="0">Accept terms <input type="checkbox" tabindex="-1"/></label><br/>
<label for="MyCheckbox" tabindex="0">Accept terms</label> <input type="checkbox" id="MyCheckbox" tabindex="-1"/>
I'm interested in a possibility of achieving desired behaviour without any javascript.
I think you should not set tabindex to label at all. Instead, set tabindex only to checkbox and place it outside the label. Works for me on Safari.
<input type="button" value="Click then press tab"><br>
<label for="myCheckbox">This is label</label>
<input type="checkbox" id="myCheckbox" tabindex="0">
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
I have a simple form with two hidden inputs that is causing extra white space in Firefox. I've been in trouble with this for few days.
<form name="DemoForm" method="get">
<input type="hidden" name="isposted" value="">
<input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
It is rendered in cell. After that, there is a div with content, but in firefox there is a extra white space above the div. Only in Firefox.
I try to fix this putting the form in a div with display:none, its elements in div with "dispay:none" and other things that I have found in the net, but nothing help...
Has anyone met this issue before?
I have fix this issue using div container with "display:none" but removing the "type:hidden" from each element.
The final code looks as follows:
<div style="display:none">
<form name="DemoForm" method="get">
<input name="isposted" value="">
<input value="2" id="SelectedTab" name="SelectedTab">
</form>
</div>
Sure, this could be useful for someone. :- ]
Try removing all white spaces and newline characters within the form, like this:
<form name="DemoForm" method="get"><input type="hidden" name="isposted" value=""><input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
Similar idea to gotqn.
Make data field intended to be hidden an ordinary text field.
Just "hide" the input field by making it the same background-color as the form background.
If you want to hide the field data, use a text color the same as the background.
If you want to display some message/number in it, use a text color that is contrastingly different.
I often form elements that are blanked out (e.g. the content is un-editable, you can't focus, gray overlay). What styling or attribute is applied to the form elements to create this effect?
Any answers will be very much appreciated :).
disabled="1" / or just disabled. e.g. <input disabled="1" ...
The form element is disabled;
See here
you create a disabled input like this:
<input type="text" name="fieldname" disabled="disabled" />
This also works for all other form elements except elements with type='hidden'
You should be using the disabled attribute:
HTML button disabled Attribute
HTML input disabled Attribute
The disabled attribute specifies that a button should be disabled.
A disabled button is unusable and un-clickable.
The disabled attribute can be set to keep a user from clicking on the
button until some other condition has been met (like selecting a
checkbox, etc.). Then, a JavaScript is required to remove the disabled
value, and make the button usable.
The syntax use is:
<button disabled="disabled">
<input disabled="disabled" />
there is disabled to create the grey overlay
<input disabled type="text" name="myInput">
and readonly to make it focus but uneditable
<input readonly type="text" name="myInput">
I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.
Is there some way we can assign a "form id" to the inputs?
In HTML5, you can use the form attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" /> worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.
<input class="checkbox" id="staff_recruiting" name="company_type"
value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">
$('#search-keyword').keyup(function() {
$('#search-keyword-input').val($(this).val());
});
Your problem will be solved bro:
Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.