Discovering new HTML tags for forms
In the past I've occasionally surprised myself by discovering new HTML tags. After all, how many can there be? Well, I think the answer is somewhere around 100. You'd think then that 7 years of working with HTML would be ample time to get to know them all would you not? Today I discovered another - <optgroup>
The OPTGROUP element defines a group of choices within a SELECT menu. OPTGROUP must contain one or more OPTION elements to define the actual choices.
Not some obscure element I would never use anyway, but quite a nice addition to the toolbox when designing forms. Here's an example:
And a snippet of the HTML code used:
<select name="favouritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
</optgroup>
</select>I found this little gem while I was reading a great article on the webstandards.org site about designing Accessible HTML/XHTML Forms. As Domino Developers it should be on all our to-do lists to print this out and give it a good once over.
Using this element eBay could habe saved my this headache as they wouldn't have needed to use pseudo-optgroups in the form below:
My only qualm is the default styling of the optgroup label in all the browers I tested this in (it's supported by most modern browsers (IE6+, Moz 1, Netscape 6+) but degrades quite well in the others). I never like bold and italic type; it's always a little too much for me. However, from what I can see, there's no way of changing this in CSS. Maybe that's a good thing as it keeps things the same for users.
I also happened upon another article talking about forms yesterday. It shows ways of turning a boring form in to something more interesting using CSS.
Skip to the 
You can subscribe to an individual
That really is a good one, that one..
Thanks it will be used...
The real challenge with forms is taking one that is very long (vertically) and translating it into one that, in effect, scrolls horozontally, ie. it is presented in multiple sequential pages and in an accessible manner and without Javascript.
Any ideas other than JSP or servlets?
What do you mean by "accessible manner" David? Does that rule out CSS styles?
You can do sequential pages using tabbed tables in Notes. Each page of the form is a separate tab. When you press "next" it sets the tab to the next one along. We did this before at a client years ago. Maybe an article in there somewhere...
Great tip Jake...
I need to think about how I could use this other than using straight HTML. I mean I guess I could use computed text that would reference other fields on the form and that would make it dynamic.
Al
No - it certainly doesn't rule out CSS styles though the pages should still work if a user chooses to apply their own - perhaps to produce high contrast or increase the character size. It does rule out Javascript though.
The tabbed tables appear not to store values when changing tabs - if you return to a previous tab any values have disappeared. There are a few other problems too but they might be soluble perhaps.
>> However, from what I can see, there's no way of changing this in CSS. <<
In fact, there is an extremely easy way: Don't use IE ... ;-) Mozilla and Firefox will happily accept any font formating for the optgroup and the option tag.
It's strange using CSS with this element. All the browsers will let you change the colour of the optgroup. IE won't let you change the font, whereas Firefox will. However, any changes you make apply to both the optgroup and the options that are nested in them. Hence if you described the following styles in this order:
optgroup{
color:green;
font-style:normal;
font-weight:normal;
}
option{
font-weight:bold
}
In all browsers, all the entries would be green. In Mozilla optgroup headers would be plain fonts. In all browsers, the options themselves will be bold. In IE the optgroup headers would remain bold and italic. Probably best to leave them this way.
Jake,
I was just searching on Tags on this site.. and found this old blog from a couple of years ago.. it starts quite similar to todays post!
{Link}
That's not a blog Gadders. It's an article! of sorts..
Glad you managed to find it. I knew I'd written something very similar and tried to search for it myself. As with most Domino searches it's a little hit and miss. You hit, I missed. Your gadder's better than mine obviously.
Jake,
I have to de-lurk and comment. The primaey feature, mehtinks, of any collection of knowledge (database, Knowledge Infrastructure, Expert System, Decision Support System, call it what you will) is the ability to access the data.
There's no point in having all this great stuff (and you've done it again with a very cool tag, kudos!) if it is impossible to find afterwards.
I have given up in dispair a lot on many sites (including this one) trying to find a meme. In the end I resort to all sorts of proprietary methods, like for this site I have placed the target chronologically (i.e. I estimate when I read it) and search (British-museum-style) through all postings around that date until I find it.
I s'pose I could use advanced google-nomics to find it, but I would argue (and I do, a lot) that it is incumbent on the owner to do this in the first place.
/rant
Patrick. My prefered method is to use Google, as you say.
If your search for "site:www.codestore.net new tags" {Link}
The first hit is the post I couldn't find. Why? Because I used the Notes search!
What I might do is change this site's search box to allow searches using either or. You're right, it's down to me to allow you to find my stuff as simply as possible
Jake,
didn't mean to flame you, it just gets my goat when I surf for hours and find loads of neat stuff and then can't find it later (your site is by no means the biggest culprit).
The undesired result is that I wind up with zillions of (sometimes finite-lifespan) bookmarks that aren't available off-line, or to decrease surfing speed whilst I convert web pages to a convenient local storage facility (like a text file) in the crystal-ball method of selecting good techniques to apply in the future.
It's funny that this sort of "semantic classification" doesn't occur much earlier in everyone's design process.
Of all the things to drop due to the remorseless project completion pressure, I would vote standard XML semantic definitions for web pages and constituent parts as the last.
Unfortunately management (mostly) seem to think differently.
Did I mention this is a high-quality site? Loads of good stuff, just need to find it. How many ways can you categorise data? How many ways do you want to ...
Cheers
No worries Patrick. Didn;t see it as a flame at all. I agree with what you're saying. What's the point of useful information if you can't find it!?
perhaps I should have added a tag <discussion-content-type> no-flame </discussion-content-type>
;-)
A tag that has been very helpful to me when designing forms and that I discovered by accident is fieldset. It groups sections of the form and it allows you to set a legend. Here is an example: {Link}
Jake,
Mike has written some nice JS code for searching in Google style. No more AND operators needed and very easy Google style syntax.
{Link}
Jake, is it also possible to apply this to a multi-select input element? If so, I will modify my blog template for sure. Great tip!
Here's an easy way to apply this, re: Allen's post.
Use a categorized view to build your options and optgroups. But, your thinking, I can't close a set with categories. No, but you can fake out your browser. The browser won't care if each opt group looks like this:
[/optgroup][optgroup label="dairy"]
That is what your category will format as ( using the proper characters instead of [ and ], of course).
For your categorized items, you would simply formulate as follows:
[option value="cheese"]Cheese[/option]
To implement, embed the view between the following and treat content as HTML and use HTML to display.
[select]
$$ViewBody
[/optgroup]
[/select]
Hope that's useful.
Jerry
hmmm, I'm stuck at work on IE 5.5 (yes, it's really true), and I don't get the subheadings that I believe I am supposed to get - I just see:
Choose your favourite food:
Cheese
Eggs
etc
Just thought I would mention it for those who have to support old browsers...
The funny thing about optgroup is that the W3C document describes it in a way that lead me to believe that each optgroup would be in a submenu, but it's implemented rather differently in existing browsers.
PS, to get itto render correctly when optgroup isn't implemented, you should do something like this:
<select name="favouritefood">
<optgroup label="Dairy products">
<option label="Cheese">Dairy: Cheese</option>
<option label="Egg">Dairy: Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option label="Cabbage">Vegetables: Cabbage</option>
<option label="Lettuce">Vegetables: Lettuce</option>
</optgroup>
</select>