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.
Related
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.
HTML5 Anyway to include a submit button directly into a input type="text"?
For instance when the user types in something, a button "submit" appears inside the textarea?
Another way to look at it, can u define 2 types in one input?
No, you can't define two input types in the same input element.
To achieve what you want you'd need to define a separate input element for your button, and use CSS and JavaScript to position it and make it appear/disappear etc.
You could do something like this (using jQuery for convenience.) The code could be cleaned up, but that's the general idea.
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.
I'm trying to create a hidden textfield for an iphone specific site, basically I've taken a textfield, hidden all of its elements and show an image instead, when clicked this pops up an onscreen keyboard, as well as submitting when the form loses focus.
What I can't get rid of is the text caret. It flashes at me as if I'm some loser who can't set his VCR to anything but 12:00.
Have you tried disabling the text field as well? disabled="disabled"
Why not just change the type of the input element to "hidden" when it's not supposed to be edited? E.g.
<input type="hidden" name="datafield" id="datafield" />
That way it won't allow for the caret to be standing on it. If you need its value to be displayed, add a DIV and populate it with the datafield value. Then just put a click event on the DIV to activate the input field.
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.