James Wiseman

Most of us have probably done it. A web page, some fields, and a button. The button is disabled until you fill-out/select the required fields.

Here is our disabled button:

But, how disabled is it?

Well, as it turns out, not very.

I’m assuming that if you’re reading this you’ll have Firefox with Firebug installed (even if you don’t use it all that much). Either that or you’ll have IE with the developer toolbar. Either way, hit F12 – this should bring it up.

However which way you can, navigate to the point in the DOM containing the ‘Click Me’ button.

You’ll then be able to delete the ‘disabled’ attribute, allowing you to click the button.

This is where some good server-side validation comes in handy. Never rely on JavaScript or HTML styles/attributes alone. They can always be circumvented. Server-side validation, broadly speaking, cannot!

Recently I encountered a business requirement whereby it was stipulated that both radio buttons in a group be left unchecked. In addition to this, a check was required to forcing the user to select one before they can continue.

This struck me as being direct contradiction as to what a Radio button was trying to achieve, and that it was actually more work as you were forcing the user to make a choice without giving them a default.

It just felt wrong.

But I wasn’t sure, so I did a bit of research, and came up with the following.

Firstly (and some could say, lastly) there is the W3 Recommendation at http://www.w3.org/TR/html401/interact/forms.html#radio:

At all times, exactly one of the radio buttons in a set is checked.

And that ought to be it, but for completeness, here is quite a nice set of guidelines regarding this http://www.useit.com/alertbox/20040927.html:

Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn’t display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.)

If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled “None.” Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen.

I probably should understand more about CSS positioning and layout styles on HTML DIVs, as its integral to today’s modern web page.

The days where I used to lay everything out in a borderless HTML table are long gone, but despite this many of the features of DIV positioning remained a mystery to me until I stumbled across Barely Fitz Designs Learn CSS Positioning in Ten Steps.

You get ten simple demonstrations on the positioning options, which covers all you need to know. Practice, as always, makes perfect, to its worthwhile having a play yourself.

He even invites you to buy him a beer for his efforts. I didn’t, but don’t let that stop you.

Mmmm, now I’m thirsty.

Have you ever found yourself wanting to test out a bit of HTML/CSS/JavaScript without having access to an IDE or being bothered to fire it up?

Do you want to hack prototype a bit of code quickly without fuss?

Or maybe you’re one of those StackOverflow answerers that Race To Get The First Answer In.

If your answer is ‘yes’ or ‘I am actually’ then there’s probably a myriad of different resources you can call upon to help out, but you might consider JSFiddle

I created  a really simple bit of code:

HTML

<input type="checkbox" />

JavaScript/jQuery

$("input").click(function(){alert("test");});

Then I selected ‘jQuery 1.4.2.’ from the ‘Choose Framework’ section and clicked run.

When I clicked on the checkbox, everything hung together like a dream:

At the time of writing the blurb stated that it was still under heavy development, however I still thought it was a genuinely nice little tool that I wanted to share.