I'm using labels for a form. When you click on a "line" of a label, this will select the input for you, which is natural.
However, when I wanted to use, for example, 3 selects within the same <label> (DD/MM/YY), it won't select none, probably given that there should only be one input.
Is there any way to make it so labels won't automatically focus on an input, or should I pick another way to place the selects?
You can put the ID of the label same as the first field of the date input. For example see the demo here:
http://jsfiddle.net/E4Fh5/1/
I believe the convention in this case is to assign the label to the first select element.
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
for = idref [CS] This attribute
explicitly associates the label being
defined with another control. When
present, the value of this attribute
must be the same as the value of the
id attribute of some other control in
the same document. When absent, the
label being defined is associated with
the element's contents.
I'm assuming you currently have the <select> inside of the <label>.
If you move the content outside without setting the for attribute, it should do what your're after:
<label>Date<label><select></select>...
For accessibility of screen readers, you should actually have 3 labels here, one for each select, but you probably only want the first one to be visible and as Tobias said, assigned to the first select.
Related
I essentially want the same functionality in a "single" select as in a "multiple" select. In the multiple select, the original element is also the search box:
In single select, there is a separate span for the result (in the example below it displays ProfitLoss) and the search box (newsearch).
Is there a way to collapse those two elements into one, where one simply edits the original element (in the example, one would edit the element containing "profitloss")?
I tried setting minimumResultsForSearch to -1, that did not do anything. ChatGPT also did not come with any useful answers.
It's possible to customize HTML in handling events
First, You have to implement "multiple" select (Design the select field the same like the single one)
After then, you can do some customize in HTML by capturing the event
1. selecting
2. change
So, when the user selects the option, the selecting and select events are fired where you do your logic to customize the HTML, remove the item, OR add the item. It work like single select
I hope you got the idea
I am working on a form that is in a format like:
HOME CELL
PHONE_NUM TEXT_INPUT TEXT_INPUT2
Why can't TEXT_INPUT and TEXT_INPUT2 be listed in the for with &&?
The benifit of having the label is to keep the input fields aligned correctly on the same row.. is there any other benifit?
Adding a for attribute to a label makes it so clicking on the label will put focus on the input (assuming it's a text input). Therefore having two ids in a single for attribute doesn't make sense: the browser wouldn't know which input to put focus on.
for attributes also have nothing to do with styling and positioning. You should be able to keep your form looking the same without a for attribute.
There ARE other benefits - The <label>provides a usability improvement for mouse users in that when properly bound to the <input> it will toggle the <input>. Basically it gives mouse users a bigger target to hit. Eg they can click the <label> in addition to the <input> or control to give it focus.
Just not sure what the difference is. Trying to figure out what's best for my use case.
The difference regards HTML and is not related to AngularJS. Anyway some definitions from the W3Schools site:
input type text:
The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to input data.
An input field can vary in many ways, depending on the type attribute.
Textarea:
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
You can find definitions and examples here: input and text area
Generally speaking an input field is a one-line field (probably to carry something like first name or last name, a phone number, an email). A textarea is a multi-line field that allows you to press ENTER! They are used for addresses or others long and complex type of data (also notes, for instance).
Maybe this is to obvious, but just thought to mention:
Textarea value - The value of the textarea object is the html inside of the start and end tags of it.
Input value - The input object value of the input is found inside the attribute value.
TextArea holds multiple lines, input text is only for one line
the difference in declaration is as follows
<input name="txtDescEd" type="text" />
<textarea name="txtDescEd" cols="60" rows="10"></textarea>
The major difference between a textarea and a text field ( ), is that a text field only has one line, whereas a textarea usually has multiple lines.
TextBox: the input element defines an input field. A TextBox is created by specifying the type attribute to "text".
TextArea:the TextArea element defines a multi-line text area.
INPUT tag always start write from the middle of block of inputfield. Where as TextArea always start from top of the box of input field whatever their height and width is.
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.