I got a quick question here. Why do we always bind a checkbox id to the for-attribute in a label? Does it have any purpose? If so, can you please list it out? And also its technical advantage.
Thanks in advance,
Madhu.
You don't always have to bind a checkbox (or any input) id to a label. What it does is allow you to click the label to trigger a click of the checkbox (or input). This also works if the label element wraps the <input> without requiring id/for:
<label for="checkbox">Click checkbox</label> <input id="checkbox" type=checkbox>
<label>Click checkbox <input type=checkbox></label>
Yes it does have a purpose. Basically it allows you to "click" it, it also has use for screen readers.
Answer: Regarding the HTML Label's "For" Property
Related
The question consists of two parts:
Is it ok (from the UX/UI p.o.v.) to make a search box on the page activated on the first tab keypress?
How to do it technically keeping the rest of the tabbing mechanism intact (e.g. the first element activated on tab keypress by default is now activated right after the search box on the second tab keypress)?
For the desktop browsers it okay. But bad UX for the mobile browser as it will popup the keyboard focus automatically comes to search box.
Set attribute tabindex="0" for the elements programmatically using JavaScript after the the search box leaves focus. Use onblur() event.
You can use tabindex=1 attribute in your search input element to achieve. Like this,
<input type="text" placeholder="Search here" tabindex="1" />
Whether you should or not, This article might help
I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with display: none and am styling the <label> so that when the user clicks the label it triggers the checkbox.
I've got this to work in vanilla HTML and CSS, however when I try this in React, clicking the label doesn't do anything. ONLY if I unhide the checkbox am I able to click on the checkbox and am able to see the label styling. I want to hide the checkbox though.
Does anyone know how to hide the checkbox and still able to click the label in ReactJS?
Here is the codepen of what I am trying to build in ReactJS.
Use htmlFor instead of for in react (see react supported attributes):
<input type="checkbox" id="check3"/> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label>
As it was already stated - use htmlFor and then try adding onClick event on label instead of on an input. This will add/remove checked attribute on the input itself. I assume that you already use defaultChecked attribute on your input.
I want to show some text in my program and I tried with TextArea. However, the text shown is changeable. How can I make the text read only?
I did it like this:
#FXML
private TextArea myText;
and then added the following code to initialise():
myText.setEditable(false);
I needed read-only text fields, but setting the disabled property used styling which was not correct in context (in my scenario, the text field was an input to a search function where a value could be fixed in some cases - disabling the text field implied that it was not part of the search, rather than the value was fixed).
In the end I landed up using:
txtInput.setEditable(false);
txtInput.setMouseTransparent(true);
txtInput.setFocusTraversable(false);
This results in a normal looking text field that is non-reactive to the user.
Maybe just a text would serve the purpose.
Or if you want to show the text in a text field, then:
tf.setDisable(true)
In FXML, add editable="false" to your TextField tag.
Or uncheck the "Editable" checkbox in Scene Builder.
I would say just use a Label.
<TextField fx:id="input" disable="true"/>
You can use following statement in order to make text-area object non-editable with auto scrollbar:
textAreaObjectName.setEditable(false);
Hint: After setting the text to that respective textarea object using textAreaObjectName.setText() method.
I'm usting an asp:ListBox and I understand that to deselect items the user needs to hold down control while clicking on a selected item. Is there a way to make it that clicking on a selected item will deselect it without holding down control?
You can, but not in ASP.Net. You need to change the client-side HTML, meaning you need to code it using Javascript, to change the default behaviour or a select box. Something like:
<script>
function MyHandle(oSelect)
{
(change behaviuor here, using object oSelect)
return false;
}
</script>
<SELECT onclick="MyHandle(this)">
...
</SELECT>
But... I really recomend against it. To acheive what you want, your "MyHandle" function would have to emulate everything that normal forms does: selecting, de-selecting, range selecting (using shift), single selection without affecting others (control key), etc.
Its easier to switch to checkboxes, as Jakob suggested.
I don't think asp.net's listbox can do that out of the box (I think winform's listbox can) but you can set SelectionMode to Multiple and write javascript to achieve the behavior you require.
I have a select box, <select multiple=true, that the user populates with values via a Picklist mechanism. I would like to disable highlighting in this box because, by definition, the values in this box are the selection.
Just to clarify, I am NOT referring to text selection, which is what ::selection operates on. I'm talking about the usually blue highlighting that the browser applies to selected line item(s) when the user clicks on them.
I'm not worried about the user blindly clicking around, because I am auto-selecting all items onsubmit so that all the values get sent.
Why not just list the items in their own div instead of a select element? You aren't having the users interact with them anyway, right?
Then, you can have a select element w/ all the values you want, but make it hidden via CSS so that the user won't ever see them. It'll just be there in your form so that you can grab those values on your submit.
If I'm reading you correctly, it sounds like you're using an accumulator model where you have a "source" box (or list or select or something) and a "selected" box. Rather than accumulating into a [select], maybe use a div? If you must use a select, you could try disabling it, but that carries other visual baggage. You could also try styling the select color, but that's definitely not going to be cross-browser.
Make it disabled?
<select disabled="disabled">
This would gray it out, unfortunately- the other option might be some javascript to unselect any selections.
if i understand you correctly, the user does not actually selects the items? then why not either disable it or if customer still interacts with it, you might need to go with some JS code to help yourself