Alright, I know how the fieldset/legend works out in HTML. Say you have a form with some fields:
<form>
<fieldset>
<legend>legend</legend>
<input name="input1" />
</fieldset>
</form>
What should I use the legend for? It's being displayed as a title, but isn't a legend semantically an explanation of the contents? In my view, preferably you'd do something like this:
<form>
<fieldset>
<legend>* = required</legend>
<label for="input1">input 1 *</label><input id="input1" name="input1" />
</fieldset>
</form>
But that doesn't really work out with how fieldsets are rendered. Is this just a ambigious naming in HTML, or is it my misunderstanding of the English word 'legend'?
Edit: fixed some errors ;-)
Yes, the naming is ambiguous. It’s best to consider it as a caption for the fieldset.
See the HTML spec on FIELDSET and LEGEND elements if you haven’t already:
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.
I guess you meant to write
<form>
<fieldset>
<legend>legend</legend>
<input name="input1" />
</fieldset>
</form>
but you're right in part. The word legend has several meanings including
An explanatory caption accompanying
an illustration.
An explanatory
table or list of the symbols
appearing on a map or chart.
So it can in fact mean both.
When you say that the legend "It's being displayed as a title".. clearly it depends on the CSS involved. When you don't specify CSS yourself, each browser uses its own built-in styles, which may or may not be the best thing ever.
I agree that a legend is different than a title... I don't necessarily think that the legend is the right place for something like "* = required" (that seems just a cautionary piece of information for the user, not really an explanation of the fieldset itself).
A legend, after all, can be defined as a caption, or brief description accompanying an illustration (usually; something other than an image in this case).
As far as how it gets displayed, again, CSS gives you power to make it appear (or not) as you see fit.
Think of the legend as a title of a groupbox. You use it to group similar form elements together. You could have all of the input fields for a shipping address in one fieldset with a legend of "Shipping Address" and the set of all input fields for a billing address in another fieldset with a legend of "Billing Address".
Here's an example:
Fieldsets in Skiviez Checkout http://piasecki.name/fieldset-legend-example.jpg
They can be tricky to style via CSS (because Internet Explorer displays the background of the fieldset incorrectly. Our IE stylesheet has some good examples; look in the "#content form fieldset" section.
The <legend> element is the semantic equivalent of a "headline" or "title" for the group of form controls contained by the <fieldset>.
The FIELDSET element allows authors to group thematically related controls
which means fieldsets should group together several form controls -- not just a single pair of <input> and <legend>.
In fact <div>s, <p>s, or <li>s are quite suitable containers for <input> + <legend> pairs.
Related
I just noticed an interesting way of placing input elements outside of form tag today.
<html>
<!-- the form element -->
<form id="testform" method="post" action="index.asp">
<label for="text1">Text: </label>
<input type="text" id="text1" name="text1" />
<button type="submit">Submit</button>
</form>
<!--- element outside form tag -->
<label for="text2">Additional Text: </label>
<input type="text" id="text2" name="text2" form="testform" />
</html>
I am just wondering if it is common to practice to do this. Should this method be avoided?
Tried googling for similar discussions but i really don't know how to phrase this.
It is not common practice. In most cases, it offers no benefits but has a drawback: some old browsers do not support the form attribute, so things just don’t work on them.
An input element outside a form element has always been permitted. Such an element just won’t participate in any form submission, if it has no form attribute. But it can be used with client-side scripting.
The form attribute associates, in supporting browsers, the element with a form just as if the element were inside the form. This can be useful in complicated cases where e.g. one row of a table should contain fields of a form, another row fields of another form, etc. You cannot wrap just one row inside a form, and here the attribute comes to rescue: you put a form element inside one cell of the row and refer to that element in fields in other cells with the form attribute.
Yes, you can definitely do this as of HTML5, using the form attribute on inputs that are located outside the form element; just like you did.
For more details and examples, see HTML <input> form Attribute at W3 Schools.
There is nothing wrong with putting them there, and they will be available within the DOM if you are doing something with javascript, etc. but when you submit the form, the values of your fields will not be in the results submitted.
yes you can put input element outside the form but how would you decide how and where you 're going to post values of these elements.
I notice this trend in a lot of frameworks, auto-generated code (Zend) and layout templates. The approach I'm talking about is such:
<label for="someField">
<input id="someField" name="someName" />
</label>
What are the pros and cons of this approach vs. the regular one, and why do people tend to take this approach at all?
It seems to be fine judging by W3C standards in both HTML4.01 and HTML5:
HTML4:
"To associate a label with another control implicitly, the control
element must be within the contents of the LABEL element. In this
case, the LABEL may only contain one control element. The label itself
may be positioned before or after the associated control."
In this example, we implicitly associate a labels with a text input control:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
</p>
</form>
It is still fine as of HTML5:
"The label element represents a caption in a user interface. The
caption can be associated with a specific form control, known as the
label element's labeled control, either using the for attribute, or by
putting the form control inside the label element itself. - W3C.
I've been a developer for a long time, however forms have always been my least favourite part, more specifically designing them!
I'd really like to know how you do you forms, and why. I've had a few discussions with fellow developers over <div> vs <p> on form fields. Which one would you stick with, and why?
An example of what I am talking about:
<form action="" method="post">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Log In" />
</p>
</form>
VS
<form action="" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Log In" />
</div>
</form>
When it comes to styling, it seems you can do pretty much the same with both, so is it just personal preference, or is there logic behind using one over the other?
Thanks for your time :)
UPDATE
I ended up following a nice article on HTML5 forms and have actually found it to allow MUCH better styling of forms. They are much more organised from a development perspective too. For anyone interested, it is located here: http://24ways.org/2009/have-a-field-day-with-html5-forms
HTML is all about semantics. There is no reason username or submit should be inside a paragraph (<p>) because it's not a paragraph.
So I would go using <div> instead. Ok, maybe <div> has no meaning at all. But it's better than <p>.
I prefer the <div> variant, because its semantics is closer on what you want to express and markup.
A <p> tag is for text paragraphs, whereas a <div> is a general block of any kind.
One option I'd like to suggest:
You could consider wrapping the input inside its label. That way you possibly can avoid additional elements. Also (if you don't need to support IE6) then this allows you to drop the for. And finally if the input is a check box or radio button, then it allows the user to click on the whole text instead of just the tiny control, just like in most operating systems:
<label>Username: <input type="text" name="username" /></label>
Also I'm not sure what the point of an empty label for the submit button is good for, except being lazy when writing the style sheet.
Just thought I'd throw my 2 cents in (assuming we all agree that semantic markup is the goal):
While one can argue that form elements themselves are not semantic, this doesn't mean that the context in which they appear is not as well. There is no "one true way" to markup all form controls.
If the control is actually appearing in a paragraph of text, that is fine - but that pretty much never happens.
If it is an ordered list of checkboxes for example, put them in an <ol> tag.
If order is not relevant, use a <ul> in that case.
If it is a label/text_input pair, one could argue that a <dl> element is appropriate
If it is a spreadsheet, use a <table> (Yes, tables can be appropriate! In fact, I've heard the (questionable) argument many times that form data is tabular)
By the way it is considered a description list in HTML5 to clear up confusion about meaning, and whether or not it's appropriate for things other than literal definition terms.
Almost no one will ever say a <p> is appropriate, but very few will argue that a <div> is inappropriate because there are no attached semantics.
Semantically, each label is bound to its control through the for attribute. There's no need to wrap the pair for semantic reasons, although you may wish to do so for styling reasons. So div is appropriate.
Similarly, grouping of controls has a dedicated element fieldset so there's no sense in using ul, ol or dl for that purpose, and using them is simply a form of listitis.
What about fieldsets ? - it is more logical for forms
And in fact you can style anything the way you want
Semantically I'd say divs make more sense simply because they have no semantic meaning and the only reason to use a block container like this is for layout purposes. That said, I use paragraphs, but completely out of habit. It's the only place I use paragraphs while not considering their semantic meaning.
Can I use the <caption> tag inside a form ? If not, why not?
Example:
<form>
<caption>description</caption>
<label>name:</label>
<input />
</form>
Have you actually tried it first?
Answer: no. (Well, you can, but it would break standards).
The <caption> element is used to caption a table, not a form.
Alternative solution:
If you really want to caption forms, simply add a valid element that can be styled with CSS to it, like so:
<form>
<div class="caption">This is my form caption</div>
<input .../>
</form>
Another approach, that would probably be more semantically correct, would be to use a <fieldset> to group your form:
<fieldset>
<legend>This is my form caption</legend>
<form>
<input .../>
</form>
</fieldset>
You are looking for the <legend> tag, perhaps?
No, the caption element pertains specifically to tables. One may argue it's a strange case of omission on part of whoever helped make HTML what it is today, but be it as it may, it cannot be used with forms. Furthermore, there are semantical implications of trying to use caption for a form, since it captions tables and not forms.
The idiomatic way to "caption" or "head" content in HTML, including announcing forms and form content, is to use the heading tags h1, h2 etc. These are generic with regard to what they help announce and you may therefore well precede or nest these within a form element.
In your case you would then have:
<form>
<h1>description</h1>
<label>name:</label>
<input />
</form>
or you could also put the heading element directly preceding the form element:
<h1>description</h1>
<form>
<label>name:</label>
<input />
</form>
I think the former is more semantically applicable, but sometimes certain factors like abilities of CSS, will necessitate use of the latter. Either should be valid, regardless.
I've seen lots of ways to label things in a form such as <label>, <div>, <span>, etc. Is there a right or wrong answer for this? Are there any advantages/disadvantages to any of these?
Thank You
Label is best for accessibility (tab order, screen readers, etc)
See more at:
http://www.communitymx.com/content/article.cfm?cid=02310
I tend to prefer this:
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
Take a look at what Phil Haack thinks...
The proper way to provide a label to a form element is to use <label>:
Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
The <label> element is used to specify labels for controls that do not have implicit labels
Since it is a semantic element providing meaning to your markup user agents can make sense of it and tend to helpfully direct clicks on the label to the element itself (very helpful for tiny controls like checkboxes). Also you're providing helpful assistance to people using screen readers or other accessibility features.
You shouldn't use <div> or <span> to actually label an element. For auxiliary help text, however, they might prove useful. But imho you should stick to the semantic capabilities of HTML where possible and sensible. This is such as case in my eyes.
The best way is this one :
<label for="anInput">This is the input</label>
<input type="text" name="anInput" />
This is especially interesting for checkboxes. If you click the label it will check/uncheck the checkbox. If you click on the label of an input field it selects it.
The tag defines a label for an
input element.
The label element does not render as
anything special for the user.
However, it provides a usability
improvement for mouse users, because
if the user clicks on the text within
the label element, it toggles the
control.
The for attribute of the tag
should be equal to the id attribute of
the related element to bind them
together.
via