I’d like to think that I know a fair amount about core HTML.  That said there’s always room to learn more, and yesterday was a case in point.

Until now, when wanting to separate groups of elements in a selection list we’ve always introduced option elements surrounded by extra characters, e.g. (“–Intermediate / Higher /Advanced Higher”) in the example below.

<SELECT>
<OPTION>--National Assessments (5-14)
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
<OPTION>--Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
<OPTION>--Intermediate / Higher /Advanced Higher
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>--Standard Grades
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
<OPTION>-HNC/HND
<OPTION>Pass
<OPTION>Fail
<OPTION>--NVQ/SVQ
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</SELECT>

As a solution this is a bit messy as the user is still able to select the separator options, and therefore relies on client or server validation to prevent this being saved.  What a revolution then to find that there is an HTML element that allows you to group together a number of option elements – and it’s called OPTGROUP.  Go figure!

In action then, the list above then becomes:

<SELECT>
<OPTGROUP label="National Assessments (5-14)">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
</OPTGROUP><OPTGROUP>Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="Intermediate / Higher /Advanced Higher">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
</OPTGROUP><OPTGROUP label="Standard Grades">
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
</OPTGROUP><OPTGROUP label="HNC/HND">
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="NVQ/SVQ">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</OPTGROUP></SELECT>

It’s browser compliant, and you can style the OptGroup elements different to the Option elements.

Now I can’t wait to see what I can learn today.

At least. that’s what I thought until today.

It’s been a bit of a running joke in our office that being cynical too early in the week is non-productive, and detracts from the job in hand.  And so it was that “Cynical Thursday” was born!  Why Thursday?  Well, obviously Wednesday signifies the middle of the week – still far too early for negative vibes.  And who wants to be downcast on a Friday, riding the cusp of the weekend?

Not to break with tradition, today has had it’s fair share of gripes and groans – about work, people, life etc.  But today is different.  Today our cynicism has reached the level whereby we challenged ourselves to do something about it.

Today, “theoldsewingfactory” has been reborn.  This blog is the start of things to come.

No longer will cynicism rule.  No longer will we allow our destiny to be taken from our hands.  We have a voice.  We have talent and skills.

We will succeed.